laif-ds 0.2.52 → 0.2.54

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

@@ -1,316 +1,263 @@
 "use client";
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-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) => {
+import { jsx as i, jsxs as a, Fragment as g } from "react/jsx-runtime";
+import { getExt as h, imageExts as P } from "../../lib/file-preview.js";
+import { motion as k } from "framer-motion";
+import c, { useEffect as j } from "react";
+import { AppTextTooltip as z } from "./app-tooltip.js";
+import { Button as L } from "./button.js";
+import { Command as A, CommandGroup as T, CommandItem as B } from "./command.js";
+import { Icon as p } from "./icon.js";
+import { Popover as I, PopoverTrigger as U, PopoverContent as E } from "./popover.js";
+import { cn as b } from "../../lib/utils.js";
+import l from "../../node_modules/lucide-react/dist/esm/icons/file-text.js";
+import F from "../../node_modules/lucide-react/dist/esm/icons/file-audio.js";
+import N from "../../node_modules/lucide-react/dist/esm/icons/file-video.js";
+import S from "../../node_modules/lucide-react/dist/esm/icons/file.js";
+import O from "../../node_modules/lucide-react/dist/esm/icons/file-spreadsheet.js";
+import R from "../../node_modules/lucide-react/dist/esm/icons/file-archive.js";
+import $ from "../../node_modules/lucide-react/dist/esm/icons/file-code.js";
+const u = (e) => "type" in e && typeof e.type == "string" && e instanceof File, d = (e) => e.name || "url" in e && e.url || "", v = (e) => {
+  if (u(e)) return e.type || "";
+  const t = e.type;
+  return typeof t == "string" ? t : "";
+}, W = (e, t) => {
+  const o = {
+    pdf: { icon: l, colorClass: "text-red-600" },
+    doc: { icon: l, colorClass: "text-blue-600" },
+    docx: { icon: l, colorClass: "text-blue-600" },
+    ppt: { icon: l, colorClass: "text-orange-600" },
+    pptx: { icon: l, colorClass: "text-orange-600" },
+    txt: { icon: l, colorClass: "text-gray-600" },
+    md: { icon: l, colorClass: "text-gray-600" }
+  }, r = (s, n) => s.forEach((m) => o[m] = n);
+  return r(["xls", "xlsx", "csv"], {
+    icon: O,
+    colorClass: "text-green-600"
+  }), r(["zip", "rar", "7z", "tar", "gz", "tgz"], {
+    icon: R,
+    colorClass: "text-amber-600"
+  }), r(["mp3", "wav", "ogg", "flac", "m4a"], {
+    icon: F,
+    colorClass: "text-violet-600"
+  }), r(["mp4", "mov", "avi", "mkv", "webm"], {
+    icon: N,
+    colorClass: "text-rose-600"
+  }), r(
+    [
+      "js",
+      "ts",
+      "jsx",
+      "tsx",
+      "json",
+      "xml",
+      "yml",
+      "yaml",
+      "html",
+      "css",
+      "scss"
+    ],
+    {
+      icon: $,
+      colorClass: "text-indigo-600"
+    }
+  ), e && o[e] ? o[e] : t?.startsWith("audio/") ? { icon: F, colorClass: "text-violet-600" } : t?.startsWith("video/") ? { icon: N, colorClass: "text-rose-600" } : t?.startsWith("text/") ? { icon: l, colorClass: "text-gray-600" } : { icon: S, colorClass: "text-d-secondary-foreground" };
+}, _ = (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 = ({
+  if (e === 0) return "0B";
+  const t = ["B", "KB", "MB", "GB", "TB"], o = Math.min(
+    Math.floor(Math.log(e) / Math.log(1024)),
+    t.length - 1
+  ), r = e / 1024 ** o, s = o > 0 && r < 100 ? 2 : 0;
+  return `${r.toFixed(s)}${t[o]}`;
+}, G = (e) => {
+  const t = u(e) ? _(e.size) : "", o = V(e);
+  return { sizeLabel: t, formatLabel: o };
+}, D = (e, t) => e && t ? `${e} · ${t}` : e || t || null, K = {
+  layout: !0,
+  initial: { opacity: 0, y: "100%" },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: "100%" }
+}, y = ({
+  sizeLabel: e,
+  formatLabel: t
+}) => {
+  const o = D(e, t);
+  return o ? /* @__PURE__ */ i("div", { className: "text-d-secondary-foreground/70 text-xs", children: o }) : null;
+}, V = (e) => {
+  const t = h(d(e));
+  if (t) return t.toUpperCase();
+  const o = v(e);
+  if (!o) return "";
+  if (o === "application/pdf") return "PDF";
+  const [r, s] = o.split("/");
+  return r === "image" ? s?.toUpperCase() || "IMAGE" : r === "audio" || r === "video" || r === "text" ? r.toUpperCase() : /(officedocument|msword|ms-excel|ms-powerpoint)/.test(o) ? "OFFICE" : "";
+}, X = ({
   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" })
-    ] }),
-    s && /* @__PURE__ */ o(v, { onSelect: () => s(e), children: [
-      /* @__PURE__ */ t(y, { name: "Download", size: "sm" }),
-      /* @__PURE__ */ t("span", { children: "Download" })
-    ] }),
-    a && /* @__PURE__ */ o(
-      v,
+  onPreview: t,
+  onDownload: o,
+  onRemove: r
+}) => /* @__PURE__ */ a(I, { children: [
+  /* @__PURE__ */ i(U, { asChild: !0, children: /* @__PURE__ */ i(L, { variant: "ghost", size: "icon", children: /* @__PURE__ */ i(p, { name: "Menu", size: "sm" }) }) }),
+  /* @__PURE__ */ i(E, { className: "w-42 p-0", align: "end", children: /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i(T, { children: [
+    {
+      key: "preview",
+      cond: !!t,
+      icon: "Presentation",
+      label: "Anteprima",
+      onSelect: t
+    },
+    {
+      key: "download",
+      cond: !!o,
+      icon: "Download",
+      label: "Download",
+      onSelect: o
+    },
+    {
+      key: "remove",
+      cond: !!r,
+      icon: "Trash",
+      label: "Elimina",
+      onSelect: r,
+      danger: !0
+    }
+  ].map(
+    (n) => n.cond && /* @__PURE__ */ a(
+      B,
       {
-        onSelect: () => a(e),
-        className: "text-red-500",
+        onSelect: () => n.onSelect?.(e),
+        className: n.danger ? "text-d-destructive" : void 0,
         children: [
-          /* @__PURE__ */ t(y, { name: "Trash", className: "text-red-500", size: "sm" }),
-          /* @__PURE__ */ t("span", { children: "Elimina" })
+          /* @__PURE__ */ i(
+            p,
+            {
+              name: n.icon,
+              size: "sm",
+              className: n.danger ? "text-d-destructive" : void 0
+            }
+          ),
+          /* @__PURE__ */ i("span", { children: n.label })
         ]
-      }
+      },
+      n.key
     )
-  ] }) }) })
-] });
-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 be = f.forwardRef(
-  (e, 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 });
+  ) }) }) })
+] }), xe = c.forwardRef(
+  (e, t) => {
+    const o = d(e.file), r = h(o), s = v(e.file), n = r === "csv" || s === "text/csv";
+    return s && s.startsWith("image/") || r && P.has(r) ? /* @__PURE__ */ i(q, { ...e, ref: t }) : !n && (r === "txt" || r === "md" || s && s.startsWith("text/")) ? /* @__PURE__ */ i(H, { ...e, ref: t }) : /* @__PURE__ */ i(J, { ...e, ref: t });
   }
-), J = f.forwardRef(
+), C = c.forwardRef(
   ({
     file: e,
-    onRemove: r,
-    onPreview: s,
-    onDownload: a,
-    showActionMenu: n = !1,
-    className: m
-  }, p) => {
-    const i = d(e) ? URL.createObjectURL(e) : e.url, l = d(e) ? L(e.size) : "", c = j(e);
-    return /* @__PURE__ */ o(
-      F.div,
+    onRemove: t,
+    onPreview: o,
+    onDownload: r,
+    showActionMenu: s = !1,
+    className: n,
+    defaultClassName: m,
+    children: w
+  }, f) => {
+    const x = u(e) ? URL.createObjectURL(e) : e.url, M = G(e);
+    return /* @__PURE__ */ a(
+      k.div,
       {
-        ref: p,
-        className: N(
-          "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-          m
+        ref: f,
+        className: b(
+          "border-d-border relative flex items-center rounded-md border text-xs",
+          m,
+          n
         ),
-        layout: !0,
-        initial: { opacity: 0, y: "100%" },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: "100%" },
+        ...K,
         children: [
-          /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 items-center space-x-2", children: [
-            /* @__PURE__ */ t(
-              "img",
-              {
-                alt: `Attachment ${e.name}`,
-                className: "bg-d-secondary border-d-border grid h-10 w-10 shrink-0 place-items-center rounded-sm border object-cover",
-                src: i
-              }
-            ),
-            /* @__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(
-              k,
+          /* @__PURE__ */ a("div", { className: "flex w-full min-w-0 items-center gap-2", children: [
+            w(x, M),
+            s && /* @__PURE__ */ i(
+              X,
               {
-                url: i,
-                onPreview: s,
-                onDownload: a,
-                onRemove: r
+                url: x,
+                onPreview: o,
+                onDownload: r,
+                onRemove: t
               }
             )
           ] }),
-          !n && r ? /* @__PURE__ */ t(
-            "button",
+          !s && t ? /* @__PURE__ */ i(
+            L,
             {
-              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(i),
-              "aria-label": "Remove attachment",
-              children: /* @__PURE__ */ t(z, { className: "h-2.5 w-2.5" })
+              className: "bg-d-background hover:bg-d-background absolute -top-2 -right-2 flex !size-3.5 rounded-full text-xs",
+              variant: "outline",
+              size: "icon",
+              onClick: () => t(x),
+              children: /* @__PURE__ */ i(p, { name: "X", className: "h-2.5 max-w-2.5" })
             }
           ) : null
         ]
       }
     );
   }
-), 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,
+), q = c.forwardRef((e, t) => /* @__PURE__ */ i(C, { ...e, ref: t, defaultClassName: "gap-2 p-1.5 pr-2", children: (o, r) => /* @__PURE__ */ a(g, { children: [
+  /* @__PURE__ */ i(
+    "img",
     {
-      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 && /* @__PURE__ */ t(
-            k,
-            {
-              url: l,
-              onPreview: s,
-              onDownload: a,
-              onRemove: r
-            }
-          )
-        ] }),
-        !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
-      ]
+      alt: `Attachment ${d(e.file)}`,
+      className: b(
+        "bg-d-secondary border-d-border h-10 w-10 shrink-0 rounded-sm border object-cover"
+      ),
+      src: o
     }
-  );
-}), Y = f.forwardRef(
-  ({
-    file: e,
-    onRemove: r,
-    onPreview: s,
-    onDownload: a,
-    showActionMenu: n = !1,
-    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(
-      F.div,
+  ),
+  /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+    /* @__PURE__ */ i(z, { text: d(e.file) }),
+    /* @__PURE__ */ i(
+      y,
       {
-        ref: p,
-        className: N(
-          "border-d-border relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
-          m
-        ),
-        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 cursor-pointer items-center space-x-2", children: [
-            /* @__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(
-              k,
-              {
-                url: i,
-                onPreview: s,
-                onDownload: a,
-                onRemove: r
-              }
-            )
-          ] }),
-          !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(i),
-              "aria-label": "Remove attachment",
-              children: /* @__PURE__ */ t(z, { className: "h-2.5 w-2.5" })
-            }
-          ) : null
-        ]
+        sizeLabel: r.sizeLabel,
+        formatLabel: r.formatLabel
       }
-    );
-  }
-);
+    )
+  ] })
+] }) })), H = c.forwardRef((e, t) => {
+  const [o, r] = c.useState("");
+  return j(() => {
+    if (u(e.file)) {
+      const s = new FileReader();
+      s.onload = (n) => {
+        n.target?.result && r(
+          typeof n.target.result == "string" ? n.target.result.slice(0, 100) : ""
+        );
+      }, s.readAsText(e.file);
+    } else
+      r("Anteprima non disponibile");
+  }, [e.file]), /* @__PURE__ */ i(C, { ...e, ref: t, defaultClassName: "gap-2 p-1.5 pr-2", children: (s, n) => /* @__PURE__ */ a(g, { children: [
+    /* @__PURE__ */ i("div", { className: "bg-d-secondary border-d-border flex h-10 w-10 shrink-0 items-center justify-center rounded-sm border p-1 text-[8px]", children: o }),
+    /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ i(
+      y,
+      {
+        sizeLabel: n.sizeLabel,
+        formatLabel: n.formatLabel
+      }
+    ) })
+  ] }) });
+}), J = c.forwardRef((e, t) => {
+  const o = d(e.file), r = h(o), s = v(e.file), { icon: n, colorClass: m } = W(r, s);
+  return /* @__PURE__ */ i(C, { ...e, ref: t, defaultClassName: "gap-2 p-1.5 pr-2", children: (w, f) => /* @__PURE__ */ a(g, { children: [
+    /* @__PURE__ */ i("div", { className: "bg-d-secondary flex h-10 w-10 shrink-0 items-center justify-center rounded-sm", children: /* @__PURE__ */ i(n, { className: b("h-5 w-5", m) }) }),
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ i(z, { text: o }),
+      /* @__PURE__ */ i(
+        y,
+        {
+          sizeLabel: f.sizeLabel,
+          formatLabel: f.formatLabel
+        }
+      )
+    ] })
+  ] }) });
+});
 export {
-  be as FilePreview,
-  Y as GenericFilePreview,
-  J as ImageFilePreview,
-  Q as TextFilePreview,
-  I as default
+  xe as FilePreview,
+  J as GenericFilePreview,
+  q as ImageFilePreview,
+  H as TextFilePreview
 };