laif-ds 0.2.19 → 0.2.21

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

@@ -1,92 +1,155 @@
 "use client";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { motion as h } from "framer-motion";
-import p, { useEffect as T } from "react";
-import { Button as P } from "./button.js";
-import { Command as k, CommandGroup as C, CommandItem as b } from "./command.js";
-import { Icon as x } from "./icon.js";
-import { Popover as U, PopoverTrigger as R, PopoverContent as L } from "./popover.js";
-import { Tooltip as z, TooltipTrigger as E, TooltipContent as I } from "./tooltip.js";
-import { cn as v } from "../../lib/utils.js";
-import g from "../../node_modules/lucide-react/dist/esm/icons/x.js";
-import S from "../../node_modules/lucide-react/dist/esm/icons/file.js";
-const y = ({ url: e, onPreview: r, onDownload: a, onRemove: l }) => /* @__PURE__ */ o(U, { children: [
-  /* @__PURE__ */ t(R, { asChild: !0, children: /* @__PURE__ */ t(P, { variant: "ghost", size: "icon", children: /* @__PURE__ */ t(x, { name: "Menu", size: "sm" }) }) }),
-  /* @__PURE__ */ t(L, { className: "w-42 p-0", align: "end", children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ o(C, { children: [
-    r && /* @__PURE__ */ o(b, { onSelect: () => r(e), children: [
-      /* @__PURE__ */ t(x, { name: "Presentation", size: "sm" }),
+import { getExt as C, imageExts as W } from "../../lib/file-preview.js";
+import { motion as F } from "framer-motion";
+import f, { useEffect as E } from "react";
+import { Button as R } from "./button.js";
+import { Command as B, CommandGroup as $, CommandItem as v } from "./command.js";
+import { Icon as y } from "./icon.js";
+import { Popover as A, PopoverTrigger as S, PopoverContent as D } from "./popover.js";
+import { Tooltip as G, TooltipTrigger as M, TooltipContent as V } from "./tooltip.js";
+import { cn as N } from "../../lib/utils.js";
+import z from "../../node_modules/lucide-react/dist/esm/icons/x.js";
+import O from "../../node_modules/lucide-react/dist/esm/icons/file-audio.js";
+import P from "../../node_modules/lucide-react/dist/esm/icons/file-video.js";
+import h from "../../node_modules/lucide-react/dist/esm/icons/file-text.js";
+import X from "../../node_modules/lucide-react/dist/esm/icons/file.js";
+import _ from "../../node_modules/lucide-react/dist/esm/icons/file-code.js";
+import K from "../../node_modules/lucide-react/dist/esm/icons/file-archive.js";
+import q from "../../node_modules/lucide-react/dist/esm/icons/file-spreadsheet.js";
+const d = (e) => "type" in e && typeof e.type == "string" && e instanceof File, T = (e) => e.name || "url" in e && e.url || "", U = (e) => {
+  if (d(e)) return e.type || "";
+  const r = e.type;
+  return typeof r == "string" ? r : "";
+}, H = (e, r) => {
+  if (!e && r) {
+    if (r.startsWith("audio/"))
+      return { icon: O, colorClass: "text-violet-600" };
+    if (r.startsWith("video/"))
+      return { icon: P, colorClass: "text-rose-600" };
+    if (r.startsWith("text/"))
+      return { icon: h, colorClass: "text-gray-600" };
+  }
+  switch (e) {
+    case "pdf":
+      return { icon: h, colorClass: "text-red-600" };
+    case "doc":
+    case "docx":
+      return { icon: h, colorClass: "text-blue-600" };
+    case "xls":
+    case "xlsx":
+    case "csv":
+      return { icon: q, colorClass: "text-green-600" };
+    case "ppt":
+    case "pptx":
+      return { icon: h, colorClass: "text-orange-600" };
+    case "txt":
+    case "md":
+      return { icon: h, colorClass: "text-gray-600" };
+    case "zip":
+    case "rar":
+    case "7z":
+    case "tar":
+    case "gz":
+    case "tgz":
+      return { icon: K, colorClass: "text-amber-600" };
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+      return { icon: O, colorClass: "text-violet-600" };
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+      return { icon: P, colorClass: "text-rose-600" };
+    case "js":
+    case "ts":
+    case "jsx":
+    case "tsx":
+    case "json":
+    case "xml":
+    case "yml":
+    case "yaml":
+    case "html":
+    case "css":
+    case "scss":
+      return { icon: _, colorClass: "text-indigo-600" };
+    default:
+      return { icon: X, colorClass: "text-d-secondary-foreground" };
+  }
+}, L = (e) => {
+  if (!Number.isFinite(e) || e < 0) return "";
+  const r = ["B", "KB", "MB", "GB", "TB"];
+  let s = 0, a = e;
+  for (; a >= 1024 && s < r.length - 1; )
+    a /= 1024, s++;
+  const n = s > 0 && a < 100 ? 2 : 0;
+  return `${a.toFixed(n)}${r[s]}`;
+}, j = (e) => {
+  const r = C(T(e));
+  if (r) return r.toUpperCase();
+  const s = U(e);
+  return s ? s === "application/pdf" ? "PDF" : s.startsWith("image/") ? s.split("/")[1]?.toUpperCase() || "IMAGE" : s.startsWith("audio/") ? "AUDIO" : s.startsWith("video/") ? "VIDEO" : s.startsWith("text/") ? "TEXT" : s.includes("officedocument") || s.includes("msword") || s.includes("ms-excel") || s.includes("ms-powerpoint") ? "OFFICE" : "" : "";
+}, k = ({
+  url: e,
+  onPreview: r,
+  onDownload: s,
+  onRemove: a
+}) => /* @__PURE__ */ o(A, { children: [
+  /* @__PURE__ */ t(S, { asChild: !0, children: /* @__PURE__ */ t(R, { variant: "ghost", size: "icon", children: /* @__PURE__ */ t(y, { name: "Menu", size: "sm" }) }) }),
+  /* @__PURE__ */ t(D, { className: "w-42 p-0", align: "end", children: /* @__PURE__ */ t(B, { children: /* @__PURE__ */ o($, { children: [
+    r && /* @__PURE__ */ o(v, { onSelect: () => r(e), children: [
+      /* @__PURE__ */ t(y, { name: "Presentation", size: "sm" }),
       /* @__PURE__ */ t("span", { children: "Anteprima" })
     ] }),
-    a && /* @__PURE__ */ o(b, { onSelect: () => a(e), children: [
-      /* @__PURE__ */ t(x, { name: "Download", size: "sm" }),
+    s && /* @__PURE__ */ o(v, { onSelect: () => s(e), children: [
+      /* @__PURE__ */ t(y, { name: "Download", size: "sm" }),
       /* @__PURE__ */ t("span", { children: "Download" })
     ] }),
-    l && /* @__PURE__ */ o(
-      b,
+    a && /* @__PURE__ */ o(
+      v,
       {
-        onSelect: () => l(e),
+        onSelect: () => a(e),
         className: "text-red-500",
         children: [
-          /* @__PURE__ */ t(x, { name: "Trash", className: "text-red-500", size: "sm" }),
+          /* @__PURE__ */ t(y, { name: "Trash", className: "text-red-500", size: "sm" }),
           /* @__PURE__ */ t("span", { children: "Elimina" })
         ]
       }
     )
   ] }) }) })
 ] });
-function w({ text: e }) {
-  return /* @__PURE__ */ o(z, { children: [
-    /* @__PURE__ */ t(E, { "data-slot": "tooltip-trigger", className: "w-full min-w-0", children: /* @__PURE__ */ t("span", { className: "block w-full truncate text-d-secondary-foreground", children: e }) }),
-    /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t("span", { children: e }) })
+function I({ text: e }) {
+  return /* @__PURE__ */ o(G, { children: [
+    /* @__PURE__ */ t(M, { "data-slot": "tooltip-trigger", className: "w-full min-w-0", children: /* @__PURE__ */ t("span", { className: "text-d-secondary-foreground block w-full truncate", children: e }) }),
+    /* @__PURE__ */ t(V, { children: /* @__PURE__ */ t("span", { children: e }) })
   ] });
 }
-const u = (e) => "type" in e && typeof e.type == "string" && e instanceof File, O = (e) => {
-  if (u(e) || e.type)
-    return e.type;
-  const r = (i) => {
-    if (!i) return "";
-    const m = i.split(/[?#]/)[0].split("/").pop() || "", d = m.lastIndexOf(".");
-    return d >= 0 ? m.substring(d + 1).toLowerCase() : "";
-  }, a = r(e.name || ""), l = "url" in e ? r(e.url || "") : "", n = a || l;
-  if (n && (/* @__PURE__ */ new Set(["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg", "tiff"])).has(n))
-    return `image/${n === "jpg" ? "jpeg" : n}`;
-  if (n === "txt" || n === "md")
-    return "text/plain";
-  const s = {
-    pdf: "application/pdf",
-    csv: "text/csv",
-    doc: "application/msword",
-    docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    xls: "application/vnd.ms-excel",
-    xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    ppt: "application/vnd.ms-powerpoint",
-    pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation"
-  };
-  return n && s[n] ? s[n] : "application/octet-stream";
-}, W = p.forwardRef(
+const be = f.forwardRef(
   (e, r) => {
-    const a = O(e.file);
-    return a.startsWith("image/") ? /* @__PURE__ */ t(N, { ...e, ref: r }) : a.startsWith("text/") || e.file.name.endsWith(".txt") || e.file.name.endsWith(".md") ? /* @__PURE__ */ t(F, { ...e, ref: r }) : /* @__PURE__ */ t(j, { ...e, ref: r });
+    const s = T(e.file), a = C(s), n = U(e.file), m = a === "csv" || n === "text/csv";
+    return n && n.startsWith("image/") || a && W.has(a) ? /* @__PURE__ */ t(J, { ...e, ref: r }) : !m && (a === "txt" || a === "md" || n && n.startsWith("text/")) ? /* @__PURE__ */ t(Q, { ...e, ref: r }) : /* @__PURE__ */ t(Y, { ...e, ref: r });
   }
-);
-W.displayName = "FilePreview";
-const N = p.forwardRef(
+), J = f.forwardRef(
   ({
     file: e,
     onRemove: r,
-    onPreview: a,
-    onDownload: l,
+    onPreview: s,
+    onDownload: a,
     showActionMenu: n = !1,
-    className: c
-  }, s) => {
-    const i = u(e) ? URL.createObjectURL(e) : e.url;
+    className: m
+  }, p) => {
+    const i = d(e) ? URL.createObjectURL(e) : e.url, l = d(e) ? L(e.size) : "", c = j(e);
     return /* @__PURE__ */ o(
-      h.div,
+      F.div,
       {
-        ref: s,
-        className: v(
+        ref: p,
+        className: N(
           "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-          c
+          m
         ),
         layout: !0,
         initial: { opacity: 0, y: "100%" },
@@ -102,13 +165,19 @@ const N = p.forwardRef(
                 src: i
               }
             ),
-            /* @__PURE__ */ t(w, { text: e.name }),
+            /* @__PURE__ */ o("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ t(I, { text: e.name }),
+              (l || c) && /* @__PURE__ */ o("div", { className: "text-d-secondary-foreground/70 mt-0.5 text-[10px] leading-3", children: [
+                l,
+                c ? l ? ` · ${c}` : c : ""
+              ] })
+            ] }),
             n && /* @__PURE__ */ t(
-              y,
+              k,
               {
                 url: i,
-                onPreview: a,
-                onDownload: l,
+                onPreview: s,
+                onDownload: a,
                 onRemove: r
               }
             )
@@ -120,84 +189,84 @@ const N = p.forwardRef(
               type: "button",
               onClick: () => r(i),
               "aria-label": "Remove attachment",
-              children: /* @__PURE__ */ t(g, { className: "h-2.5 w-2.5" })
+              children: /* @__PURE__ */ t(z, { className: "h-2.5 w-2.5" })
             }
           ) : null
         ]
       }
     );
   }
-);
-N.displayName = "ImageFilePreview";
-const F = p.forwardRef(
-  ({ file: e, onRemove: r, onPreview: a, onDownload: l, showActionMenu: n = !1 }, c) => {
-    const [s, i] = p.useState(""), f = u(e) ? URL.createObjectURL(e) : e.url;
-    return T(() => {
-      if (u(e)) {
-        const m = new FileReader();
-        m.onload = (d) => {
-          d.target?.result && i(
-            typeof d.target.result == "string" ? d.target.result.slice(0, 100) : ""
-          );
-        }, m.readAsText(e);
-      } else
-        i("Anteprima non disponibile");
-    }, [e]), /* @__PURE__ */ o(
-      h.div,
-      {
-        ref: c,
-        className: "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-        layout: !0,
-        initial: { opacity: 0, y: "100%" },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: "100%" },
-        children: [
-          /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 items-center space-x-2", children: [
-            /* @__PURE__ */ t("div", { className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded rounded-sm border p-1 text-[8px]", children: s }),
-            /* @__PURE__ */ t(w, { text: e.name }),
-            n && /* @__PURE__ */ t(
-              y,
-              {
-                url: f,
-                onPreview: a,
-                onDownload: l,
-                onRemove: r
-              }
-            )
+), Q = f.forwardRef(({ file: e, onRemove: r, onPreview: s, onDownload: a, showActionMenu: n = !1 }, m) => {
+  const [p, i] = f.useState(""), l = d(e) ? URL.createObjectURL(e) : e.url, c = d(e) ? L(e.size) : "", u = j(e);
+  return E(() => {
+    if (d(e)) {
+      const b = new FileReader();
+      b.onload = (x) => {
+        x.target?.result && i(
+          typeof x.target.result == "string" ? x.target.result.slice(0, 100) : ""
+        );
+      }, b.readAsText(e);
+    } else
+      i("Anteprima non disponibile");
+  }, [e]), /* @__PURE__ */ o(
+    F.div,
+    {
+      ref: m,
+      className: "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
+      layout: !0,
+      initial: { opacity: 0, y: "100%" },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: "100%" },
+      children: [
+        /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 items-center space-x-2", children: [
+          /* @__PURE__ */ t("div", { className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded rounded-sm border p-1 text-[8px]", children: p }),
+          /* @__PURE__ */ o("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ t(I, { text: e.name }),
+            (c || u) && /* @__PURE__ */ o("div", { className: "text-d-secondary-foreground/70 mt-0.5 text-[10px] leading-3", children: [
+              c,
+              u ? c ? ` · ${u}` : u : ""
+            ] })
           ] }),
-          !n && r ? /* @__PURE__ */ t(
-            "button",
+          n && /* @__PURE__ */ t(
+            k,
             {
-              className: "bg-d-background border-d-border absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
-              type: "button",
-              onClick: () => r(f),
-              "aria-label": "Remove attachment",
-              children: /* @__PURE__ */ t(g, { className: "h-2.5 w-2.5" })
+              url: l,
+              onPreview: s,
+              onDownload: a,
+              onRemove: r
             }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-F.displayName = "TextFilePreview";
-const j = p.forwardRef(
+          )
+        ] }),
+        !n && r ? /* @__PURE__ */ t(
+          "button",
+          {
+            className: "bg-d-background border-d-border absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
+            type: "button",
+            onClick: () => r(l),
+            "aria-label": "Remove attachment",
+            children: /* @__PURE__ */ t(z, { className: "h-2.5 w-2.5" })
+          }
+        ) : null
+      ]
+    }
+  );
+}), Y = f.forwardRef(
   ({
     file: e,
     onRemove: r,
-    onPreview: a,
-    onDownload: l,
+    onPreview: s,
+    onDownload: a,
     showActionMenu: n = !1,
-    className: c
-  }, s) => {
-    const i = u(e) ? URL.createObjectURL(e) : e.url;
+    className: m
+  }, p) => {
+    const i = d(e) ? URL.createObjectURL(e) : e.url, l = T(e), c = C(l), u = U(e), { icon: b, colorClass: x } = H(c, u), w = d(e) ? L(e.size) : "", g = j(e);
     return /* @__PURE__ */ o(
-      h.div,
+      F.div,
       {
-        ref: s,
-        className: v(
+        ref: p,
+        className: N(
           "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-          c
+          m
         ),
         layout: !0,
         initial: { opacity: 0, y: "100%" },
@@ -205,14 +274,20 @@ const j = p.forwardRef(
         exit: { opacity: 0, y: "100%" },
         children: [
           /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 cursor-pointer items-center space-x-2", children: [
-            /* @__PURE__ */ t("div", { className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded-sm border", children: /* @__PURE__ */ t(S, { className: "h-5 w-5" }) }),
-            /* @__PURE__ */ t(w, { text: e.name }),
+            /* @__PURE__ */ t("div", { className: "bg-d-secondary grid h-10 w-10 shrink-0 place-items-center rounded-sm", children: /* @__PURE__ */ t(b, { className: N("h-5 w-5", x) }) }),
+            /* @__PURE__ */ o("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ t(I, { text: e.name }),
+              (w || g) && /* @__PURE__ */ o("div", { className: "text-d-secondary-foreground/70 mt-0.5 text-[10px] leading-3", children: [
+                w,
+                g ? w ? ` · ${g}` : g : ""
+              ] })
+            ] }),
             n && /* @__PURE__ */ t(
-              y,
+              k,
               {
                 url: i,
-                onPreview: a,
-                onDownload: l,
+                onPreview: s,
+                onDownload: a,
                 onRemove: r
               }
             )
@@ -224,7 +299,7 @@ const j = p.forwardRef(
               type: "button",
               onClick: () => r(i),
               "aria-label": "Remove attachment",
-              children: /* @__PURE__ */ t(g, { className: "h-2.5 w-2.5" })
+              children: /* @__PURE__ */ t(z, { className: "h-2.5 w-2.5" })
             }
           ) : null
         ]
@@ -232,8 +307,10 @@ const j = p.forwardRef(
     );
   }
 );
-j.displayName = "GenericFilePreview";
 export {
-  W as FilePreview,
-  w as default
+  be as FilePreview,
+  Y as GenericFilePreview,
+  J as ImageFilePreview,
+  Q as TextFilePreview,
+  I as default
 };

package/dist/components/ui/file-previewer.js

@@ -17,7 +17,7 @@ function C(e) {
   return d.safeAsk(f(e));
 }
 const H = () => {
-  const [{ payload: e }, { asking: t, cancel: i }] = D(), n = e?.url, a = s(() => e?.filename ? e?.filename : (e?.url || "").split(/[?#]/)[0].split("/").pop() || "" || "document", [e?.filename, e?.url]), o = s(() => {
+  const [{ payload: e }, { asking: t, ok: i }] = D(), n = e?.url, a = s(() => e?.filename ? e?.filename : (e?.url || "").split(/[?#]/)[0].split("/").pop() || "" || "document", [e?.filename, e?.url]), o = s(() => {
     if (!e?.url) return null;
     const l = new URL(e?.url), c = l.searchParams.get("response-content-type") || l.searchParams.get("content-type"), m = e?.mimeType || c || "";
     return y({