@linktr.ee/messaging-react 3.10.0-rc-1783660962 → 3.10.0

package/dist/Card-V5d6qhDT.js

@@ -1,694 +0,0 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { PlayIcon as B, LockOpenIcon as q, LockSimpleIcon as V, CaretLeftIcon as F, CaretRightIcon as H, ImagesIcon as J, DownloadSimpleIcon as R, XIcon as Q, PencilSimpleIcon as W } from "@phosphor-icons/react";
-import y, { useState as k, useRef as I, useCallback as L, useEffect as Y } from "react";
-import v from "classnames";
-import { r as A, g as T, A as G } from "./index-DFZrAiLB.js";
-import { L as Z, P as O } from "./LoadingDots-Ct3WmVlT.js";
-const z = ({
-  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: v(
-      "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: v("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: v(
-                "text-xs font-medium",
-                l ? "text-white/55" : "text-black/55"
-              ),
-              children: i
-            }
-          ),
-          s
-        ] })
-      ] }),
-      d && /* @__PURE__ */ e("div", { className: "shrink-0", children: d })
-    ] }),
-    c
-  ] });
-}, _ = ({
-  paymentStatus: t,
-  mimeType: a,
-  isPlayable: n,
-  isLocked: r
-}) => {
-  const i = a ? T(a) : void 0, c = (n ?? (i === "video" || i === "audio")) && !r ? B : t === "paid" ? q : V;
-  return /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(
-    "div",
-    {
-      className: v(
-        "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 ee(t) {
-  const a = T(t.mimeType);
-  return a === "video" || a === "audio";
-}
-const te = ({
-  variant: t,
-  gallery: a,
-  title: n,
-  showLocked: r,
-  paymentStatus: i,
-  topRight: s
-}) => {
-  const [c, u] = k(0), d = a.length, l = Math.min(c, d - 1), o = a[l], f = ee(o), m = (g) => {
-    g.stopPropagation(), u((p) => Math.max(0, p - 1));
-  }, w = (g) => {
-    g.stopPropagation(), u((p) => Math.min(d - 1, p + 1));
-  }, x = l === 0, b = l === d - 1, N = t === "dark";
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: v(
-        "group relative overflow-hidden rounded-t-md",
-        r ? "aspect-[337/386]" : void 0
-      ),
-      children: [
-        r ? /* @__PURE__ */ e(
-          "div",
-          {
-            className: v(
-              "absolute inset-0",
-              N ? "bg-white/10" : "bg-black/5"
-            ),
-            children: o.thumbnailUrl && /* @__PURE__ */ e(
-              "img",
-              {
-                src: o.thumbnailUrl,
-                alt: "",
-                "aria-hidden": !0,
-                draggable: !1,
-                className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
-              }
-            )
-          }
-        ) : /* @__PURE__ */ e(
-          G,
-          {
-            mimeType: o.mimeType,
-            sourceUrl: o.sourceUrl,
-            thumbnailUrl: o.thumbnailUrl,
-            title: n,
-            variant: t,
-            mediaPlayerProps: { autoPlay: !0 }
-          },
-          l
-        ),
-        r && /* @__PURE__ */ e(
-          _,
-          {
-            paymentStatus: i,
-            isPlayable: f,
-            isLocked: r
-          }
-        ),
-        d > 1 && /* @__PURE__ */ h(y.Fragment, { children: [
-          /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: m,
-              disabled: x,
-              "aria-label": "Previous item",
-              className: v(
-                "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",
-                x ? "opacity-40" : "hover:bg-black/40"
-              ),
-              children: /* @__PURE__ */ e(F, { className: "size-5", weight: "bold" })
-            }
-          ),
-          /* @__PURE__ */ e(
-            "button",
-            {
-              type: "button",
-              onClick: w,
-              disabled: b,
-              "aria-label": "Next item",
-              className: v(
-                "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",
-                b ? "opacity-40" : "hover:bg-black/40"
-              ),
-              children: /* @__PURE__ */ e(H, { 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 })
-      ]
-    }
-  );
-}, ae = ({
-  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 = t === "dark";
-  return /* @__PURE__ */ h("div", { className: "relative overflow-hidden rounded-t-md", children: [
-    s ? /* @__PURE__ */ h(
-      "div",
-      {
-        className: v(
-          "relative aspect-video overflow-hidden",
-          f ? "bg-white/10" : "bg-black/5"
-        ),
-        children: [
-          o ? /* @__PURE__ */ e(
-            "img",
-            {
-              src: 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: f ? "size-12 text-white/20" : "size-12 text-black/20",
-            weight: "regular"
-          }) }),
-          /* @__PURE__ */ e(
-            _,
-            {
-              paymentStatus: c,
-              mimeType: a,
-              isLocked: s
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ e(
-      G,
-      {
-        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 })
-  ] });
-}, P = (t) => t.length >= 2, U = (t) => /* @__PURE__ */ e(
-  J,
-  {
-    className: t === "dark" ? "size-5 shrink-0 text-white/55" : "size-5 shrink-0 text-black/55"
-  }
-), j = ({
-  variant: t,
-  gallery: a,
-  title: n,
-  showLocked: r,
-  paymentStatus: i,
-  mimeType: s,
-  thumbnailUrl: c,
-  source: u,
-  containedImage: d,
-  topRight: l
-}) => P(a) ? /* @__PURE__ */ e(
-  te,
-  {
-    variant: t,
-    gallery: a,
-    title: n,
-    showLocked: r,
-    paymentStatus: i,
-    topRight: l
-  }
-) : /* @__PURE__ */ e(
-  ae,
-  {
-    variant: t,
-    mimeType: s,
-    thumbnailUrl: c,
-    title: n,
-    source: u,
-    showLocked: r,
-    paymentStatus: i,
-    topRight: l,
-    containedImage: d
-  }
-), D = ({
-  variant: t,
-  children: a,
-  rootRef: n,
-  "data-testid": r
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    ref: n,
-    "data-testid": r,
-    className: v(
-      "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
-  }
-), E = ({
-  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(y.Fragment, { children: r });
-function S({
-  isGallery: t,
-  onFetchSource: a,
-  onPreviewClick: n
-}) {
-  const [r, i] = k(), [s, c] = k(!1), [u, d] = k(!1), l = I(!1), o = L(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 ie({
-  paymentStatus: t,
-  onFetchSource: a,
-  onUnlockClick: n
-}) {
-  const [r, i] = k(), s = I(null), c = I(!1), u = I(a);
-  u.current = a;
-  const d = L(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 = L(() => {
-    t === "paid" ? d() : n == null || n();
-  }, [t, d, n]);
-  return Y(() => {
-    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]", re = ({
-  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(Z, {}) : /* @__PURE__ */ h(y.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;
-}, ne = ({
-  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 = P(u), { source: w, isPreviewVisible: x, isLoadingPreview: b, togglePreview: N } = S({ isGallery: m, onFetchSource: o, onPreviewClick: l }), g = !x, p = b, M = /* @__PURE__ */ h(y.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
-      }
-    )
-  ] }), K = d ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: ($) => {
-        $.stopPropagation(), d();
-      },
-      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
-      "aria-label": "Dismiss attachment",
-      children: /* @__PURE__ */ e(Q, { className: "size-3", weight: "bold" })
-    }
-  ) : void 0, X = 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(W, { className: "size-5", weight: "regular" })
-    }
-  ) : void 0;
-  return /* @__PURE__ */ h(D, { variant: "dark", children: [
-    /* @__PURE__ */ e(
-      E,
-      {
-        onToggle: N,
-        isBusy: p,
-        isPreviewVisible: !g,
-        children: /* @__PURE__ */ e(
-          j,
-          {
-            variant: "dark",
-            gallery: u,
-            title: t,
-            showLocked: g,
-            mimeType: a,
-            thumbnailUrl: n,
-            source: w,
-            topRight: K
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(
-      z,
-      {
-        variant: "dark",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: M,
-        icon: m ? U("dark") : void 0,
-        trailingAction: X
-      }
-    )
-  ] });
-}, se = ({
-  title: t,
-  mimeType: a = "application/octet-stream",
-  thumbnailUrl: n,
-  detail: r,
-  amountText: i,
-  placeholderTitle: s,
-  placeholderAmountText: c,
-  gallery: u = []
-}) => {
-  const d = P(u), l = /* @__PURE__ */ h(y.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(D, { variant: "light", children: [
-    /* @__PURE__ */ e(
-      j,
-      {
-        variant: "light",
-        gallery: u,
-        title: t,
-        showLocked: !0,
-        mimeType: a,
-        thumbnailUrl: n
-      }
-    ),
-    /* @__PURE__ */ e(
-      z,
-      {
-        variant: "light",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: l,
-        icon: d ? U("light") : void 0
-      }
-    )
-  ] });
-}, le = ({
-  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 = P(u), { source: f, isPreviewVisible: m, isLoadingPreview: w, togglePreview: x } = S({ isGallery: o, onFetchSource: l, onPreviewClick: d }), b = !m;
-  return /* @__PURE__ */ h(D, { variant: "dark", children: [
-    /* @__PURE__ */ e(
-      E,
-      {
-        onToggle: x,
-        isBusy: w,
-        isPreviewVisible: !b,
-        children: /* @__PURE__ */ e(
-          j,
-          {
-            variant: "dark",
-            gallery: u,
-            title: t,
-            showLocked: b,
-            paymentStatus: c,
-            mimeType: a,
-            thumbnailUrl: n,
-            source: f
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ e(
-      z,
-      {
-        variant: "dark",
-        title: t,
-        placeholderTitle: s,
-        mimeType: a,
-        detail: r,
-        statusBadge: /* @__PURE__ */ e(
-          O,
-          {
-            isMine: !0,
-            paymentStatus: c,
-            amountText: i
-          }
-        ),
-        icon: o ? U("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 = P(s), { source: m, cardRef: w, handleUnlockClick: x } = ie({
-    paymentStatus: l,
-    onFetchSource: u,
-    onUnlockClick: c
-  }), b = m == null ? void 0 : m.sourceUrl, N = m == null ? void 0 : m.redeemUrl, g = f ? l !== "paid" : b === void 0, p = T(r), M = f ? void 0 : b;
-  return /* @__PURE__ */ h(
-    D,
-    {
-      variant: "light",
-      rootRef: w,
-      "data-testid": "locked-attachment",
-      children: [
-        /* @__PURE__ */ e(
-          j,
-          {
-            variant: "light",
-            gallery: s,
-            title: t,
-            showLocked: g,
-            paymentStatus: l,
-            mimeType: r,
-            thumbnailUrl: n,
-            source: m,
-            containedImage: !g && p === "document"
-          }
-        ),
-        /* @__PURE__ */ e(
-          z,
-          {
-            variant: "light",
-            title: t,
-            mimeType: r,
-            detail: i,
-            statusBadge: /* @__PURE__ */ e(
-              O,
-              {
-                isMine: !1,
-                paymentStatus: l,
-                amountText: a
-              }
-            ),
-            icon: f ? U("light") : void 0,
-            action: /* @__PURE__ */ e(
-              re,
-              {
-                isLocked: g,
-                isUnlocking: o,
-                sourceUrl: M,
-                redeemUrl: N,
-                onUnlockClicked: x,
-                onDownloadClicked: d
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, be = (t) => t.isDraft ? /* @__PURE__ */ e(ne, { ...t }) : t.isPreview ? /* @__PURE__ */ e(se, { ...t }) : t.isMine ? /* @__PURE__ */ e(le, { ...t }) : /* @__PURE__ */ e(ce, { ...t });
-export {
-  be as default
-};
-//# sourceMappingURL=Card-V5d6qhDT.js.map