@linktr.ee/messaging-react 1.33.3 → 1.35.0-rc-1777516745

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -5,31 +5,39 @@ import type { LocalMessage } from 'stream-chat'
 import { MediaMessage } from '.'
 
 const meta: Meta<typeof MediaMessage> = {
-  title: 'Components/MediaMessage',
+  title: 'MediaMessage',
   component: MediaMessage,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
 }
 export default meta
 
-// ---------------------------------------------------------------------------
-// Shared helpers
-// ---------------------------------------------------------------------------
+type MessageAttachment = NonNullable<LocalMessage['attachments']>[number]
 
-const SENDER = { id: 'user-other', name: 'Jane Creator', image: 'https://i.pravatar.cc/40?img=5' }
-const ME = { id: 'user-me', name: 'Me' }
+const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => {
+  const defaultMessage: LocalMessage = {
+    id: 'msg-1',
+    text: '',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    deleted_at: null,
+    pinned_at: null,
+    status: 'received',
+    attachments: [],
+  }
 
-const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => ({
-  id: 'msg-1',
-  text: '',
-  type: 'regular',
-  created_at: new Date(),
-  updated_at: new Date(),
-  user: SENDER,
-  attachments: [],
-  ...overrides,
-})
+  return {
+    ...defaultMessage,
+    ...overrides,
+    created_at: overrides.created_at ?? defaultMessage.created_at,
+    updated_at: overrides.updated_at ?? defaultMessage.updated_at,
+    deleted_at: overrides.deleted_at ?? defaultMessage.deleted_at,
+    pinned_at: overrides.pinned_at ?? defaultMessage.pinned_at,
+    status: overrides.status ?? defaultMessage.status,
+  }
+}
 
 const VARIANTS = [
   {
@@ -46,7 +54,8 @@ const VARIANTS = [
     label: 'Audio',
     attachment: {
       type: 'audio',
-      asset_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+      asset_url:
+        'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
       mime_type: 'audio/mpeg',
       title: 'Morning Meditation',
       file_size: 6_900_000,
@@ -121,21 +130,23 @@ const LINK_VARIANTS = [
   },
 ] as const
 
-// ---------------------------------------------------------------------------
-// Layout primitives
-// ---------------------------------------------------------------------------
-
-const GridTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <div className="p-12 bg-[#F9F7F4]">
+const Table: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="min-h-screen w-full p-12 bg-[#F9F7F4]">
     <table className="border-separate border-spacing-4">{children}</table>
   </div>
 )
 
-const GridHead: React.FC<{ labels: readonly string[] }> = ({ labels }) => (
+const TableHead: React.FC<{ variants: readonly { label: string }[] }> = ({
+  variants,
+}) => (
   <thead>
     <tr>
-      {labels.map((label) => (
-        <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
+      <th className="text-left text-xs font-medium text-black/40 pb-2" />
+      {variants.map(({ label }) => (
+        <th
+          key={label}
+          className="text-left text-xs font-medium text-black/40 pb-2"
+        >
           {label}
         </th>
       ))}
@@ -143,91 +154,86 @@ const GridHead: React.FC<{ labels: readonly string[] }> = ({ labels }) => (
   </thead>
 )
 
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-export const Received: StoryFn = () => (
-  <GridTable>
-    <GridHead labels={VARIANTS.map((v) => v.label)} />
+export const Attachment: StoryFn = () => (
+  <Table>
+    <TableHead variants={VARIANTS} />
     <tbody>
       <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Received
+        </td>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={false}
-              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
       </tr>
-    </tbody>
-  </GridTable>
-)
-Received.parameters = {
-  docs: {
-    description: {
-      story: 'Received messages — left-aligned with avatar, light gray card background.',
-    },
-  },
-}
-
-export const Sent: StoryFn = () => (
-  <GridTable>
-    <GridHead labels={VARIANTS.map((v) => v.label)} />
-    <tbody>
       <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Sent
+        </td>
         {VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={true}
-              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
       </tr>
     </tbody>
-  </GridTable>
+  </Table>
 )
-Sent.parameters = {
-  docs: {
-    description: {
-      story: 'Sent messages — right-aligned, no avatar, black card background.',
-    },
-  },
-}
 
 export const Links: StoryFn = () => (
-  <GridTable>
-    <GridHead labels={LINK_VARIANTS.map((v) => v.label)} />
+  <Table>
+    <TableHead variants={LINK_VARIANTS} />
     <tbody>
       <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Received
+        </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={false}
-              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
       </tr>
       <tr>
+        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+          Sent
+        </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
           <td key={label} className="align-top">
             <MediaMessage
               isMyMessage={true}
-              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+              message={base({
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
+              })}
             />
           </td>
         ))}
       </tr>
     </tbody>
-  </GridTable>
+  </Table>
 )
-Links.parameters = {
-  docs: {
-    description: {
-      story: 'Link preview cards — top row received, bottom row sent. Shows thumbnail, title, description, and URL with image fallback.',
-    },
-  },
-}

package/src/components/MediaMessage/index.tsx

@@ -113,7 +113,7 @@ const MediaMeta: React.FC<{
   <div className="flex items-start gap-2 px-4 pb-3 pt-3">
     <div className="min-w-0 flex-1">
       {title && (
-        <p className={`mb-1.5 truncate text-base font-medium ${primaryText(isMyMessage)}`}>
+        <p className={`truncate text-base font-medium ${primaryText(isMyMessage)}`}>
           {title}
         </p>
       )}

package/src/styles.css

@@ -152,14 +152,37 @@
   background: transparent;
 }
 
-/* Wrapper to ensure tag stays below bubble */
-.str-chat__message-bubble-wrapper {
+.str-chat__li .str-chat__message--me {
+  position: relative;
+}
+
+.str-chat__li .str-chat__message-inner {
+  grid-column-gap: 0;
+}
+
+.str-chat__li .str-chat__message--me .str-chat__message-bubble-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.str-chat__li .str-chat__message--other {
+  position: relative;
+  grid-template-columns: 40px 1fr;
+}
+
+.str-chat__li .str-chat__message--other .str-chat__message-bubble-wrapper {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
 }
 
-.str-chat__typing-indicator {
-  inset-inline: auto;
+.str-chat__li .str-chat__message--other .str-chat__avatar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
 }
 
 /* Channel list load-more button overrides */
@@ -186,7 +209,6 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  margin-top: 4px;
   padding: 0;
   font-size: 12px;
   font-weight: 500;

package/dist/Card-BfA8wq8O.js

@@ -1,181 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { CheckCircleIcon as N, XIcon as v, EyeIcon as k, EyeSlashIcon as z, LockOpenIcon as I, LockIcon as y } from "@phosphor-icons/react";
-import d from "classnames";
-import h, { useState as j, useCallback as _ } from "react";
-import { r as b, g as C, M as S } from "./index-Ydi1pTAi.js";
-const M = ({
-  title: a,
-  sourceUrl: l,
-  thumbnailUrl: t,
-  mimeType: s,
-  onToggle: r
-}) => {
-  const n = r && l && t;
-  return /* @__PURE__ */ i(
-    "button",
-    {
-      type: "button",
-      disabled: !r,
-      className: d(
-        "relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none",
-        { "cursor-pointer": !!r, "cursor-default": !r }
-      ),
-      onClick: r,
-      "aria-label": r ? "Toggle preview" : void 0,
-      children: [
-        n ? /* @__PURE__ */ e(
-          E,
-          {
-            sourceUrl: l,
-            thumbnailUrl: t,
-            mimeType: s
-          }
-        ) : t ? /* @__PURE__ */ e("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ e(
-          "img",
-          {
-            src: t,
-            alt: a,
-            draggable: !1,
-            className: "absolute inset-0 h-full w-full object-cover"
-          }
-        ) }) : /* @__PURE__ */ e("div", { className: "aspect-video flex items-center justify-center", children: b(s, {
-          className: "size-12 text-black/20",
-          weight: "regular"
-        }) }),
-        !n && /* @__PURE__ */ e("div", { className: "pointer-events-none absolute inset-0 bg-black/30" })
-      ]
-    }
-  );
-}, E = ({
-  sourceUrl: a,
-  thumbnailUrl: l,
-  mimeType: t
-}) => {
-  const s = C(t);
-  return s === "video" || s === "audio" ? /* @__PURE__ */ e(
-    S,
-    {
-      mimeType: t,
-      source: a,
-      poster: l,
-      autoPlay: !0,
-      loop: !0,
-      controls: !0,
-      muted: !1
-    }
-  ) : s === "image" ? /* @__PURE__ */ e("img", { src: a, alt: "", className: "block w-full", draggable: !1 }) : s === "document" ? /* @__PURE__ */ e(
-    "img",
-    {
-      src: l,
-      alt: "",
-      className: "block w-full",
-      draggable: !1
-    }
-  ) : null;
-}, X = ({
-  title: a,
-  mimeType: l = "application/octet-stream",
-  thumbnailUrl: t,
-  detail: s,
-  amountText: r,
-  placeholderTitle: n = "Attachment title",
-  placeholderAmountText: p,
-  paymentStatus: u,
-  onDismiss: x,
-  onPreviewClick: o
-}) => {
-  const [c, m] = j(), g = c == null ? void 0 : c.sourceUrl, w = (c == null ? void 0 : c.thumbnailUrl) ?? t, f = _(() => {
-    c ? m(void 0) : o && m(o());
-  }, [c, o]);
-  return /* @__PURE__ */ i("div", { className: "relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]", children: [
-    /* @__PURE__ */ e(
-      F,
-      {
-        onDismiss: x,
-        onToggle: o ? f : void 0,
-        isExpanded: !!c,
-        paymentStatus: u
-      }
-    ),
-    /* @__PURE__ */ e(
-      M,
-      {
-        title: a,
-        sourceUrl: g,
-        thumbnailUrl: w,
-        mimeType: l,
-        onToggle: o ? f : void 0
-      }
-    ),
-    /* @__PURE__ */ i("div", { className: "px-4 pb-3 pt-3 bg-black", children: [
-      /* @__PURE__ */ e(
-        "p",
-        {
-          className: d("mb-1.5 truncate text-base font-medium", {
-            "text-white/30": !a,
-            "text-white": !!a
-          }),
-          children: a || n
-        }
-      ),
-      /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-        b(l, {
-          className: "size-5 shrink-0 text-white/55",
-          weight: "regular"
-        }),
-        s && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: s }),
-        u === "paid" ? /* @__PURE__ */ i(h.Fragment, { children: [
-          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#4ade80]", children: "Sold" }),
-          /* @__PURE__ */ e(
-            N,
-            {
-              className: "size-4 text-[#4ade80]",
-              weight: "bold"
-            }
-          )
-        ] }) : /* @__PURE__ */ i(h.Fragment, { children: [
-          /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-          /* @__PURE__ */ e(
-            "span",
-            {
-              className: d("text-xs font-medium", {
-                "text-white/30": !r,
-                "text-white/55": !!r
-              }),
-              children: r || p
-            }
-          )
-        ] })
-      ] })
-    ] })
-  ] });
-}, F = ({
-  onDismiss: a,
-  onToggle: l,
-  isExpanded: t,
-  paymentStatus: s
-}) => a ? /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    onClick: a,
-    className: "absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3",
-    "aria-label": "Dismiss attachment",
-    children: /* @__PURE__ */ e(v, { className: "size-4", weight: "bold" })
-  }
-) : l ? /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    onClick: l,
-    className: "absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3",
-    "aria-label": t ? "Hide preview" : "Show preview",
-    "aria-pressed": t,
-    children: /* @__PURE__ */ e(t ? k : z, { className: "size-4", weight: "fill" })
-  }
-) : /* @__PURE__ */ e("div", { className: "absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3", children: /* @__PURE__ */ e(s === "paid" ? I : y, { className: "size-4", weight: "fill" }) });
-export {
-  X as default
-};
-//# sourceMappingURL=Card-BfA8wq8O.js.map

package/dist/Card-BfA8wq8O.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-BfA8wq8O.js","sources":["../src/components/LockedAttachment/components/Creator/CardThumbnail.tsx","../src/components/LockedAttachment/components/Creator/Card.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport React from 'react'\n\nimport { renderTypeIcon } from '../../utils/icons'\nimport { getSourceType } from '../../utils/mimeType'\nimport MediaPlayer from '../MediaPlayer'\n\ninterface CardThumbnailProps {\n  title?: string\n  sourceUrl?: string\n  thumbnailUrl?: string\n  mimeType: string\n  onToggle?: () => void\n}\n\nconst CardThumbnail: React.FC<CardThumbnailProps> = ({\n  title,\n  sourceUrl,\n  thumbnailUrl,\n  mimeType,\n  onToggle,\n}) => {\n  const isExpanded = onToggle && sourceUrl && thumbnailUrl\n\n  return (\n    <button\n      type=\"button\"\n      disabled={!onToggle}\n      className={classNames(\n        'relative block w-full overflow-hidden border-0 bg-black/5 p-0 text-left appearance-none',\n        { 'cursor-pointer': !!onToggle, 'cursor-default': !onToggle }\n      )}\n      onClick={onToggle}\n      aria-label={onToggle ? 'Toggle preview' : undefined}\n    >\n      {isExpanded ? (\n        <ThumbnailMedia\n          sourceUrl={sourceUrl}\n          thumbnailUrl={thumbnailUrl}\n          mimeType={mimeType}\n        />\n      ) : thumbnailUrl ? (\n        <div className=\"aspect-video overflow-hidden\">\n          <img\n            src={thumbnailUrl}\n            alt={title}\n            draggable={false}\n            className=\"absolute inset-0 h-full w-full object-cover\"\n          />\n        </div>\n      ) : (\n        <div className=\"aspect-video flex items-center justify-center\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-12 text-black/20',\n            weight: 'regular',\n          })}\n        </div>\n      )}\n\n      {!isExpanded && (\n        <div className=\"pointer-events-none absolute inset-0 bg-black/30\" />\n      )}\n    </button>\n  )\n}\n\ninterface ThumbnailMediaProps {\n  sourceUrl: string\n  thumbnailUrl: string\n  mimeType: string\n}\n\nconst ThumbnailMedia: React.FC<ThumbnailMediaProps> = ({\n  sourceUrl,\n  thumbnailUrl,\n  mimeType,\n}) => {\n  const sourceType = getSourceType(mimeType)\n\n  if (sourceType === 'video' || sourceType === 'audio') {\n    return (\n      <MediaPlayer\n        mimeType={mimeType}\n        source={sourceUrl}\n        poster={thumbnailUrl}\n        autoPlay={true}\n        loop={true}\n        controls={true}\n        muted={false}\n      />\n    )\n  }\n\n  if (sourceType === 'image') {\n    return (\n      <img src={sourceUrl} alt=\"\" className=\"block w-full\" draggable={false} />\n    )\n  }\n\n  if (sourceType === 'document') {\n    return (\n      <img\n        src={thumbnailUrl}\n        alt=\"\"\n        className=\"block w-full\"\n        draggable={false}\n      />\n    )\n  }\n\n  return null\n}\n\nexport default CardThumbnail\n","import {\n  CheckCircleIcon,\n  EyeIcon,\n  EyeSlashIcon,\n  LockIcon,\n  LockOpenIcon,\n  XIcon,\n} from '@phosphor-icons/react'\nimport classNames from 'classnames'\nimport React, { useCallback, useState } from 'react'\n\nimport type {\n  LockedAttachmentBaseProps,\n  LockedAttachmentSource,\n  PaymentStatus,\n} from '../../types'\nimport { renderTypeIcon } from '../../utils/icons'\n\nimport CardThumbnail from './CardThumbnail'\n\nexport interface CreatorCardProps extends LockedAttachmentBaseProps {\n  placeholderTitle?: string\n  placeholderAmountText?: string\n  onDismiss?: () => void\n  onPreviewClick?: () => LockedAttachmentSource\n}\n\nconst CreatorCard: React.FC<CreatorCardProps> = ({\n  title,\n  mimeType = 'application/octet-stream',\n  thumbnailUrl,\n  detail,\n  amountText,\n  placeholderTitle = 'Attachment title',\n  placeholderAmountText,\n  paymentStatus,\n  onDismiss,\n  onPreviewClick,\n}) => {\n  const [source, setSource] = useState<LockedAttachmentSource | undefined>()\n\n  const effectiveSourceUrl = source?.sourceUrl\n  const effectiveThumbnailUrl = source?.thumbnailUrl ?? thumbnailUrl\n\n  const handleToggle = useCallback(() => {\n    if (source) {\n      setSource(undefined)\n    } else if (onPreviewClick) {\n      setSource(onPreviewClick())\n    }\n  }, [source, onPreviewClick])\n\n  return (\n    <div className=\"relative w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]\">\n      <CardHeader\n        onDismiss={onDismiss}\n        onToggle={onPreviewClick ? handleToggle : undefined}\n        isExpanded={!!source}\n        paymentStatus={paymentStatus}\n      />\n\n      <CardThumbnail\n        title={title}\n        sourceUrl={effectiveSourceUrl}\n        thumbnailUrl={effectiveThumbnailUrl}\n        mimeType={mimeType}\n        onToggle={onPreviewClick ? handleToggle : undefined}\n      />\n\n      <div className=\"px-4 pb-3 pt-3 bg-black\">\n        <p\n          className={classNames('mb-1.5 truncate text-base font-medium', {\n            'text-white/30': !title,\n            'text-white': !!title,\n          })}\n        >\n          {title || placeholderTitle}\n        </p>\n\n        <div className=\"flex items-center gap-1\">\n          {renderTypeIcon(mimeType, {\n            className: 'size-5 shrink-0 text-white/55',\n            weight: 'regular',\n          })}\n\n          {detail && (\n            <span className=\"text-xs font-medium text-white/55\">{detail}</span>\n          )}\n\n          {paymentStatus === 'paid' ? (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n              <span className=\"text-xs font-medium text-[#4ade80]\">Sold</span>\n              <CheckCircleIcon\n                className=\"size-4 text-[#4ade80]\"\n                weight=\"bold\"\n              />\n            </React.Fragment>\n          ) : (\n            <React.Fragment>\n              <span className=\"text-xs font-medium text-white/55\">&bull;</span>\n              <span\n                className={classNames('text-xs font-medium', {\n                  'text-white/30': !amountText,\n                  'text-white/55': !!amountText,\n                })}\n              >\n                {amountText || placeholderAmountText}\n              </span>\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\ninterface CardHeaderProps {\n  onDismiss?: () => void\n  onToggle?: () => void\n  isExpanded?: boolean\n  paymentStatus?: PaymentStatus\n}\n\nconst CardHeader: React.FC<CardHeaderProps> = ({\n  onDismiss,\n  onToggle,\n  isExpanded,\n  paymentStatus,\n}) => {\n  if (onDismiss) {\n    return (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white right-3\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-4\" weight=\"bold\" />\n      </button>\n    )\n  }\n\n  if (onToggle) {\n    const Icon = isExpanded ? EyeIcon : EyeSlashIcon\n    return (\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        className=\"absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3\"\n        aria-label={isExpanded ? 'Hide preview' : 'Show preview'}\n        aria-pressed={isExpanded}\n      >\n        <Icon className=\"size-4\" weight=\"fill\" />\n      </button>\n    )\n  }\n\n  const Icon = paymentStatus === 'paid' ? LockOpenIcon : LockIcon\n\n  return (\n    <div className=\"absolute top-3 z-50 flex size-8 items-center justify-center rounded-full bg-black/60 text-white left-3\">\n      <Icon className=\"size-4\" weight=\"fill\" />\n    </div>\n  )\n}\n\nexport default CreatorCard\n"],"names":["CardThumbnail","title","sourceUrl","thumbnailUrl","mimeType","onToggle","isExpanded","jsxs","classNames","jsx","ThumbnailMedia","sourceType","getSourceType","MediaPlayer","CreatorCard","detail","amountText","placeholderTitle","placeholderAmountText","paymentStatus","onDismiss","onPreviewClick","source","setSource","useState","effectiveSourceUrl","effectiveThumbnailUrl","handleToggle","useCallback","CardHeader","renderTypeIcon","React","CheckCircleIcon","XIcon","EyeIcon","EyeSlashIcon","LockOpenIcon","LockIcon"],"mappings":"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"}

package/dist/Card-Bpud_enW.js

@@ -1,177 +0,0 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { LockSimpleIcon as k, DownloadSimpleIcon as R, LockOpenIcon as U, CheckCircleIcon as D } from "@phosphor-icons/react";
-import w, { useState as y, useRef as x, useCallback as N, useEffect as M } from "react";
-import { g as O, M as P, r as z } from "./index-Ydi1pTAi.js";
-const A = (d) => {
-  const {
-    isUnlocking: l = !1,
-    sourceUrl: n,
-    redeemUrl: r,
-    onUnlockClicked: c,
-    onDownloadClicked: a
-  } = d, o = n === void 0;
-  return o && c != null ? /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: c,
-      disabled: l,
-      className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none text-[#121110] hover:bg-white/90 disabled:opacity-70",
-      children: l ? /* @__PURE__ */ e(E, {}) : /* @__PURE__ */ i(w.Fragment, { children: [
-        /* @__PURE__ */ e(k, { className: "size-4", weight: "fill" }),
-        "Unlock"
-      ] })
-    }
-  ) : !o && a != null && n != null ? /* @__PURE__ */ i(
-    "a",
-    {
-      href: r ?? n,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: a,
-      className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none !text-[#121110] hover:bg-white/90",
-      children: [
-        /* @__PURE__ */ e(R, { className: "size-4", weight: "bold" }),
-        "Download"
-      ]
-    }
-  ) : null;
-}, E = () => /* @__PURE__ */ i("span", { className: "flex items-center gap-1", children: [
-  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.3s]" }),
-  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce [animation-delay:-0.15s]" }),
-  /* @__PURE__ */ e("span", { className: "size-1 rounded-full bg-white animate-bounce" })
-] }), F = ({
-  title: d,
-  sourceUrl: l,
-  thumbnailUrl: n,
-  mimeType: r,
-  paymentStatus: c
-}) => {
-  const [a, o] = y(!1), f = l === void 0, s = O(r);
-  return f ? /* @__PURE__ */ i("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: [
-    n != null ? /* @__PURE__ */ e(
-      "img",
-      {
-        src: n,
-        alt: "",
-        className: "absolute inset-0 h-full w-full object-cover",
-        draggable: !1
-      }
-    ) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: z(r, {
-      className: "size-12 text-black/20",
-      weight: "regular"
-    }) }),
-    f && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/30", children: /* @__PURE__ */ e("div", { className: "absolute left-3 top-3 flex size-8 items-center justify-center rounded-full bg-black/60 text-white", children: c === "paid" ? /* @__PURE__ */ e(U, {}) : /* @__PURE__ */ e(k, {}) }) })
-  ] }) : s === "audio" || s === "video" ? /* @__PURE__ */ e(
-    P,
-    {
-      source: l,
-      poster: n,
-      mimeType: r
-    }
-  ) : /* @__PURE__ */ e("div", { className: "relative overflow-hidden bg-black/5", children: /* @__PURE__ */ e(
-    "img",
-    {
-      src: s === "document" ? n : l,
-      alt: d,
-      className: `block w-full transition-opacity duration-300 ${a ? "opacity-100" : "opacity-0"}`,
-      draggable: !1,
-      onLoad: () => o(!0)
-    }
-  ) });
-}, q = ({
-  title: d,
-  amountText: l,
-  thumbnailUrl: n,
-  mimeType: r = "application/octet-stream",
-  detail: c,
-  onUnlockClick: a,
-  onFetchSource: o,
-  onDownloadClick: f,
-  paymentStatus: s,
-  isUnlocking: C = !1
-}) => {
-  const [t, _] = y(), g = x(null), p = x(!1), m = x(o);
-  m.current = o;
-  const v = t == null ? void 0 : t.sourceUrl, j = (t == null ? void 0 : t.thumbnailUrl) ?? n, I = t == null ? void 0 : t.redeemUrl, h = N(async () => {
-    var u;
-    if (!p.current) {
-      p.current = !0;
-      try {
-        const b = await ((u = m.current) == null ? void 0 : u.call(m));
-        b && _(b);
-      } finally {
-        p.current = !1;
-      }
-    }
-  }, []), L = N(() => {
-    s === "paid" ? h() : a == null || a();
-  }, [s, h, a]);
-  return M(() => {
-    if (!g.current || s !== "paid" || t !== void 0) return;
-    const u = new IntersectionObserver(
-      ([b]) => {
-        b.isIntersecting && (h(), u.disconnect());
-      },
-      { threshold: 1 }
-    );
-    return u.observe(g.current), () => u.disconnect();
-  }, [s, t, h]), /* @__PURE__ */ i(
-    "div",
-    {
-      ref: g,
-      "data-testid": "locked-attachment",
-      className: "w-[280px] select-none overflow-hidden rounded-[24px] bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
-      children: [
-        /* @__PURE__ */ e(
-          F,
-          {
-            title: d,
-            sourceUrl: v,
-            thumbnailUrl: j,
-            mimeType: r,
-            paymentStatus: s
-          }
-        ),
-        /* @__PURE__ */ i("div", { className: "px-4 pb-3 pt-3 bg-black", children: [
-          /* @__PURE__ */ e("p", { className: "mb-1.5 truncate text-base font-medium text-white", children: d }),
-          /* @__PURE__ */ i("div", { className: "flex items-center gap-1", children: [
-            z(r, {
-              className: "size-5 shrink-0 text-white/55",
-              weight: "regular"
-            }),
-            c && /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: c }),
-            s === "paid" ? /* @__PURE__ */ i(w.Fragment, { children: [
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-[#4ade80]", children: "Purchased" }),
-              /* @__PURE__ */ e(
-                D,
-                {
-                  className: "size-4 text-[#4ade80]",
-                  weight: "bold"
-                }
-              )
-            ] }) : l != null ? /* @__PURE__ */ i(w.Fragment, { children: [
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: "•" }),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-white/55", children: l })
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ e(
-            A,
-            {
-              isUnlocking: C,
-              sourceUrl: v,
-              redeemUrl: I,
-              onUnlockClicked: L,
-              onDownloadClicked: f
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-export {
-  q as default
-};
-//# sourceMappingURL=Card-Bpud_enW.js.map