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

package/src/components/{CustomMessage/LockedAttachment → LockedAttachment}/components/_shared/GalleryThumbnail.tsx

@@ -1,18 +1,23 @@
-import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
 
-import { AttachmentThumbnail, getSourceType } from '../../../../AttachmentCard'
+import { AttachmentThumbnail, getSourceType } from '../../../AttachmentCard'
 import type {
   LockedAttachmentGalleryItem,
   PaymentStatus,
 } from '../../types'
 
-import { LockBadge } from './LockBadge'
-import type { CardVariant } from './MediaShell'
+import type { LockedCardVariant } from './LockedCardShell'
 
 export interface GalleryThumbnailProps {
-  variant: CardVariant
+  variant: LockedCardVariant
   gallery: LockedAttachmentGalleryItem[]
   title?: string
   /** When true, all items are shown blurred + the locked/play badge is overlaid. */
@@ -47,8 +52,24 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   const current = gallery[safeIndex]
   const isVideoItem = isPlayableItem(current)
 
+  // Center badge: PLAY for video items, LOCK for non-video locked items.
+  // Unlocked image items show no center badge — the image is the content.
+  const centerBadge = (() => {
+    if (isVideoItem) {
+      return <PlayIcon className="size-6" weight="fill" />
+    }
+    if (showLocked) {
+      return paymentStatus === 'paid' ? (
+        <LockOpenIcon className="size-6" weight="fill" />
+      ) : (
+        <LockSimpleIcon className="size-6" weight="fill" />
+      )
+    }
+    return null
+  })()
+
   // Stop propagation so arrow taps don't bubble up to the outer preview-toggle
-  // wrapper on PreviewMediaCard / OwnMediaCard.
+  // wrapper on ComposerCard / SentCard.
   const goPrev = (e: React.MouseEvent) => {
     e.stopPropagation()
     setIndex((i) => Math.max(0, i - 1))
@@ -65,22 +86,14 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
   // Locked + unlocked render entirely separate trees so the locked state
   // doesn't end up stacking a blurred `<img>` on top of an underlying
   // `AttachmentThumbnail` (whose `bg-white/10` poster shell otherwise
-  // shows through as a visible horizontal seam).
-  //
-  // The locked placeholder is absolutely positioned, so it needs the fixed
-  // 337/386 box for height; unlocked content (video, natural-sized image)
-  // manages its own height and can expand/shrink per item.
+  // shows through as a visible horizontal seam at the 16:9 boundary
+  // inside the taller 337/386 gallery aspect).
   //
   // The locked branch uses `filter: blur` on a single full-size `<img>`
   // — not `backdrop-filter` — so the rounded corners are clipped
-  // normally without any clip-path workarounds (see SingleThumbnail).
+  // normally without any clip-path workarounds (see LockedThumbnail).
   return (
-    <div
-      className={classNames(
-        'group relative overflow-hidden rounded-t-md',
-        showLocked ? 'aspect-[337/386]' : undefined
-      )}
-    >
+    <div className="relative aspect-[337/386] overflow-hidden rounded-t-md">
       {showLocked ? (
         <div
           className={classNames(
@@ -102,25 +115,20 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
         </div>
       ) : (
         <AttachmentThumbnail
-          key={safeIndex}
           mimeType={current.mimeType}
           sourceUrl={current.sourceUrl}
           thumbnailUrl={current.thumbnailUrl}
           title={title}
           variant={variant}
-          mediaPlayerProps={{ autoPlay: true }}
         />
       )}
 
-      {/* LOCK while locked. Once unlocked, video/audio autoplays via
-          `mediaPlayerProps` and MediaPlayer already has its own inline
-          controls, so no separate Play affordance is shown. */}
-      {showLocked && (
-        <LockBadge
-          paymentStatus={paymentStatus}
-          isPlayable={isVideoItem}
-          isLocked={showLocked}
-        />
+      {centerBadge && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+            {centerBadge}
+          </div>
+        </div>
       )}
 
       {total > 1 && (
@@ -150,8 +158,8 @@ const GalleryThumbnail: React.FC<GalleryThumbnailProps> = ({
             <CaretRightIcon className="size-5" weight="bold" />
           </button>
 
-          <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">
-            <span className="text-xs font-medium leading-none text-white">
+          <div className="pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1">
+            <span className="text-xs font-medium leading-4 text-white">
               {safeIndex + 1}/{total}
             </span>
           </div>

package/src/components/LockedAttachment/components/_shared/LockBadge.tsx

@@ -0,0 +1,39 @@
+import {
+  LockOpenIcon,
+  LockSimpleIcon,
+  PlayIcon,
+} from '@phosphor-icons/react'
+import React from 'react'
+
+import { getSourceType } from '../../../AttachmentCard'
+import type { PaymentStatus } from '../../types'
+
+/**
+ * Centered 48x48 lock badge that overlays the thumbnail of any locked attachment.
+ * Uses `bg-black/25` from the design system's `alpha-black-25` token.
+ *
+ * For playable media (video/audio), the badge shows a play icon instead of a
+ * lock — matching the convention used by `GalleryThumbnail`.
+ */
+export const LockBadge: React.FC<{
+  paymentStatus?: PaymentStatus
+  mimeType?: string
+}> = ({ paymentStatus, mimeType }) => {
+  const sourceType = mimeType ? getSourceType(mimeType) : undefined
+  const isPlayable = sourceType === 'video' || sourceType === 'audio'
+
+  const Icon = isPlayable
+    ? PlayIcon
+    : paymentStatus === 'paid'
+      ? LockOpenIcon
+      : LockSimpleIcon
+  return (
+    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <div className="flex size-12 items-center justify-center rounded-full bg-black/25 text-white">
+        <Icon className="size-6" weight="fill" />
+      </div>
+    </div>
+  )
+}
+
+export default LockBadge

package/src/components/{CustomMessage/LockedAttachment/components/_shared/MediaShell.tsx → LockedAttachment/components/_shared/LockedCardShell.tsx}

@@ -1,10 +1,10 @@
 import classNames from 'classnames'
 import React from 'react'
 
-export type CardVariant = 'dark' | 'light'
+export type LockedCardVariant = 'dark' | 'light'
 
-export interface MediaShellProps {
-  variant: CardVariant
+export interface LockedCardShellProps {
+  variant: LockedCardVariant
   children: React.ReactNode
   rootRef?: React.Ref<HTMLDivElement>
   'data-testid'?: string
@@ -12,9 +12,9 @@ export interface MediaShellProps {
 
 /**
  * Outer chrome for every LockedAttachment card.
- * Mirrors the 16px radius treatment from the Figma design system.
+ * Mirrors the `shadow-400` + 16px radius treatment from the Figma design system.
  */
-const MediaShell: React.FC<MediaShellProps> = ({
+const LockedCardShell: React.FC<LockedCardShellProps> = ({
   variant,
   children,
   rootRef,
@@ -25,12 +25,12 @@ const MediaShell: React.FC<MediaShellProps> = ({
     data-testid={dataTestId}
     className={classNames(
       'relative w-[280px] select-none overflow-hidden rounded-md',
-      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white',
-      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]'
+      'shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]',
+      variant === 'dark' ? 'bg-[#1e2330]' : 'bg-white'
     )}
   >
     {children}
   </div>
 )
 
-export default MediaShell
+export default LockedCardShell

package/src/components/{CustomMessage/LockedAttachment/components/_shared/SingleThumbnail.tsx → LockedAttachment/components/_shared/LockedThumbnail.tsx}

@@ -4,14 +4,14 @@ import React from 'react'
 import {
   AttachmentThumbnail,
   renderTypeIcon,
-} from '../../../../AttachmentCard'
+} from '../../../AttachmentCard'
 import type { LockedAttachmentSource, PaymentStatus } from '../../types'
 
 import { LockBadge } from './LockBadge'
-import type { CardVariant } from './MediaShell'
+import type { LockedCardVariant } from './LockedCardShell'
 
-export interface SingleThumbnailProps {
-  variant: CardVariant
+export interface LockedThumbnailProps {
+  variant: LockedCardVariant
   mimeType: string
   thumbnailUrl?: string
   title?: string
@@ -40,7 +40,7 @@ export interface SingleThumbnailProps {
  *   - preview/paid: clear thumbnail (the underlying source)
  *   - empty:        type-icon placeholder
  */
-const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
+const LockedThumbnail: React.FC<LockedThumbnailProps> = ({
   variant,
   mimeType,
   thumbnailUrl,
@@ -98,11 +98,7 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
               })}
             </div>
           )}
-          <LockBadge
-            paymentStatus={paymentStatus}
-            mimeType={mimeType}
-            isLocked={showLocked}
-          />
+          <LockBadge paymentStatus={paymentStatus} mimeType={mimeType} />
         </div>
       ) : (
         <AttachmentThumbnail
@@ -129,4 +125,4 @@ const SingleThumbnail: React.FC<SingleThumbnailProps> = ({
   )
 }
 
-export default SingleThumbnail
+export default LockedThumbnail

package/src/components/LockedAttachment/index.tsx

@@ -0,0 +1,63 @@
+import React, { Suspense } from 'react'
+
+import type { ComposerCardProps } from './components/Composer/Card'
+import type { ReceivedCardProps } from './components/Received/Card'
+import type { SentCardProps } from './components/Sent/Card'
+
+const ComposerCardLazy = React.lazy(() => import('./components/Composer/Card'))
+const SentCardLazy = React.lazy(() => import('./components/Sent/Card'))
+const ReceivedCardLazy = React.lazy(() => import('./components/Received/Card'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+    aria-hidden
+  />
+)
+
+const Composer = (props: ComposerCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <ComposerCardLazy {...props} />
+  </Suspense>
+)
+
+const Sent = (props: SentCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <SentCardLazy {...props} />
+  </Suspense>
+)
+
+const Received = (props: ReceivedCardProps) => (
+  <Suspense fallback={<LockedAttachmentFallback />}>
+    <ReceivedCardLazy {...props} />
+  </Suspense>
+)
+
+/**
+ * @deprecated Renamed to `LockedAttachment.Sent` (post-send sender card) or
+ * `LockedAttachment.Composer` (drafting state). This alias maps to `Sent`
+ * because that matches the previous in-thread usage; pre-send / drafting
+ * usages (e.g. with `onDismiss`) should migrate to `LockedAttachment.Composer`.
+ */
+const Creator = Sent
+
+/** @deprecated Renamed to `LockedAttachment.Received`. */
+const Visitor = Received
+
+const LockedAttachment = { Composer, Sent, Received, Creator, Visitor }
+
+export default LockedAttachment
+export type { ComposerCardProps, SentCardProps, ReceivedCardProps }
+/**
+ * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
+ * should migrate to `ComposerCardProps`.
+ */
+export type CreatorCardProps = SentCardProps
+/** @deprecated Renamed to `ReceivedCardProps`. */
+export type VisitorCardProps = ReceivedCardProps
+export type {
+  PaymentStatus,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/LockedAttachment/types.ts

@@ -0,0 +1,51 @@
+import type { Channel, LocalMessage } from 'stream-chat'
+
+import type { PaymentStatus } from '../../stream-custom-data'
+
+export interface LockedAttachmentBaseProps {
+  title?: string
+  mimeType?: string
+  thumbnailUrl?: string
+  detail?: string
+  amountText?: string
+  paymentStatus?: PaymentStatus
+  /**
+   * When provided with 2+ items, the card renders as a mixed-media carousel
+   * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
+   * item brings its own thumbnail and optional source so that
+   * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
+   * same carousel chrome.
+   */
+  gallery?: LockedAttachmentGalleryItem[]
+}
+
+export interface LockedAttachmentGalleryItem {
+  /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+  mimeType: string
+  /** Poster image used for both the locked (blurred) and unlocked preview state. */
+  thumbnailUrl?: string
+  /** Underlying source (image or video URL) — shown only when unlocked. */
+  sourceUrl?: string
+}
+
+export interface LockedAttachmentSource {
+  /** Proxied URL used by the media player for in-app playback. */
+  sourceUrl: string
+  /** URL opened when the visitor clicks Download — may be a file or a web destination. */
+  redeemUrl?: string
+  /** Thumbnail URL from the fetched asset — overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
+}
+
+export type { PaymentStatus }
+
+export interface LockedAttachmentContextValue {
+  isUnlocking: (id: string) => boolean
+  onUnlockClick?: (message: LocalMessage, channel: Channel) => void
+  onDownloadClick?: (message: LocalMessage, channel: Channel) => void
+  onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>
+}
+
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
+  isUnlocking: () => false,
+}

package/src/index.ts

@@ -6,7 +6,7 @@ export { MessagingShell } from './components/MessagingShell'
 export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
-export { default as LockedAttachment } from './components/CustomMessage/LockedAttachment'
+export { default as LockedAttachment } from './components/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
@@ -76,10 +76,15 @@ export type {
 } from './components/MessageBubble'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
-  LockedAttachmentProps,
+  ComposerCardProps,
+  SentCardProps,
+  ReceivedCardProps,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,
-} from './components/CustomMessage/LockedAttachment'
+  // Deprecated aliases preserved for backwards compatibility:
+  CreatorCardProps,
+  VisitorCardProps,
+} from './components/LockedAttachment'
 export type {
   ComposerCardProps as LinkAttachmentComposerCardProps,
   SentCardProps as LinkAttachmentSentCardProps,

package/src/stream-custom-data.ts

@@ -41,7 +41,6 @@ export interface MessageMetadata {
   amount_text?: string
   payment_status?: PaymentStatus
   attachment_title?: string
-  attachment_content_type?: 'text' | 'media'
   attachment_mime_type?: string
   attachment_thumbnail?: string
   attachment_detail?: string

package/src/styles.css

@@ -831,15 +831,3 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
-
-/** Remove padding from the text inside the locked attachment text shell,
-    and inherit TextShell's explicit colour — stream-chat-react's own
-    `MessageText` sets its own (black) colour that only gets overridden by
-    `.str-chat`'s CSS vars, which the Composer preview doesn't have. */
-.message-locked-attachment-text .str-chat__message-text {
-  padding: 0rem !important;
-}
-
-.message-locked-attachment-text .str-chat__message-text-inner {
-  color: inherit;
-}

package/src/types.ts

@@ -20,7 +20,7 @@ import type {
 
 import type { MessageMetadata } from './stream-custom-data'
 
-export type { LockedAttachmentSource } from './components/CustomMessage/LockedAttachment'
+export type { LockedAttachmentSource } from './components/LockedAttachment'
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.

package/dist/Card-415OfRhw.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("@phosphor-icons/react"),d=require("./LoadingDots-D9GGphgM.cjs"),x=require("classnames"),r=({children:s})=>e.jsxs("div",{className:"flex items-center gap-1 text-xs font-medium",children:[e.jsx(h.LockSimpleIcon,{className:"size-3.5 shrink-0 opacity-55",weight:"fill","aria-hidden":!0}),s]}),c=({variant:s="dark"})=>{const a=s==="dark"?"bg-white/25":"bg-black/15";return e.jsxs("div",{className:"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse","aria-hidden":!0,children:[e.jsx("div",{className:x("h-3 w-40 rounded-full",a)}),e.jsx("div",{className:x("h-3 w-24 rounded-full",a)})]})},n=({isMine:s,children:a,className:i})=>e.jsx("div",{className:x("message-locked-attachment-text","relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3","text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",s?"bg-[#1e2330] text-white":"bg-[#f2f1ef] text-black","shadow-[0_1px_2px_rgba(0,0,0,0.08)]",i),children:a}),u=({renderedText:s,amountText:a,placeholderAmountText:i,onDismiss:t})=>e.jsxs(n,{isMine:!0,className:"pr-8",children:[s||e.jsx(c,{variant:"dark"}),e.jsx(r,{children:e.jsx("span",{className:a?"text-white/55":"text-white/30",children:a||i})}),t&&e.jsx("button",{type:"button",onClick:t,className:"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15","aria-label":"Dismiss attachment",children:e.jsx(h.XIcon,{className:"size-3",weight:"bold"})})]}),j=({amountText:s,placeholderAmountText:a})=>e.jsxs(n,{isMine:!1,children:[e.jsx(c,{variant:"light"}),e.jsx(r,{children:e.jsx("span",{className:"opacity-55",children:s||a})})]}),m=({renderedText:s,amountText:a,paymentStatus:i="pending"})=>{const t=i==="paid";return e.jsxs(n,{isMine:!0,children:[t&&s?s:e.jsx(c,{variant:"dark"}),e.jsxs(r,{children:[a&&e.jsx("span",{className:"text-white/55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!0,paymentStatus:i})]})]})},f=({renderedText:s,amountText:a,paymentStatus:i,onUnlockClick:t,isUnlocking:l=!1})=>{if(i==="paid"&&s)return e.jsxs(n,{isMine:!1,children:[s,e.jsxs(r,{children:[a!=null&&e.jsx("span",{className:"opacity-55",children:a}),e.jsx(d.PurchaseStatusBadge,{isMine:!1,paymentStatus:"paid"})]})]});const o=l?"Unlocking message.":"Unlock this message.";return e.jsx(n,{isMine:!1,children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex flex-1 flex-col gap-2",children:[e.jsx(c,{variant:"light"}),e.jsx("span",{className:"sr-only","aria-live":"polite",children:o}),e.jsx(r,{children:a!=null&&e.jsx("span",{className:"opacity-55",children:a})})]}),e.jsx("button",{type:"button",onClick:t,disabled:l,"aria-label":l?"Unlocking message":"Unlock message","aria-busy":l,title:l?"Unlocking message":"Unlock message",className:"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]",children:l?e.jsx(d.LoadingDots,{}):e.jsx(h.LockSimpleIcon,{className:"size-4",weight:"fill","aria-hidden":!0})})]})})},g=s=>s.isDraft?e.jsx(u,{...s}):s.isPreview?e.jsx(j,{...s}):s.isMine?e.jsx(m,{...s}):e.jsx(f,{...s});exports.default=g;
-//# sourceMappingURL=Card-415OfRhw.cjs.map

package/dist/Card-415OfRhw.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card-415OfRhw.cjs","sources":["../src/components/CustomMessage/LockedAttachment/components/_shared/PriceLockRow.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/SkeletonTextLines.tsx","../src/components/CustomMessage/LockedAttachment/components/_shared/TextShell.tsx","../src/components/CustomMessage/LockedAttachment/components/Text/Card.tsx"],"sourcesContent":["import { LockSimpleIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\n/**\n * The lock-icon + amount/status row shared by every LockedAttachment text-mode\n * card. Only the wrapper and the leading lock icon are shared — the amount and\n * any trailing status live in `children`, since they genuinely differ per card\n * (placeholder fallback vs. paid badge vs. bare amount).\n */\nconst PriceLockRow: React.FC<React.PropsWithChildren> = ({ children }) => (\n  <div className=\"flex items-center gap-1 text-xs font-medium\">\n    <LockSimpleIcon\n      className=\"size-3.5 shrink-0 opacity-55\"\n      weight=\"fill\"\n      aria-hidden\n    />\n    {children}\n  </div>\n)\n\nexport default PriceLockRow\n","import classNames from 'classnames'\nimport React from 'react'\n\nexport interface SkeletonTextLinesProps {\n  /** Matches the bubble it sits in — \"dark\" for the sender's own bubble. */\n  variant: 'light' | 'dark'\n}\n\n/**\n * Two skeleton bars standing in for the redacted text of a paid text-only\n * message — the real content is never sent to the client until purchase, so\n * there's nothing to render yet.\n *\n * Uses explicit black/white (not `bg-current`) because Tailwind doesn't\n * support opacity modifiers on the `current` color — `bg-current/30` silently\n * produces no CSS rule at all.\n */\nconst SkeletonTextLines: React.FC<SkeletonTextLinesProps> = ({ variant = 'dark' }) => {\n  const colour = variant === 'dark' ? 'bg-white/25' : 'bg-black/15'\n\n  return (\n    <div className=\"flex flex-col gap-2 str-chat__message-text my-1 animate-pulse\" aria-hidden>\n      <div className={classNames('h-3 w-40 rounded-full', colour)} />\n      <div className={classNames('h-3 w-24 rounded-full', colour)} />\n    </div>\n  )\n}\n\nexport default SkeletonTextLines\n","import classNames from 'classnames'\nimport React from 'react'\n\n/**\n * Chat-bubble chrome for a paid text-only message/preview. Deliberately\n * doesn't lean on `.str-chat`'s CSS variables (`--str-chat__message-bubble-*`)\n * — this renders in the Composer preview too, which sits outside any\n * `.str-chat` ancestor, so every value here (radius, colour, type scale) is\n * hardcoded to match the Figma spec directly.\n */\nconst TextShell: React.FC<\n  React.PropsWithChildren<{ isMine: boolean; className?: string }>\n> = ({ isMine, children, className }) => (\n  <div\n    className={classNames(\n      'message-locked-attachment-text',\n      'relative flex min-w-[225px] max-w-[280px] flex-col gap-1 rounded-[1.5rem] px-4 py-3',\n      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',\n      isMine ? 'bg-[#1e2330] text-white' : 'bg-[#f2f1ef] text-black',\n      'shadow-[0_1px_2px_rgba(0,0,0,0.08)]',\n      className\n    )}\n  >\n    {children}\n  </div>\n)\n\nexport default TextShell\n","import { LockSimpleIcon, XIcon } from '@phosphor-icons/react'\nimport type React from 'react'\n\nimport LoadingDots from '../_shared/LoadingDots'\nimport PriceLockRow from '../_shared/PriceLockRow'\nimport PurchaseStatusBadge from '../_shared/PurchaseStatusBadge'\nimport SkeletonTextLines from '../_shared/SkeletonTextLines'\nimport TextShell from '../_shared/TextShell'\n\nimport type {\n  TextCardDraftProps,\n  TextCardOtherProps,\n  TextCardOwnProps,\n  TextCardPreviewProps,\n  TextCardProps,\n} from './types'\n\nexport type { TextCardProps } from './types'\n\nconst DraftTextCard: React.FC<TextCardDraftProps> = ({\n  renderedText,\n  amountText,\n  placeholderAmountText,\n  onDismiss,\n}) => (\n  <TextShell isMine className=\"pr-8\">\n      {renderedText || <SkeletonTextLines variant=\"dark\" />}\n    <PriceLockRow>\n      <span className={amountText ? 'text-white/55' : 'text-white/30'}>\n        {amountText || placeholderAmountText}\n      </span>\n    </PriceLockRow>\n    {onDismiss && (\n      <button\n        type=\"button\"\n        onClick={onDismiss}\n        className=\"absolute right-3 top-3 flex size-6 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15\"\n        aria-label=\"Dismiss attachment\"\n      >\n        <XIcon className=\"size-3\" weight=\"bold\" />\n      </button>\n    )}\n  </TextShell>\n)\n\nconst PreviewTextCard: React.FC<TextCardPreviewProps> = ({\n  amountText,\n  placeholderAmountText,\n}) => (\n  <TextShell isMine={false}>\n    <SkeletonTextLines variant=\"light\" />\n    <PriceLockRow>\n      <span className=\"opacity-55\">{amountText || placeholderAmountText}</span>\n    </PriceLockRow>\n  </TextShell>\n)\n\nconst OwnTextCard: React.FC<TextCardOwnProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus = 'pending',\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  return (\n    <TextShell isMine>\n      {isPaid && renderedText ? (\n        renderedText\n      ) : (\n        <SkeletonTextLines variant=\"dark\" />\n      )}\n      <PriceLockRow>\n        {amountText && <span className=\"text-white/55\">{amountText}</span>}\n        <PurchaseStatusBadge isMine paymentStatus={paymentStatus} />\n      </PriceLockRow>\n    </TextShell>\n  )\n}\n\nconst OtherTextCard: React.FC<TextCardOtherProps> = ({\n  renderedText,\n  amountText,\n  paymentStatus,\n  onUnlockClick,\n  isUnlocking = false,\n}) => {\n  const isPaid = paymentStatus === 'paid'\n\n  if (isPaid && renderedText) {\n    return (\n      <TextShell isMine={false}>\n        {renderedText}\n        <PriceLockRow>\n          {amountText != null && (\n            <span className=\"opacity-55\">{amountText}</span>\n          )}\n          <PurchaseStatusBadge isMine={false} paymentStatus=\"paid\" />\n        </PriceLockRow>\n      </TextShell>\n    )\n  }\n\n  const ariaLabel = isUnlocking\n    ? 'Unlocking message.'\n    : 'Unlock this message.'\n\n  return (\n    <TextShell isMine={false}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex flex-1 flex-col gap-2\">\n          <SkeletonTextLines variant=\"light\" />\n          <span className=\"sr-only\" aria-live=\"polite\">\n            {ariaLabel}\n          </span>\n          <PriceLockRow>\n            {amountText != null && (\n              <span className=\"opacity-55\">{amountText}</span>\n            )}\n          </PriceLockRow>\n        </div>\n        <button\n          type=\"button\"\n          onClick={onUnlockClick}\n          disabled={isUnlocking}\n          aria-label={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          aria-busy={isUnlocking}\n          title={isUnlocking ? 'Unlocking message' : 'Unlock message'}\n          className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-[#121110] text-white hover:bg-[#2a2928]\"\n        >\n          {isUnlocking ? (\n            <LoadingDots />\n          ) : (\n            <LockSimpleIcon className=\"size-4\" weight=\"fill\" aria-hidden />\n          )}\n        </button>\n      </div>\n    </TextShell>\n  )\n}\n\nconst TextCard: React.FC<TextCardProps> = (props) => {\n  if (props.isDraft) {\n    return <DraftTextCard {...props} />\n  } else if (props.isPreview) {\n    return <PreviewTextCard {...props} />\n  } else if (props.isMine) {\n    return <OwnTextCard {...props} />\n  } else {\n    return <OtherTextCard {...props} />\n  }\n}\n\nexport default TextCard\n"],"names":["PriceLockRow","children","jsxs","jsx","LockSimpleIcon","SkeletonTextLines","variant","colour","classNames","TextShell","isMine","className","DraftTextCard","renderedText","amountText","placeholderAmountText","onDismiss","XIcon","PreviewTextCard","OwnTextCard","paymentStatus","isPaid","PurchaseStatusBadge","OtherTextCard","onUnlockClick","isUnlocking","ariaLabel","LoadingDots","TextCard","props"],"mappings":"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"}

package/dist/Card-CyWdUMCB.cjs

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