@linktr.ee/messaging-react 3.31.2 → 3.32.0-rc-1786001289

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Ct_Jgy8P.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.MessageBubble=e.MessageBubble;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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-C0SNOT_0.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.MessageBubble=e.MessageBubble;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;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

@@ -748,6 +748,17 @@ export declare interface LinkAttachmentCta {
     href?: string;
     /** When set, called on click (in addition to `href` navigation if provided). */
     onClick?: () => void;
+    /**
+     * Visual emphasis of the CTA button. Defaults to `'primary'` (the filled
+     * dark button), so existing callers are unaffected. `'secondary'` renders
+     * the subtle/grey button. Orthogonal to the card's sent/received `variant`
+     * (which controls bubble side, not button emphasis).
+     *
+     * NOTE: this is the presentational half only. The wire-format value should
+     * ride the shared interactive-surfaces action contract (the `InteractiveAction`
+     * shape), not be re-invented per surface.
+     */
+    variant?: 'primary' | 'secondary';
 }
 
 /**

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 p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-ilHx7pIO.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 p, m as d, n as v, p as C, q as A, s as k, t as F, u as b, v as P, w as f, x, o as y, y as z, z as B, B as S, D as q, E as D, G as E, H as V, I as w } from "./index-KC2xnb1K.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.31.2",
+  "version": "3.32.0-rc-1786001289",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "^2.2.0",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786001289",
     "@linktr.ee/messaging-taxonomy": "^0.5.1",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -262,6 +262,87 @@ const ACCENT_CARD = {
   thumbnailUrl: IMAGE_THUMBNAIL,
 }
 
+/**
+ * CTA emphasis — `cta.variant`. `primary` (default) is the filled button;
+ * `secondary` is the subtle/grey button used by the official-channel cards.
+ * Shown on both surfaces, and over an accent-derived chin: the translucent
+ * `secondary` fills (`bg-white/15`, `bg-black/[0.06]`) composite against the
+ * extracted colour, whereas the opaque `primary` fill is accent-independent —
+ * the bottom rows are the Chromatic guard for that legibility difference.
+ */
+export const CtaEmphasis: StoryFn = () => {
+  const cta = (label: string, variant?: 'primary' | 'secondary') => ({
+    label,
+    onClick: () => alert(`Tapped ${label}`),
+    ...(variant ? { variant } : {}),
+  })
+  return (
+    <Table>
+      <TableHead columns={['primary (default)', 'secondary']} />
+      <tbody>
+        <tr>
+          <RowLabel>Received (light)</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Received {...ACCENT_CARD} cta={cta('Add now')} />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Sent (dark)</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Sent {...ACCENT_CARD} cta={cta('Add now')} />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Received + accent chin</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now')}
+            />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Received
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+        <tr>
+          <RowLabel>Sent + accent chin</RowLabel>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now')}
+            />
+          </td>
+          <td className="align-top">
+            <LinkAttachment.Sent
+              {...ACCENT_CARD}
+              accentColor="#7008E7"
+              cta={cta('Add now', 'secondary')}
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
 /**
  * The dominant-colour card and its WCAG AA gate (MES-1349, corrected MES-1388).
  *

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -57,6 +57,32 @@ describe('LinkAttachment.Received (link previews)', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
     expect(ctaOnClick).toHaveBeenCalledTimes(1)
   })
+
+  it('renders the filled (primary) CTA when cta.variant is omitted', async () => {
+    renderWithProviders(
+      <LinkAttachment.Received
+        title="Welcome"
+        description="Add a personal welcome message"
+        cta={{ label: 'Add now', onClick: vi.fn() }}
+      />
+    )
+    const button = await screen.findByText('Add now')
+    expect(button.className).toContain('bg-[#121110]')
+    expect(button.className).toContain('text-white')
+  })
+
+  it('renders the subtle (secondary) CTA when cta.variant is "secondary"', async () => {
+    renderWithProviders(
+      <LinkAttachment.Received
+        title="Welcome"
+        description="Add a personal welcome message"
+        cta={{ label: 'Add now', onClick: vi.fn(), variant: 'secondary' }}
+      />
+    )
+    const button = await screen.findByText('Add now')
+    expect(button.className).toContain('bg-black/[0.06]')
+    expect(button.className).toContain('text-[#121110]')
+  })
 })
 
 describe('LinkAttachment.Sent', () => {

package/src/components/LinkAttachment/components/_shared/CardCta.tsx

@@ -11,9 +11,24 @@ export interface CardCtaProps {
   cta: LinkAttachmentCta
 }
 
-const BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
-  dark: 'bg-white text-[#121110] hover:bg-white/90',
-  light: 'bg-[#121110] text-white hover:bg-[#2a2928]',
+type CtaEmphasis = NonNullable<LinkAttachmentCta['variant']>
+
+// Two axes: the bubble side (`dark` = sent chrome, `light` = received chrome)
+// crossed with CTA emphasis (`primary` = filled, `secondary` = subtle/grey).
+// `primary` preserves the existing filled button exactly, so callers that omit
+// `cta.variant` are unaffected. Values are explicit rather than DS tokens: the
+// component-library preset has no neutral button token (`primary` is brand
+// purple), and the host preset can't retheme arbitrary hex. Align the grey with
+// the Arbor secondary token when the shared design tokens land.
+const BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, Record<CtaEmphasis, string>> = {
+  dark: {
+    primary: 'bg-white text-[#121110] hover:bg-white/90',
+    secondary: 'bg-white/15 text-white hover:bg-white/25',
+  },
+  light: {
+    primary: 'bg-[#121110] text-white hover:bg-[#2a2928]',
+    secondary: 'bg-black/[0.06] text-[#121110] hover:bg-black/10',
+  },
 }
 
 /**
@@ -23,9 +38,10 @@ const BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, string> = {
  * plain `<button>`.
  */
 const CardCta: React.FC<CardCtaProps> = ({ variant, cta }) => {
+  const emphasis: CtaEmphasis = cta.variant ?? 'primary'
   const className = classNames(
     'mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors',
-    BUTTON_CLASS_BY_VARIANT[variant]
+    BUTTON_CLASS_BY_VARIANT[variant][emphasis]
   )
 
   // Mirror the URL normalization used by the shell anchor so bare

package/src/components/LinkAttachment/types.ts

@@ -111,4 +111,15 @@ export interface LinkAttachmentCta {
   href?: string
   /** When set, called on click (in addition to `href` navigation if provided). */
   onClick?: () => void
+  /**
+   * Visual emphasis of the CTA button. Defaults to `'primary'` (the filled
+   * dark button), so existing callers are unaffected. `'secondary'` renders
+   * the subtle/grey button. Orthogonal to the card's sent/received `variant`
+   * (which controls bubble side, not button emphasis).
+   *
+   * NOTE: this is the presentational half only. The wire-format value should
+   * ride the shared interactive-surfaces action contract (the `InteractiveAction`
+   * shape), not be re-invented per surface.
+   */
+  variant?: 'primary' | 'secondary'
 }