@linktr.ee/messaging-react 4.2.1 → 4.3.0-rc-1787410254

package/dist/Card-3VtiPkQH.js

@@ -1,701 +0,0 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { PlayIcon as B, LockOpenIcon as F, LockSimpleIcon as V, CaretLeftIcon as H, CaretRightIcon as J, ImagesIcon as Q, DownloadSimpleIcon as R, XIcon as W, PencilSimpleIcon as Y } from "@phosphor-icons/react";
-import P, { useState as y, useRef as z, useCallback as T, useEffect as Z } from "react";
-import g from "classnames";
-import { r as A, g as L, o as G, A as O } from "./index-wG3iH9e6.js";
-import { L as ee, P as _ } from "./PurchaseStatusBadge-D1RRsubZ.js";
-const U = ({
-  variant: t,
-  title: a,
-  placeholderTitle: n = "Attachment title",
-  mimeType: r,
-  detail: i,
-  statusBadge: s,
-  action: c,
-  icon: u,
-  trailingAction: d
-}) => {
-  const l = t === "dark", o = a || n, f = !a, m = u ?? A(r, {
-    className: g(
-      "size-5 shrink-0",
-      l ? "text-white/55" : "text-black/55"
-    ),
-    weight: "regular"
-  });
-  return /* @__PURE__ */ h("div", { className: "px-4 py-3", children: [
-    /* @__PURE__ */ h("div", { className: "flex items-end gap-3", children: [
-      /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-        o.trim() !== "" && /* @__PURE__ */ e(
-          "p",
-          {
-            className: g(
-              "truncate text-base font-medium leading-6",
-              {
-                "text-black/90": !l && !f,
-                "text-black/30": !l && f,
-                "text-white/30": l && f,
-                "text-white": l && !f
-              }
-            ),
-            children: o
-          }
-        ),
-        /* @__PURE__ */ h("div", { className: "flex flex-wrap items-center gap-1", children: [
-          m,
-          i != null && i !== "" && /* @__PURE__ */ e(
-            "span",
-            {
-              className: g(
-                "text-xs font-medium",
-                l ? "text-white/55" : "text-black/55"
-              ),
-              children: i
-            }
-          ),
-          s
-        ] })
-      ] }),
-      d && /* @__PURE__ */ e("div", { className: "shrink-0", children: d })
-    ] }),
-    c
-  ] });
-}, E = ({
-  paymentStatus: t,
-  mimeType: a,
-  isPlayable: n,
-  isLocked: r
-}) => {
-  const i = a ? L(a) : void 0, c = (n ?? (i === "video" || i === "audio")) && !r ? B : t === "paid" ? F : V;
-  return /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(
-    "div",
-    {
-      className: g(
-        "flex size-12 items-center justify-center rounded-full bg-black/30 text-white",
-        c === B && "group-hover:bg-black/40"
-      ),
-      children: /* @__PURE__ */ e(c, { className: "size-6", weight: "fill" })
-    }
-  ) });
-};
-function te(t) {
-  const a = L(t.mimeType);
-  return a === "video" || a === "audio";
-}
-const ae = ({
-  variant: t,
-  gallery: a,
-  title: n,
-  showLocked: r,
-  paymentStatus: i,
-  topRight: s
-}) => {
-  const [c, u] = y(0), d = a.length, l = Math.min(c, d - 1), o = a[l], f = te(o), m = G(
-    o.thumbnailUrl
-  ), x = (N) => {
-    N.stopPropagation(), u((k) => Math.max(0, k - 1));
-  }, p = (N) => {
-    N.stopPropagation(), u((k) => Math.min(d - 1, k + 1));
-  }, b = l === 0, w = l === d - 1, v = t === "dark";
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: g(
-        "group relative overflow-hidden rounded-t-md",
-        r ? "aspect-[337/386]" : void 0
-      ),
-      children: [
-        r ? /* @__PURE__ */ e(
-          "div",
-          {
-            className: g(
-              "absolute inset-0",
-              v ? "bg-white/10" : "bg-black/5"
-            ),
-            children: o.thumbnailUrl && /* @__PURE__ */ e(
-              "img",
-              {
-                src: m ?? o.thumbnailUrl,
-                alt: "",
-                "aria-hidden": !0,
-                draggable: !1,
-                className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ e(
-          O,
-          {
-            mimeType: o.mimeType,
-            sourceUrl: o.sourceUrl,
-            thumbnailUrl: o.thumbnailUrl,
-            title: n,
-            variant: t,
-            mediaPlayerProps: { autoPlay: !0 }
-          },
-          l
-        ),
-        r && /* @__PURE__ */ e(
-          E,
-          {
-            paymentStatus: i,
-            isPlayable: f,
-            isLocked: r
-          }
-        ),
-        d > 1 && /* @__PURE__ */ h(P.Fragment, { children: [
-          /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: x,
-              disabled: b,
-              "aria-label": "Previous item",
-              className: g(
-                "absolute left-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
-                b ? "opacity-40" : "hover:bg-black/40"
-              ),
-              children: /* @__PURE__ */ e(H, { className: "size-5", weight: "bold" })
-            }
-          ),
-          /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: p,
-              disabled: w,
-              "aria-label": "Next item",
-              className: g(
-                "absolute right-3 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded-full bg-black/30 text-white transition-opacity",
-                w ? "opacity-40" : "hover:bg-black/40"
-              ),
-              children: /* @__PURE__ */ e(J, { className: "size-5", weight: "bold" })
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: "pointer-events-none absolute bottom-10 left-1/2 flex size-8 -translate-x-1/2 items-center justify-center rounded-full bg-black/30", children: /* @__PURE__ */ h("span", { className: "text-xs font-medium leading-none text-white", children: [
-            l + 1,
-            "/",
-            d
-          ] }) })
-        ] }),
-        s && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: s })
-      ]
-    }
-  );
-}, ie = ({
-  variant: t,
-  mimeType: a,
-  thumbnailUrl: n,
-  title: r,
-  source: i,
-  showLocked: s,
-  paymentStatus: c,
-  topRight: u,
-  containedImage: d = !1
-}) => {
-  const l = s || i == null ? void 0 : i.sourceUrl, o = s ? n : (i == null ? void 0 : i.thumbnailUrl) ?? n, f = G(
-    o
-  ), m = t === "dark";
-  return /* @__PURE__ */ h("div", { className: "relative overflow-hidden rounded-t-md", children: [
-    s ? /* @__PURE__ */ h(
-      "div",
-      {
-        className: g(
-          "relative aspect-video overflow-hidden",
-          m ? "bg-white/10" : "bg-black/5"
-        ),
-        children: [
-          o ? /* @__PURE__ */ e(
-            "img",
-            {
-              src: f ?? o,
-              alt: "",
-              "aria-hidden": !0,
-              draggable: !1,
-              className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
-            }
-          ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: A(a, {
-            className: m ? "size-12 text-white/20" : "size-12 text-black/20",
-            weight: "regular"
-          }) }),
-          /* @__PURE__ */ e(
-            E,
-            {
-              paymentStatus: c,
-              mimeType: a,
-              isLocked: s
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ e(
-      O,
-      {
-        mimeType: a,
-        sourceUrl: l,
-        thumbnailUrl: o,
-        title: r,
-        variant: t,
-        containedImage: d,
-        mediaPlayerProps: l ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
-      }
-    ),
-    u && /* @__PURE__ */ e("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: u })
-  ] });
-}, I = (t) => t.length >= 2, j = (t) => /* @__PURE__ */ e(
-  Q,
-  {
-    className: t === "dark" ? "size-5 shrink-0 text-white/55" : "size-5 shrink-0 text-black/55"
-  }
-), D = ({
-  variant: t,
-  gallery: a,
-  title: n,
-  showLocked: r,
-  paymentStatus: i,
-  mimeType: s,
-  thumbnailUrl: c,
-  source: u,
-  containedImage: d,
-  topRight: l
-}) => I(a) ? /* @__PURE__ */ e(
-  ae,
-  {
-    variant: t,
-    gallery: a,
-    title: n,
-    showLocked: r,
-    paymentStatus: i,
-    topRight: l
-  }
-) : /* @__PURE__ */ e(
-  ie,
-  {
-    variant: t,
-    mimeType: s,
-    thumbnailUrl: c,
-    title: n,
-    source: u,
-    showLocked: r,
-    paymentStatus: i,
-    topRight: l,
-    containedImage: d
-  }
-), M = ({
-  variant: t,
-  children: a,
-  rootRef: n,
-  "data-testid": r
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: n,
-    "data-testid": r,
-    className: g(
-      "relative w-[280px] select-none overflow-hidden rounded-md",
-      t === "dark" ? "bg-[#1e2330]" : "bg-white",
-      "shadow-[0_1px_2px_rgba(0,0,0,0.08)]"
-    ),
-    children: a
-  }
-), S = ({
-  onToggle: t,
-  isBusy: a,
-  isPreviewVisible: n,
-  children: r
-}) => t ? /* @__PURE__ */ e(
-  "div",
-  {
-    role: "button",
-    tabIndex: a ? -1 : 0,
-    "aria-label": "Toggle preview",
-    "aria-busy": a,
-    "aria-pressed": n,
-    "aria-disabled": a || void 0,
-    onClick: a ? void 0 : t,
-    onKeyDown: (i) => {
-      a || i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), t());
-    },
-    className: a ? "block w-full text-left" : "block w-full cursor-pointer text-left",
-    children: r
-  }
-) : /* @__PURE__ */ e(P.Fragment, { children: r });
-function K({
-  isGallery: t,
-  onFetchSource: a,
-  onPreviewClick: n
-}) {
-  const [r, i] = y(), [s, c] = y(!1), [u, d] = y(!1), l = z(!1), o = T(async () => {
-    if (n == null || n(), s) {
-      c(!1);
-      return;
-    }
-    if (t) {
-      c(!0);
-      return;
-    }
-    if (r) {
-      c(!0);
-      return;
-    }
-    if (a && !l.current) {
-      l.current = !0, d(!0);
-      try {
-        const m = await a();
-        m && (i(m), c(!0));
-      } finally {
-        l.current = !1, d(!1);
-      }
-    }
-  }, [s, t, r, n, a]), f = t || a != null || n != null ? o : void 0;
-  return {
-    source: r,
-    isPreviewVisible: s,
-    isLoadingPreview: u,
-    handleToggle: o,
-    togglePreview: f
-  };
-}
-function re({
-  paymentStatus: t,
-  onFetchSource: a,
-  onUnlockClick: n
-}) {
-  const [r, i] = y(), s = z(null), c = z(!1), u = z(a);
-  u.current = a;
-  const d = T(async () => {
-    var o;
-    if (!c.current) {
-      c.current = !0;
-      try {
-        const f = await ((o = u.current) == null ? void 0 : o.call(u));
-        f && i(f);
-      } finally {
-        c.current = !1;
-      }
-    }
-  }, []), l = T(() => {
-    t === "paid" ? d() : n == null || n();
-  }, [t, d, n]);
-  return Z(() => {
-    if (!s.current || t !== "paid" || r !== void 0) return;
-    const o = new IntersectionObserver(
-      ([f]) => {
-        f.isIntersecting && (d(), o.disconnect());
-      },
-      { threshold: 1 }
-    );
-    return o.observe(s.current), () => o.disconnect();
-  }, [t, r, d]), { source: r, cardRef: s, handleUnlockClick: l };
-}
-const C = "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928]", ne = ({
-  isLocked: t,
-  sourceUrl: a,
-  redeemUrl: n,
-  onUnlockClicked: r,
-  onDownloadClicked: i,
-  isUnlocking: s = !1
-}) => {
-  if (t && r != null)
-    return /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: r,
-        disabled: s,
-        "aria-label": s ? "Unlocking" : "Unlock",
-        "aria-busy": s,
-        title: s ? "Unlocking" : "Unlock",
-        className: C,
-        children: s ? /* @__PURE__ */ e(ee, {}) : /* @__PURE__ */ h(P.Fragment, { children: [
-          /* @__PURE__ */ e(V, { className: "size-4", weight: "fill" }),
-          "Unlock"
-        ] })
-      }
-    );
-  if (!t && i != null) {
-    const c = n ?? a;
-    return c != null ? /* @__PURE__ */ h(
-      "a",
-      {
-        href: c,
-        "aria-label": "Download",
-        target: "_blank",
-        rel: "noopener noreferrer",
-        onClick: i,
-        className: `${C} !text-white`,
-        children: [
-          /* @__PURE__ */ e(R, { className: "size-4", weight: "bold" }),
-          "Download"
-        ]
-      }
-    ) : /* @__PURE__ */ h(
-      "button",
-      {
-        type: "button",
-        onClick: i,
-        "aria-label": "Download",
-        className: C,
-        children: [
-          /* @__PURE__ */ e(R, { className: "size-4", weight: "bold" }),
-          "Download"
-        ]
-      }
-    );
-  }
-  return null;
-}, se = ({
-  title: t,
-  mimeType: a = "application/octet-stream",
-  thumbnailUrl: n,
-  detail: r,
-  amountText: i,
-  placeholderTitle: s,
-  placeholderAmountText: c,
-  gallery: u = [],
-  onDismiss: d,
-  onPreviewClick: l,
-  onFetchSource: o,
-  onEditClick: f
-}) => {
-  const m = I(u), { source: x, isPreviewVisible: p, isLoadingPreview: b, togglePreview: w } = K({ isGallery: m, onFetchSource: o, onPreviewClick: l }), v = !p, N = b, k = /* @__PURE__ */ h(P.Fragment, { children: [
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: i ? "text-xs font-medium text-white/55" : "text-xs font-medium text-white/30",
-        children: i || c
-      }
-    )
-  ] }), X = d ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: (q) => {
-        q.stopPropagation(), d();
-      },
-      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
-      "aria-label": "Dismiss attachment",
-      children: /* @__PURE__ */ e(W, { className: "size-3", weight: "bold" })
-    }
-  ) : void 0, $ = f ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: f,
-      "aria-label": "Edit attachment",
-      className: "flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
-      children: /* @__PURE__ */ e(Y, { className: "size-5", weight: "regular" })
-    }
-  ) : void 0;
-  return /* @__PURE__ */ h(M, { variant: "dark", children: [
-    /* @__PURE__ */ e(
-      S,
-      {
-        onToggle: w,
-        isBusy: N,
-        isPreviewVisible: !v,
-        children: /* @__PURE__ */ e(
-          D,
-          {
-            variant: "dark",
-            gallery: u,
-            title: t,
-            showLocked: v,
-            mimeType: a,
-            thumbnailUrl: n,
-            source: x,
-            topRight: X
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(
-      U,
-      {
-        variant: "dark",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: k,
-        icon: m ? j("dark") : void 0,
-        trailingAction: $
-      }
-    )
-  ] });
-}, le = ({
-  title: t,
-  mimeType: a = "application/octet-stream",
-  thumbnailUrl: n,
-  detail: r,
-  amountText: i,
-  placeholderTitle: s,
-  placeholderAmountText: c,
-  gallery: u = []
-}) => {
-  const d = I(u), l = /* @__PURE__ */ h(P.Fragment, { children: [
-    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-black/55", children: "•" }),
-    /* @__PURE__ */ e(
-      "span",
-      {
-        className: i ? "text-xs font-medium text-black/55" : "text-xs font-medium text-black/30",
-        children: i || c
-      }
-    )
-  ] });
-  return /* @__PURE__ */ h(M, { variant: "light", children: [
-    /* @__PURE__ */ e(
-      D,
-      {
-        variant: "light",
-        gallery: u,
-        title: t,
-        showLocked: !0,
-        mimeType: a,
-        thumbnailUrl: n
-      }
-    ),
-    /* @__PURE__ */ e(
-      U,
-      {
-        variant: "light",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: l,
-        icon: d ? j("light") : void 0
-      }
-    )
-  ] });
-}, oe = ({
-  title: t,
-  mimeType: a = "application/octet-stream",
-  thumbnailUrl: n,
-  detail: r,
-  amountText: i,
-  placeholderTitle: s,
-  paymentStatus: c = "pending",
-  gallery: u = [],
-  onPreviewClick: d,
-  onFetchSource: l
-}) => {
-  const o = I(u), { source: f, isPreviewVisible: m, isLoadingPreview: x, togglePreview: p } = K({ isGallery: o, onFetchSource: l, onPreviewClick: d }), b = !m;
-  return /* @__PURE__ */ h(M, { variant: "dark", children: [
-    /* @__PURE__ */ e(
-      S,
-      {
-        onToggle: p,
-        isBusy: x,
-        isPreviewVisible: !b,
-        children: /* @__PURE__ */ e(
-          D,
-          {
-            variant: "dark",
-            gallery: u,
-            title: t,
-            showLocked: b,
-            paymentStatus: c,
-            mimeType: a,
-            thumbnailUrl: n,
-            source: f
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(
-      U,
-      {
-        variant: "dark",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: /* @__PURE__ */ e(
-          _,
-          {
-            isMine: !0,
-            paymentStatus: c,
-            amountText: i
-          }
-        ),
-        icon: o ? j("dark") : void 0
-      }
-    )
-  ] });
-}, ce = ({
-  title: t,
-  amountText: a,
-  thumbnailUrl: n,
-  mimeType: r = "application/octet-stream",
-  detail: i,
-  gallery: s = [],
-  onUnlockClick: c,
-  onFetchSource: u,
-  onDownloadClick: d,
-  paymentStatus: l,
-  isUnlocking: o = !1
-}) => {
-  const f = I(s), { source: m, cardRef: x, handleUnlockClick: p } = re({
-    paymentStatus: l,
-    onFetchSource: u,
-    onUnlockClick: c
-  }), b = m == null ? void 0 : m.sourceUrl, w = m == null ? void 0 : m.redeemUrl, v = f ? l !== "paid" : b === void 0, N = L(r), k = f ? void 0 : b;
-  return /* @__PURE__ */ h(
-    M,
-    {
-      variant: "light",
-      rootRef: x,
-      "data-testid": "locked-attachment",
-      children: [
-        /* @__PURE__ */ e(
-          D,
-          {
-            variant: "light",
-            gallery: s,
-            title: t,
-            showLocked: v,
-            paymentStatus: l,
-            mimeType: r,
-            thumbnailUrl: n,
-            source: m,
-            containedImage: !v && N === "document"
-          }
-        ),
-        /* @__PURE__ */ e(
-          U,
-          {
-            variant: "light",
-            title: t,
-            mimeType: r,
-            detail: i,
-            statusBadge: /* @__PURE__ */ e(
-              _,
-              {
-                isMine: !1,
-                paymentStatus: l,
-                amountText: a
-              }
-            ),
-            icon: f ? j("light") : void 0,
-            action: /* @__PURE__ */ e(
-              ne,
-              {
-                isLocked: v,
-                isUnlocking: o,
-                sourceUrl: k,
-                redeemUrl: w,
-                onUnlockClicked: p,
-                onDownloadClicked: d
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, ge = (t) => t.isDraft ? /* @__PURE__ */ e(se, { ...t }) : t.isPreview ? /* @__PURE__ */ e(le, { ...t }) : t.isMine ? /* @__PURE__ */ e(oe, { ...t }) : /* @__PURE__ */ e(ce, { ...t });
-export {
-  ge as default
-};
-//# sourceMappingURL=Card-3VtiPkQH.js.map