@ankhorage/zora 1.4.8 → 1.4.10

package/dist/patterns/message-bubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { MessageBubble } from './MessageBubble';\nexport type {\n  MessageBubbleAuthor,\n  MessageBubbleAvatar,\n  MessageBubbleDirection,\n  MessageBubbleProps,\n  MessageBubbleStatus,\n} from './types';\n"]}

package/dist/patterns/message-bubble/meta.d.ts

@@ -0,0 +1,67 @@
+export declare const messageBubbleMeta: {
+    readonly name: "MessageBubble";
+    readonly category: "pattern";
+    readonly description: "Chat/message bubble with direction, author, text, meta, and delivery status presentation.";
+    readonly directManifestNode: true;
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
+    readonly blueprint: {
+        readonly label: "Message bubble";
+        readonly icon: {
+            readonly name: "chatbubble-outline";
+        };
+        readonly defaultProps: {
+            readonly direction: "incoming";
+            readonly text: "Can you review the latest message pattern?";
+            readonly timestamp: "10:41";
+        };
+    };
+    readonly props: {
+        readonly direction: {
+            readonly type: "enum";
+            readonly category: "Content";
+            readonly label: "Direction";
+            readonly enum: readonly ["incoming", "outgoing", "system"];
+            readonly default: "incoming";
+        };
+        readonly text: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Text";
+        };
+        readonly timestamp: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Timestamp";
+        };
+        readonly meta: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Meta";
+        };
+        readonly status: {
+            readonly type: "enum";
+            readonly category: "Content";
+            readonly label: "Status";
+            readonly enum: readonly ["sending", "sent", "delivered", "read", "failed"];
+        };
+        readonly selected: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Selected";
+            readonly default: false;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Disabled";
+            readonly default: false;
+        };
+        readonly compact: {
+            readonly type: "boolean";
+            readonly category: "Layout";
+            readonly label: "Compact";
+            readonly default: false;
+        };
+    };
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/patterns/message-bubble/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEQ,CAAC"}

package/dist/patterns/message-bubble/meta.js

@@ -0,0 +1,66 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+export const messageBubbleMeta = {
+    name: 'MessageBubble',
+    category: 'pattern',
+    description: 'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',
+    directManifestNode: true,
+    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+    blueprint: {
+        label: 'Message bubble',
+        icon: { name: 'chatbubble-outline' },
+        defaultProps: {
+            direction: 'incoming',
+            text: 'Can you review the latest message pattern?',
+            timestamp: '10:41',
+        },
+    },
+    props: {
+        direction: {
+            type: 'enum',
+            category: 'Content',
+            label: 'Direction',
+            enum: ['incoming', 'outgoing', 'system'],
+            default: 'incoming',
+        },
+        text: {
+            type: 'string',
+            category: 'Content',
+            label: 'Text',
+        },
+        timestamp: {
+            type: 'string',
+            category: 'Content',
+            label: 'Timestamp',
+        },
+        meta: {
+            type: 'string',
+            category: 'Content',
+            label: 'Meta',
+        },
+        status: {
+            type: 'enum',
+            category: 'Content',
+            label: 'Status',
+            enum: ['sending', 'sent', 'delivered', 'read', 'failed'],
+        },
+        selected: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Selected',
+            default: false,
+        },
+        disabled: {
+            type: 'boolean',
+            category: 'State',
+            label: 'Disabled',
+            default: false,
+        },
+        compact: {
+            type: 'boolean',
+            category: 'Layout',
+            label: 'Compact',
+            default: false,
+        },
+    },
+};
+//# sourceMappingURL=meta.js.map

package/dist/patterns/message-bubble/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE,eAAe;IACrB,QAAQ,EAAE,SAAS;IACnB,WAAW,EACT,2FAA2F;IAC7F,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,SAAS,EAAE;QACT,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;QACpC,YAAY,EAAE;YACZ,SAAS,EAAE,UAAU;YACrB,IAAI,EAAE,4CAA4C;YAClD,SAAS,EAAE,OAAO;SACnB;KACF;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC;YACxC,OAAO,EAAE,UAAU;SACpB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,WAAW;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;QACD,MAAM,EAAE;YACN,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC;SACzD;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,KAAK;SACf;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,KAAK;SACf;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,KAAK;SACf;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const messageBubbleMeta = {\n  name: 'MessageBubble',\n  category: 'pattern',\n  description:\n    'Chat/message bubble with direction, author, text, meta, and delivery status presentation.',\n  directManifestNode: true,\n  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Message bubble',\n    icon: { name: 'chatbubble-outline' },\n    defaultProps: {\n      direction: 'incoming',\n      text: 'Can you review the latest message pattern?',\n      timestamp: '10:41',\n    },\n  },\n  props: {\n    direction: {\n      type: 'enum',\n      category: 'Content',\n      label: 'Direction',\n      enum: ['incoming', 'outgoing', 'system'],\n      default: 'incoming',\n    },\n    text: {\n      type: 'string',\n      category: 'Content',\n      label: 'Text',\n    },\n    timestamp: {\n      type: 'string',\n      category: 'Content',\n      label: 'Timestamp',\n    },\n    meta: {\n      type: 'string',\n      category: 'Content',\n      label: 'Meta',\n    },\n    status: {\n      type: 'enum',\n      category: 'Content',\n      label: 'Status',\n      enum: ['sending', 'sent', 'delivered', 'read', 'failed'],\n    },\n    selected: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Selected',\n      default: false,\n    },\n    disabled: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Disabled',\n      default: false,\n    },\n    compact: {\n      type: 'boolean',\n      category: 'Layout',\n      label: 'Compact',\n      default: false,\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/patterns/message-bubble/types.d.ts

@@ -0,0 +1,40 @@
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';
+export type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+type MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;
+export interface MessageBubbleAvatar {
+    source?: ImageSourcePropType;
+    name?: string;
+    initials?: string;
+    label?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    tone?: ZoraTone;
+}
+export interface MessageBubbleAuthor {
+    name?: React.ReactNode;
+    avatar?: MessageBubbleAvatar;
+}
+export interface MessageBubbleProps extends ZoraBaseProps {
+    direction?: MessageBubbleDirection;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    author?: MessageBubbleAuthor;
+    timestamp?: React.ReactNode;
+    meta?: React.ReactNode;
+    status?: MessageBubbleStatusContent;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    footer?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/message-bubble/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AACvF,KAAK,0BAA0B,GAAG,mBAAmB,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEzF,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,MAAM,WAAW,kBAAmB,SAAQ,aAAa;IACvD,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/patterns/message-bubble/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/patterns/message-bubble/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/message-bubble/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport type { AvatarShape, AvatarSize } from '../../components/avatar';\nimport type { ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport type MessageBubbleDirection = 'incoming' | 'outgoing' | 'system';\nexport type MessageBubbleStatus = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';\ntype MessageBubbleStatusContent = MessageBubbleStatus | Exclude<React.ReactNode, string>;\n\nexport interface MessageBubbleAvatar {\n  source?: ImageSourcePropType;\n  name?: string;\n  initials?: string;\n  label?: string;\n  size?: AvatarSize;\n  shape?: AvatarShape;\n  tone?: ZoraTone;\n}\n\nexport interface MessageBubbleAuthor {\n  name?: React.ReactNode;\n  avatar?: MessageBubbleAvatar;\n}\n\nexport interface MessageBubbleProps extends ZoraBaseProps {\n  direction?: MessageBubbleDirection;\n  text?: React.ReactNode;\n  children?: React.ReactNode;\n  author?: MessageBubbleAuthor;\n  timestamp?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: MessageBubbleStatusContent;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  footer?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  compact?: boolean;\n  accessibilityLabel?: string;\n  onPress?: () => void;\n}\n"]}

package/dist/patterns/notice/meta.d.ts

@@ -2,7 +2,7 @@ export declare const noticeMeta: {
     readonly name: "Notice";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Notice";
         readonly defaultProps: {

package/dist/patterns/panel/meta.d.ts

@@ -2,7 +2,7 @@ export declare const panelMeta: {
     readonly name: "Panel";
     readonly category: "pattern";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Panel";
         readonly defaultProps: {

package/dist/patterns/post-card/meta.d.ts

@@ -3,7 +3,7 @@ export declare const postCardMeta: {
     readonly category: "pattern";
     readonly description: "Social/content post card with author identity, body, media, actions, and comment previews.";
     readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard"];
+    readonly allowedChildren: readonly ["Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
     readonly blueprint: {
         readonly label: "Post card";
         readonly icon: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {

package/src/index.ts

@@ -163,6 +163,8 @@ export type {
   SignUpFormValues,
 } from './patterns/auth';
 export { ForgotPasswordForm, OtpForm, SignInForm, SignUpForm } from './patterns/auth';
+export type { ChatListAvatar, ChatListItemProps } from './patterns/chat-list-item';
+export { ChatListItem } from './patterns/chat-list-item';
 export type {
   CollectionEditorProps,
   CollectionEditorRenderItemProps,
@@ -201,6 +203,14 @@ export type {
   ListSectionProps,
 } from './patterns/list';
 export { List, ListRow, ListSection } from './patterns/list';
+export type {
+  MessageBubbleAuthor,
+  MessageBubbleAvatar,
+  MessageBubbleDirection,
+  MessageBubbleProps,
+  MessageBubbleStatus,
+} from './patterns/message-bubble';
+export { MessageBubble } from './patterns/message-bubble';
 export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';

package/src/metadata/allowedChildren.ts

@@ -17,6 +17,8 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SectionHeader',
   'SettingsRow',
   'PostCard',
+  'ChatListItem',
+  'MessageBubble',
 ] as const;
 
 export const PAGE_SECTION_ALLOWED_CHILDREN = [...CONTAINER_ALLOWED_CHILDREN] as const;

package/src/metadata/componentMeta.test.ts

@@ -141,6 +141,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Text',
       'Heading',
       'Divider',
+      'ChatListItem',
     ]);
 
     const expectedContainerNodes = new Set([
@@ -152,6 +153,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Panel',
       'Notice',
       'PostCard',
+      'MessageBubble',
       'Box',
       'Stack',
       'Grid',

package/src/metadata/componentMeta.ts

@@ -43,6 +43,7 @@ import {
   signInFormMeta,
   signUpFormMeta,
 } from '../patterns/auth/meta';
+import { chatListItemMeta } from '../patterns/chat-list-item/meta';
 import { collectionEditorMeta } from '../patterns/collection-editor/meta';
 import { confirmDialogMeta } from '../patterns/confirm-dialog/meta';
 import { disclosureSectionMeta } from '../patterns/disclosure-section/meta';
@@ -53,6 +54,7 @@ import { imagePreviewMeta } from '../patterns/image-preview/meta';
 import { imageUploadFieldMeta } from '../patterns/image-upload-field/meta';
 import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
+import { messageBubbleMeta } from '../patterns/message-bubble/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
 import { postCardMeta } from '../patterns/post-card/meta';
@@ -119,6 +121,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   OtpForm: otpFormMeta,
   SignInForm: signInFormMeta,
   SignUpForm: signUpFormMeta,
+  ChatListItem: chatListItemMeta,
   CollectionEditor: collectionEditorMeta,
   ConfirmDialog: confirmDialogMeta,
   DisclosureSection: disclosureSectionMeta,
@@ -131,6 +134,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   List: listMeta,
   ListRow: listRowMeta,
   ListSection: listSectionMeta,
+  MessageBubble: messageBubbleMeta,
   Notice: noticeMeta,
   Panel: panelMeta,
   PostCard: postCardMeta,

package/src/patterns/chat-list-item/ChatListItem.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../metadata';
+
+describe('ChatListItem', () => {
+  test('is registered as a public ZORA pattern', () => {
+    expect(ZORA_COMPONENT_META.ChatListItem?.name).toBe('ChatListItem');
+    expect(ZORA_COMPONENT_META.ChatListItem?.category).toBe('pattern');
+    expect(ZORA_COMPONENT_META.ChatListItem?.directManifestNode).toBe(true);
+  });
+});

package/src/patterns/chat-list-item/ChatListItem.tsx

@@ -0,0 +1,219 @@
+import { ButtonBase } from '@ankhorage/surface';
+import React from 'react';
+
+import { Avatar } from '../../components/avatar';
+import { Badge } from '../../components/badge';
+import { Text } from '../../components/text';
+import { Box, Inline, Stack } from '../../foundation';
+import { useZoraTheme } from '../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import type { ChatListAvatar, ChatListItemProps } from './types';
+
+function resolveAvatarName({
+  avatar,
+  title,
+}: {
+  avatar: ChatListAvatar | undefined;
+  title: React.ReactNode;
+}): string | undefined {
+  if (avatar?.name) {
+    return avatar.name;
+  }
+
+  return typeof title === 'string' ? title : undefined;
+}
+
+function resolvePadding(compact: boolean) {
+  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };
+}
+
+function resolveContainerStyles({
+  theme,
+  selected,
+  pressed,
+  hovered,
+  disabled,
+}: {
+  theme: ReturnType<typeof useZoraTheme>['theme'];
+  selected: boolean;
+  pressed: boolean;
+  hovered: boolean;
+  disabled: boolean;
+}) {
+  const borderColor = selected ? theme.semantics.border.focus : 'transparent';
+
+  return {
+    bg: pressed
+      ? theme.semantics.neutral.surfaceActive
+      : hovered
+        ? theme.semantics.neutral.surfaceHover
+        : selected
+          ? theme.semantics.neutral.surface
+          : 'transparent',
+    borderColor,
+    borderWidth: selected ? 1 : 0,
+    opacity: disabled ? 0.72 : 1,
+  };
+}
+
+function renderUnreadCount(unreadCount: React.ReactNode) {
+  if (unreadCount == null) {
+    return null;
+  }
+
+  return (
+    <Badge size="s" tone="primary">
+      {unreadCount}
+    </Badge>
+  );
+}
+
+function ChatListItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  testID,
+  title,
+  preview,
+  meta,
+  timestamp,
+  avatar,
+  leading,
+  trailing,
+  unread = false,
+  unreadCount,
+  selected = false,
+  disabled = false,
+  compact = false,
+  accessibilityLabel,
+  onPress,
+}: ChatListItemProps) {
+  const { theme } = useZoraTheme();
+  const padding = resolvePadding(compact);
+  const avatarName = resolveAvatarName({ avatar, title });
+  const isInteractive = Boolean(onPress);
+  const hasTimestamp = timestamp != null;
+  const hasPreview = preview != null;
+  const hasMeta = meta != null;
+  const hasTrailing = trailing != null;
+  const hasUnreadCount = unreadCount != null;
+  const hasSecondaryRow = hasPreview || hasMeta || hasUnreadCount || hasTrailing;
+
+  const content = ({ pressed, hovered }: { pressed: boolean; hovered: boolean }) => {
+    const styles = resolveContainerStyles({
+      theme,
+      selected,
+      pressed,
+      hovered,
+      disabled,
+    });
+
+    return (
+      <Box
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius="m"
+        style={{ opacity: styles.opacity }}
+      >
+        <Inline align="center" gap="m" wrap="nowrap">
+          {leading ?? (
+            <Avatar
+              initials={avatar?.initials}
+              label={avatar?.label ?? avatarName}
+              name={avatarName}
+              shape={avatar?.shape}
+              size={avatar?.size ?? (compact ? 's' : 'm')}
+              source={avatar?.source}
+              tone={avatar?.tone}
+            />
+          )}
+
+          <Box flex={1}>
+            <Stack gap="xxs">
+              <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
+                <Box flex={1}>
+                  <Text
+                    numberOfLines={1}
+                    tone={disabled ? 'muted' : 'default'}
+                    variant="bodySmall"
+                    weight={unread || selected ? 'semiBold' : 'medium'}
+                  >
+                    {title}
+                  </Text>
+                </Box>
+                {hasTimestamp ? (
+                  <Text
+                    numberOfLines={1}
+                    tone={unread ? 'primary' : 'subtle'}
+                    variant="caption"
+                    weight={unread ? 'semiBold' : 'regular'}
+                  >
+                    {timestamp}
+                  </Text>
+                ) : null}
+              </Inline>
+
+              {hasSecondaryRow ? (
+                <Inline align="center" gap="s" justify="space-between" wrap="nowrap">
+                  <Box flex={1}>
+                    <Stack gap="xxs">
+                      {hasPreview ? (
+                        <Text
+                          numberOfLines={1}
+                          tone={unread ? 'default' : 'muted'}
+                          variant="bodySmall"
+                          weight={unread ? 'medium' : 'regular'}
+                        >
+                          {preview}
+                        </Text>
+                      ) : null}
+                      {hasMeta ? (
+                        <Text numberOfLines={1} tone="subtle" variant="caption">
+                          {meta}
+                        </Text>
+                      ) : null}
+                    </Stack>
+                  </Box>
+
+                  {hasUnreadCount || hasTrailing ? (
+                    <Inline align="center" gap="s" wrap="nowrap">
+                      {renderUnreadCount(unreadCount)}
+                      {trailing}
+                    </Inline>
+                  ) : null}
+                </Inline>
+              ) : null}
+            </Stack>
+          </Box>
+        </Inline>
+      </Box>
+    );
+  };
+
+  if (!isInteractive) {
+    return <Box testID={testID}>{content({ pressed: false, hovered: false })}</Box>;
+  }
+
+  return (
+    <ButtonBase
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onPress={onPress}
+      radius="m"
+      testID={testID}
+    >
+      {(state) =>
+        content({
+          pressed: state.pressed,
+          hovered: state.hovered,
+        })
+      }
+    </ButtonBase>
+  );
+}
+
+export const ChatListItem = withZoraThemeScope(ChatListItemInner);

package/src/patterns/chat-list-item/index.ts

@@ -0,0 +1,2 @@
+export { ChatListItem } from './ChatListItem';
+export type { ChatListAvatar, ChatListItemProps } from './types';

package/src/patterns/chat-list-item/meta.ts

@@ -0,0 +1,74 @@
+import type { ZoraComponentMeta } from '../../metadata';
+
+export const chatListItemMeta = {
+  name: 'ChatListItem',
+  category: 'pattern',
+  description:
+    'Conversation preview row with avatar, title, preview text, timestamp, and unread state.',
+  directManifestNode: true,
+  allowedChildren: [],
+  blueprint: {
+    label: 'Chat list item',
+    icon: { name: 'chatbubble-outline' },
+    defaultProps: {
+      title: 'Ada Lovelace',
+      preview: 'Can you review the latest UI update?',
+      timestamp: '2m',
+      avatar: {
+        name: 'Ada Lovelace',
+      },
+    },
+  },
+  props: {
+    title: {
+      type: 'string',
+      category: 'Content',
+      label: 'Title',
+      default: 'Ada Lovelace',
+    },
+    preview: {
+      type: 'string',
+      category: 'Content',
+      label: 'Preview',
+    },
+    meta: {
+      type: 'string',
+      category: 'Content',
+      label: 'Meta',
+    },
+    timestamp: {
+      type: 'string',
+      category: 'Content',
+      label: 'Timestamp',
+    },
+    unread: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Unread',
+      default: false,
+    },
+    unreadCount: {
+      type: 'string',
+      category: 'State',
+      label: 'Unread count',
+    },
+    selected: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Selected',
+      default: false,
+    },
+    disabled: {
+      type: 'boolean',
+      category: 'State',
+      label: 'Disabled',
+      default: false,
+    },
+    compact: {
+      type: 'boolean',
+      category: 'Layout',
+      label: 'Compact',
+      default: false,
+    },
+  },
+} as const satisfies ZoraComponentMeta;