@linktr.ee/messaging-react 3.8.1 → 3.9.0-rc-1783407048

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DRurVQ0-.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DwUOvMxg.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -405,13 +405,18 @@ export declare interface ChannelViewProps {
 }
 
 export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
-    /** Placeholder shown in the title slot before the composer types one. */
-    placeholderTitle?: string;
+    /**
+     * The message's own text, shown as-is (not redacted yet — the message
+     * hasn't been sent). Only used when `contentType` is `"text"`.
+     */
+    text?: string;
     /** Placeholder shown in the amount slot before one is configured. */
     placeholderAmountText?: string;
     /**
-     * When provided, renders a dismiss X in the thumbnail corner. Called when
-     * the composer clicks it to remove the attachment.
+     * Renders a persistent dismiss X on the thumbnail (media) or next to the
+     * text (text mode); called to remove the draft attachment. Unrelated to
+     * `TextCardProps.onDismiss`, which only appears for `isMine` after a
+     * failed payment.
      */
     onDismiss?: () => void;
     /** Fired the first time the composer taps the thumbnail to preview. */
@@ -420,8 +425,9 @@ export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
      * Lazily loads the underlying source so the composer can preview the
      * attachment they're about to send. Called the first time the thumbnail is
      * tapped; the returned source is cached and reused on subsequent toggles.
+     * Ignored when `contentType` is `"text"`.
      */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    onFetchSource?: FetchSourceHandler;
     /**
      * When provided, renders a pencil button in the body bottom-right that the
      * composer can use to edit the attachment metadata (e.g. open the price /
@@ -436,12 +442,6 @@ declare interface ComposerExtras {
     onDismiss?: () => void;
 }
 
-/**
- * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
- * should migrate to `ComposerCardProps`.
- */
-export declare type CreatorCardProps = SentCardProps;
-
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -479,6 +479,13 @@ export declare interface FaqListProps {
     avatarName?: string;
 }
 
+/**
+ * Lazily fetches the underlying source (URL/thumbnail) for a locked
+ * attachment. Returns `void` to signal "no source available" — the card
+ * stays locked. Shared by `ComposerCardProps`/`MediaCardProps.onFetchSource`.
+ */
+declare type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>;
+
 declare interface FileAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Source URL of the file (used as the download target). */
     src?: string;
@@ -730,33 +737,45 @@ export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseP
 
 export declare const LockedAttachment: {
     Composer: (props: ComposerCardProps) => JSX_2.Element;
-    Sent: (props: SentCardProps) => JSX_2.Element;
-    Received: (props: ReceivedCardProps) => JSX_2.Element;
-    Creator: (props: SentCardProps) => JSX_2.Element;
-    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
+    Text: (props: LockedAttachmentTextCardProps) => JSX_2.Element;
+    Media: (props: LockedAttachmentMediaCardProps) => JSX_2.Element;
 };
 
 declare interface LockedAttachmentBaseProps {
     title?: string;
+    /** Dimmed fallback shown in the title slot when `title` is unset (no attachment metadata yet — still drafting). */
+    placeholderTitle?: 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.
+     * `LockedAttachment.Composer` / `.Media` can share the same carousel
+     * chrome.
      */
     gallery?: LockedAttachmentGalleryItem[];
+    /**
+     * "text" renders the card as a locked/plain chat bubble showing the
+     * message's own text (skeleton-blurred until purchased) instead of a media
+     * thumbnail card — for a paid text-only message. Media-only props
+     * (`mimeType`, `thumbnailUrl`, `title`, `detail`, `gallery`) are ignored in
+     * this mode. Defaults to `"media"`.
+     */
+    contentType?: 'text' | 'media';
 }
 
 export declare interface LockedAttachmentContextValue {
     isUnlocking: (id: string) => boolean;
     onUnlockClick?: (message: LocalMessage, channel: Channel) => void;
     onDownloadClick?: (message: LocalMessage, channel: Channel) => void;
+    /**
+     * Reveal the locked media's underlying source (URL/thumbnail). Not used
+     * for a paid text message — the backend writes the real text directly onto
+     * the message on purchase and `message.text` alone drives that reveal.
+     */
     onFetchSource?: (message: LocalMessage, channel: Channel) => Promise<LockedAttachmentSource | void>;
 }
 
@@ -769,6 +788,31 @@ export declare interface LockedAttachmentGalleryItem {
     sourceUrl?: string;
 }
 
+export declare type LockedAttachmentMediaCardProps = (MediaCardSharedProps & {
+    isMine: true;
+    /** Dimmed fallback shown in the title slot when `title` is unset. */
+    placeholderTitle?: string;
+    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
+    onPreviewClick?: () => void;
+}) | (MediaCardSharedProps & {
+    isMine: false;
+    /**
+     * When true, shows a loading spinner on the Unlock button. Driven by
+     * the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * Called when the recipient clicks Download on an unlocked card.
+     * Omit to hide the Download button.
+     */
+    onDownloadClick?: () => void;
+});
+
 export declare interface LockedAttachmentSource {
     /** Proxied URL used by the media player for in-app playback. */
     sourceUrl: string;
@@ -778,6 +822,33 @@ export declare interface LockedAttachmentSource {
     thumbnailUrl?: string;
 }
 
+export declare type LockedAttachmentTextCardProps = (TextCardSharedProps & {
+    isMine: true;
+}) | (TextCardSharedProps & {
+    isMine: false;
+    /**
+     * Called when the recipient clicks Unlock on an unpaid attachment.
+     * Use this to open a checkout flow. Omit to hide the Unlock button.
+     */
+    onUnlockClick?: () => void;
+    /**
+     * When true, shows a loading spinner on the Unlock button. Driven by
+     * the LockedAttachmentContext (e.g. checkout in progress).
+     */
+    isUnlocking?: boolean;
+});
+
+declare interface MediaCardSharedProps {
+    title?: string;
+    mimeType?: string;
+    thumbnailUrl?: string;
+    detail?: string;
+    amountText?: string;
+    paymentStatus?: PaymentStatus;
+    gallery?: LockedAttachmentGalleryItem[];
+    onFetchSource?: FetchSourceHandler;
+}
+
 export declare const MediaMessage: default_2.FC<MediaMessageProps> & {
     Creator: default_2.FC<{
         message: LocalMessage;
@@ -1184,6 +1255,7 @@ export declare 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;
@@ -1396,31 +1468,6 @@ declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
     onClick?: (index: number) => boolean | void;
 }
 
-export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
-    /**
-     * Called when the recipient clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called to fetch the attachment source — fired automatically when
-     * `paymentStatus` transitions to `'paid'`, or immediately on click when
-     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
-     * to unlock the card.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * Called when the recipient clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-    /**
-     * When true, shows a loading spinner on the Unlock button.
-     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-}
-
 /**
  * Resolves the member to display as the conversation's "other party".
  *
@@ -1443,17 +1490,16 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
  */
 export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
 
-export declare interface SentCardProps extends LockedAttachmentBaseProps {
-    /** Placeholder shown in the title slot when no title is set. */
-    placeholderTitle?: string;
-    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
-    onPreviewClick?: () => void;
+declare interface TextCardSharedProps {
+    amountText?: string;
+    paymentStatus?: PaymentStatus;
     /**
-     * Lazily loads the underlying source so the sender can preview the attachment.
-     * Called the first time the thumbnail is tapped; the returned source is cached
-     * and reused on subsequent toggles.
+     * The message's real, revealed content — shown instead of the skeleton
+     * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the
+     * caller supply its own text renderer (e.g. Stream's `MessageText`)
+     * without `LockedAttachment` depending on it.
      */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+    children?: default_2.ReactNode;
 }
 
 /**
@@ -1524,9 +1570,6 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
     onClick?: (index: number) => boolean | void;
 }
 
-/** @deprecated Renamed to `ReceivedCardProps`. */
-export declare type VisitorCardProps = ReceivedCardProps;
-
 export declare type VoteSelection = 'up' | 'down' | null;
 
 export { }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-BCgRoF_u.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-CZTUyiPe.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -47,6 +47,7 @@ export declare 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/dist/usePreviewToggle-BG-pfsgP.js

@@ -0,0 +1,323 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import f from "classnames";
+import { r as w, g as y, A as k } from "./index-CZTUyiPe.js";
+import I, { useState as g, useRef as T, useCallback as U } from "react";
+import { PlayIcon as _, LockOpenIcon as j, LockSimpleIcon as D, CaretLeftIcon as M, CaretRightIcon as C, ImagesIcon as S } from "@phosphor-icons/react";
+const J = ({
+  variant: t,
+  title: e,
+  placeholderTitle: r = "Attachment title",
+  mimeType: i,
+  detail: l,
+  statusBadge: o,
+  action: d,
+  icon: u,
+  trailingAction: c
+}) => {
+  const s = t === "dark", n = s ? e ?? r : e ?? "", m = s && !e, h = u ?? w(i, {
+    className: f(
+      "size-5 shrink-0",
+      s ? "text-white/55" : "text-black/55"
+    ),
+    weight: "regular"
+  });
+  return /* @__PURE__ */ b("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ b("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ b("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        n.trim() !== "" && /* @__PURE__ */ a(
+          "p",
+          {
+            className: f("truncate text-base font-medium leading-6", {
+              "text-black/90": !s,
+              "text-white/30": s && m,
+              "text-white": s && !m
+            }),
+            children: n
+          }
+        ),
+        /* @__PURE__ */ b("div", { className: "flex flex-wrap items-center gap-1", children: [
+          h,
+          l != null && l !== "" && /* @__PURE__ */ a(
+            "span",
+            {
+              className: f(
+                "text-xs font-medium",
+                s ? "text-white/55" : "text-black/55"
+              ),
+              children: l
+            }
+          ),
+          o
+        ] })
+      ] }),
+      c && /* @__PURE__ */ a("div", { className: "shrink-0", children: c })
+    ] }),
+    d
+  ] });
+}, P = ({
+  paymentStatus: t,
+  mimeType: e,
+  isPlayable: r
+}) => {
+  const i = e ? y(e) : void 0;
+  return /* @__PURE__ */ a("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ a("div", { className: "flex size-12 items-center justify-center rounded-full bg-black/25 text-white", children: /* @__PURE__ */ a(r ?? (i === "video" || i === "audio") ? _ : t === "paid" ? j : D, { className: "size-6", weight: "fill" }) }) });
+};
+function V(t) {
+  const e = y(t.mimeType);
+  return e === "video" || e === "audio";
+}
+const A = ({
+  variant: t,
+  gallery: e,
+  title: r,
+  showLocked: i,
+  paymentStatus: l,
+  topRight: o
+}) => {
+  const [d, u] = g(0), c = e.length, s = Math.min(d, c - 1), n = e[s], m = V(n), h = (p) => {
+    p.stopPropagation(), u((x) => Math.max(0, x - 1));
+  }, z = (p) => {
+    p.stopPropagation(), u((x) => Math.min(c - 1, x + 1));
+  }, v = s === 0, N = s === c - 1;
+  return /* @__PURE__ */ b("div", { className: "relative aspect-[337/386] overflow-hidden rounded-t-md", children: [
+    i ? /* @__PURE__ */ a(
+      "div",
+      {
+        className: f(
+          "absolute inset-0",
+          t === "dark" ? "bg-white/10" : "bg-black/5"
+        ),
+        children: n.thumbnailUrl && /* @__PURE__ */ a(
+          "img",
+          {
+            src: n.thumbnailUrl,
+            alt: "",
+            "aria-hidden": !0,
+            draggable: !1,
+            className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+          }
+        )
+      }
+    ) : /* @__PURE__ */ a(
+      k,
+      {
+        mimeType: n.mimeType,
+        sourceUrl: n.sourceUrl,
+        thumbnailUrl: n.thumbnailUrl,
+        title: r,
+        variant: t
+      }
+    ),
+    (m || i) && /* @__PURE__ */ a(P, { paymentStatus: l, isPlayable: m }),
+    c > 1 && /* @__PURE__ */ b(I.Fragment, { children: [
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: h,
+          disabled: v,
+          "aria-label": "Previous item",
+          className: f(
+            "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",
+            v ? "opacity-40" : "hover:bg-black/40"
+          ),
+          children: /* @__PURE__ */ a(M, { className: "size-5", weight: "bold" })
+        }
+      ),
+      /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: z,
+          disabled: N,
+          "aria-label": "Next item",
+          className: f(
+            "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",
+            N ? "opacity-40" : "hover:bg-black/40"
+          ),
+          children: /* @__PURE__ */ a(C, { className: "size-5", weight: "bold" })
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "pointer-events-none absolute bottom-5 left-1/2 -translate-x-1/2 rounded-lg bg-black/30 px-2 py-1", children: /* @__PURE__ */ b("span", { className: "text-xs font-medium leading-4 text-white", children: [
+        s + 1,
+        "/",
+        c
+      ] }) })
+    ] }),
+    o && /* @__PURE__ */ a("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: o })
+  ] });
+}, E = ({
+  variant: t,
+  mimeType: e,
+  thumbnailUrl: r,
+  title: i,
+  source: l,
+  showLocked: o,
+  paymentStatus: d,
+  topRight: u,
+  containedImage: c = !1
+}) => {
+  const s = o || l == null ? void 0 : l.sourceUrl, n = o ? r : (l == null ? void 0 : l.thumbnailUrl) ?? r, m = t === "dark";
+  return /* @__PURE__ */ b("div", { className: "relative overflow-hidden rounded-t-md", children: [
+    o ? /* @__PURE__ */ b(
+      "div",
+      {
+        className: f(
+          "relative aspect-video overflow-hidden",
+          m ? "bg-white/10" : "bg-black/5"
+        ),
+        children: [
+          n ? /* @__PURE__ */ a(
+            "img",
+            {
+              src: n,
+              alt: "",
+              "aria-hidden": !0,
+              draggable: !1,
+              className: "absolute inset-0 h-full w-full scale-110 object-cover blur-[40px]"
+            }
+          ) : /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: w(e, {
+            className: m ? "size-12 text-white/20" : "size-12 text-black/20",
+            weight: "regular"
+          }) }),
+          /* @__PURE__ */ a(P, { paymentStatus: d, mimeType: e })
+        ]
+      }
+    ) : /* @__PURE__ */ a(
+      k,
+      {
+        mimeType: e,
+        sourceUrl: s,
+        thumbnailUrl: n,
+        title: i,
+        variant: t,
+        containedImage: c,
+        mediaPlayerProps: s ? { autoPlay: !0, loop: !0, controls: !0, muted: !1 } : void 0
+      }
+    ),
+    u && /* @__PURE__ */ a("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: u })
+  ] });
+}, L = (t) => t.length >= 2, Q = (t) => /* @__PURE__ */ a(
+  S,
+  {
+    className: t === "dark" ? "size-5 shrink-0 text-white/55" : "size-5 shrink-0 text-black/55"
+  }
+), W = ({
+  variant: t,
+  gallery: e,
+  title: r,
+  showLocked: i,
+  paymentStatus: l,
+  mimeType: o,
+  thumbnailUrl: d,
+  source: u,
+  containedImage: c,
+  topRight: s
+}) => L(e) ? /* @__PURE__ */ a(
+  A,
+  {
+    variant: t,
+    gallery: e,
+    title: r,
+    showLocked: i,
+    paymentStatus: l,
+    topRight: s
+  }
+) : /* @__PURE__ */ a(
+  E,
+  {
+    variant: t,
+    mimeType: o,
+    thumbnailUrl: d,
+    title: r,
+    source: u,
+    showLocked: i,
+    paymentStatus: l,
+    topRight: s,
+    containedImage: c
+  }
+), X = ({
+  variant: t,
+  children: e,
+  rootRef: r,
+  "data-testid": i
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    "data-testid": i,
+    className: f(
+      "relative w-[280px] select-none overflow-hidden rounded-md",
+      "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)]",
+      t === "dark" ? "bg-[#1e2330]" : "bg-white"
+    ),
+    children: e
+  }
+), Y = ({
+  onToggle: t,
+  isBusy: e,
+  isPreviewVisible: r,
+  children: i
+}) => t ? /* @__PURE__ */ a(
+  "div",
+  {
+    role: "button",
+    tabIndex: e ? -1 : 0,
+    "aria-label": "Toggle preview",
+    "aria-busy": e,
+    "aria-pressed": r,
+    "aria-disabled": e || void 0,
+    onClick: e ? void 0 : t,
+    onKeyDown: (l) => {
+      e || l.target === l.currentTarget && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), t());
+    },
+    className: e ? "block w-full text-left" : "block w-full cursor-pointer text-left",
+    children: i
+  }
+) : /* @__PURE__ */ a(I.Fragment, { children: i });
+function Z({
+  isGallery: t,
+  onFetchSource: e,
+  onPreviewClick: r
+}) {
+  const [i, l] = g(), [o, d] = g(!1), [u, c] = g(!1), s = T(!1), n = U(async () => {
+    if (r == null || r(), o) {
+      d(!1);
+      return;
+    }
+    if (t) {
+      d(!0);
+      return;
+    }
+    if (i) {
+      d(!0);
+      return;
+    }
+    if (e && !s.current) {
+      s.current = !0, c(!0);
+      try {
+        const h = await e();
+        h && (l(h), d(!0));
+      } finally {
+        s.current = !1, c(!1);
+      }
+    }
+  }, [o, t, i, r, e]), m = t || e != null || r != null ? n : void 0;
+  return {
+    source: i,
+    isPreviewVisible: o,
+    isLoadingPreview: u,
+    handleToggle: n,
+    togglePreview: m
+  };
+}
+export {
+  W as C,
+  X as M,
+  Y as P,
+  J as a,
+  Q as g,
+  L as i,
+  Z as u
+};
+//# sourceMappingURL=usePreviewToggle-BG-pfsgP.js.map