@ankhorage/zora 1.4.8 → 1.4.9

package/dist/patterns/chat-list-item/ChatListItem.js.map

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

package/dist/patterns/chat-list-item/index.d.ts

@@ -0,0 +1,3 @@
+export { ChatListItem } from './ChatListItem';
+export type { ChatListAvatar, ChatListItemProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/chat-list-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/patterns/chat-list-item/index.js

@@ -0,0 +1,2 @@
+export { ChatListItem } from './ChatListItem';
+//# sourceMappingURL=index.js.map

package/dist/patterns/chat-list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { ChatListItem } from './ChatListItem';\nexport type { ChatListAvatar, ChatListItemProps } from './types';\n"]}

package/dist/patterns/chat-list-item/meta.d.ts

@@ -0,0 +1,74 @@
+export declare const chatListItemMeta: {
+    readonly name: "ChatListItem";
+    readonly category: "pattern";
+    readonly description: "Conversation preview row with avatar, title, preview text, timestamp, and unread state.";
+    readonly directManifestNode: true;
+    readonly allowedChildren: readonly [];
+    readonly blueprint: {
+        readonly label: "Chat list item";
+        readonly icon: {
+            readonly name: "chatbubble-outline";
+        };
+        readonly defaultProps: {
+            readonly title: "Ada Lovelace";
+            readonly preview: "Can you review the latest UI update?";
+            readonly timestamp: "2m";
+            readonly avatar: {
+                readonly name: "Ada Lovelace";
+            };
+        };
+    };
+    readonly props: {
+        readonly title: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Title";
+            readonly default: "Ada Lovelace";
+        };
+        readonly preview: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Preview";
+        };
+        readonly meta: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Meta";
+        };
+        readonly timestamp: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Timestamp";
+        };
+        readonly unread: {
+            readonly type: "boolean";
+            readonly category: "State";
+            readonly label: "Unread";
+            readonly default: false;
+        };
+        readonly unreadCount: {
+            readonly type: "string";
+            readonly category: "State";
+            readonly label: "Unread count";
+        };
+        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/chat-list-item/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuES,CAAC"}

package/dist/patterns/chat-list-item/meta.js

@@ -0,0 +1,72 @@
+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,
+        },
+    },
+};
+//# sourceMappingURL=meta.js.map

package/dist/patterns/chat-list-item/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,SAAS;IACnB,WAAW,EACT,yFAAyF;IAC3F,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE;QACT,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,EAAE,IAAI,EAAE,oBAAoB,EAAE;QACpC,YAAY,EAAE;YACZ,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,sCAAsC;YAC/C,SAAS,EAAE,IAAI;YACf,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;aACrB;SACF;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,cAAc;SACxB;QACD,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,SAAS;SACjB;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,MAAM,EAAE;YACN,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,KAAK;SACf;QACD,WAAW,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,cAAc;SACtB;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';\n\nexport const chatListItemMeta = {\n  name: 'ChatListItem',\n  category: 'pattern',\n  description:\n    'Conversation preview row with avatar, title, preview text, timestamp, and unread state.',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: {\n    label: 'Chat list item',\n    icon: { name: 'chatbubble-outline' },\n    defaultProps: {\n      title: 'Ada Lovelace',\n      preview: 'Can you review the latest UI update?',\n      timestamp: '2m',\n      avatar: {\n        name: 'Ada Lovelace',\n      },\n    },\n  },\n  props: {\n    title: {\n      type: 'string',\n      category: 'Content',\n      label: 'Title',\n      default: 'Ada Lovelace',\n    },\n    preview: {\n      type: 'string',\n      category: 'Content',\n      label: 'Preview',\n    },\n    meta: {\n      type: 'string',\n      category: 'Content',\n      label: 'Meta',\n    },\n    timestamp: {\n      type: 'string',\n      category: 'Content',\n      label: 'Timestamp',\n    },\n    unread: {\n      type: 'boolean',\n      category: 'State',\n      label: 'Unread',\n      default: false,\n    },\n    unreadCount: {\n      type: 'string',\n      category: 'State',\n      label: 'Unread count',\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/chat-list-item/types.d.ts

@@ -0,0 +1,31 @@
+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 interface ChatListAvatar {
+    source?: ImageSourcePropType;
+    name?: string;
+    initials?: string;
+    label?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    tone?: ZoraTone;
+}
+export interface ChatListItemProps extends ZoraBaseProps {
+    title: React.ReactNode;
+    preview?: React.ReactNode;
+    meta?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    avatar?: ChatListAvatar;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    unread?: boolean;
+    unreadCount?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    compact?: boolean;
+    accessibilityLabel?: string;
+    onPress?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/chat-list-item/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/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,WAAW,cAAc;IAC7B,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,iBAAkB,SAAQ,aAAa;IACtD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,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/chat-list-item/types.js

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

package/dist/patterns/chat-list-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/chat-list-item/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 interface ChatListAvatar {\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 ChatListItemProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  preview?: React.ReactNode;\n  meta?: React.ReactNode;\n  timestamp?: React.ReactNode;\n  avatar?: ChatListAvatar;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  unread?: boolean;\n  unreadCount?: 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"];
     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"];
     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"];
     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.9",
   "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,

package/src/metadata/allowedChildren.ts

@@ -17,6 +17,7 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'SectionHeader',
   'SettingsRow',
   'PostCard',
+  'ChatListItem',
 ] 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([

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';
@@ -119,6 +120,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   OtpForm: otpFormMeta,
   SignInForm: signInFormMeta,
   SignUpForm: signUpFormMeta,
+  ChatListItem: chatListItemMeta,
   CollectionEditor: collectionEditorMeta,
   ConfirmDialog: confirmDialogMeta,
   DisclosureSection: disclosureSectionMeta,

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;