@ankhorage/zora 1.4.7 → 1.4.9

package/dist/patterns/post-card/PostCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostCard.js","sourceRoot":"","sources":["../../../src/patterns/post-card/PostCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image as ReactNativeImage } from 'react-native';\n\nimport { Avatar } from '../../components/avatar';\nimport { Button } from '../../components/button';\nimport { Card } from '../../components/card';\nimport { Text } from '../../components/text';\nimport { Box, Divider, Inline, Stack } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type {\n  PostAction,\n  PostAuthor,\n  PostCardMedia,\n  PostCardProps,\n  PostCommentPreview,\n} from './types';\n\nfunction resolveAuthorName(author: PostAuthor): string | undefined {\n  return typeof author.name === 'string' ? author.name : author.avatar?.name;\n}\n\nfunction resolveMediaAspectRatio(aspectRatio: number | undefined): number {\n  if (aspectRatio === undefined || !Number.isFinite(aspectRatio) || aspectRatio <= 0) {\n    return 16 / 9;\n  }\n\n  return aspectRatio;\n}\n\nfunction isPostCardMediaList(\n  media: NonNullable<PostCardProps['media']>,\n): media is readonly PostCardMedia[] {\n  return Array.isArray(media);\n}\n\nfunction normalizeMedia(media: PostCardProps['media']): readonly PostCardMedia[] {\n  if (!media) {\n    return [];\n  }\n\n  if (isPostCardMediaList(media)) {\n    return media;\n  }\n\n  return [media];\n}\n\nfunction PostCardAuthor({ author, compact = false }: { author: PostAuthor; compact?: boolean }) {\n  const avatarName = resolveAuthorName(author);\n  const { avatar } = author;\n\n  return (\n    <Inline align=\"center\" gap=\"s\" wrap=\"nowrap\">\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      <Box flex={1}>\n        <Stack gap=\"xxs\">\n          <Text variant=\"bodySmall\" weight=\"semiBold\">\n            {author.name}\n          </Text>\n          {author.subtitle ? (\n            <Text tone=\"muted\" variant=\"caption\">\n              {author.subtitle}\n            </Text>\n          ) : null}\n        </Stack>\n      </Box>\n    </Inline>\n  );\n}\n\nfunction PostCardMediaItem({ media }: { media: PostCardMedia }) {\n  const { theme } = useZoraTheme();\n  const aspectRatio = resolveMediaAspectRatio(media.aspectRatio);\n\n  if (!('source' in media)) {\n    return (\n      <Box radius=\"m\" style={{ overflow: 'hidden' }}>\n        {media.children}\n      </Box>\n    );\n  }\n\n  return (\n    <Box bg={theme.semantics.neutral.surface} radius=\"m\" style={{ overflow: 'hidden' }}>\n      <Box style={{ aspectRatio, width: '100%' }}>\n        <ReactNativeImage\n          accessibilityLabel={media.label}\n          source={media.source}\n          style={{ height: '100%', width: '100%' }}\n        />\n      </Box>\n    </Box>\n  );\n}\n\nfunction PostActionLabel({ action }: { action: PostAction }) {\n  if (!action.count) {\n    return <>{action.label}</>;\n  }\n\n  return (\n    <>\n      {action.label} {action.count}\n    </>\n  );\n}\n\nfunction PostCardActions({ actions }: { actions: readonly PostAction[] }) {\n  if (actions.length === 0) {\n    return null;\n  }\n\n  return (\n    <Inline align=\"center\" gap=\"s\" wrap=\"wrap\">\n      {actions.map((action) => (\n        <Button\n          key={action.id}\n          disabled={action.disabled}\n          emphasis={action.selected ? 'soft' : 'ghost'}\n          leadingIcon={action.icon}\n          onPress={action.onPress}\n          size=\"s\"\n          tone={action.selected ? 'primary' : 'neutral'}\n        >\n          <PostActionLabel action={action} />\n        </Button>\n      ))}\n    </Inline>\n  );\n}\n\nfunction PostCommentPreviewItem({ comment }: { comment: PostCommentPreview }) {\n  return (\n    <Inline align=\"flex-start\" gap=\"s\" wrap=\"nowrap\">\n      {comment.author ? <PostCardAuthor author={comment.author} compact /> : null}\n      <Box flex={1}>\n        <Stack gap=\"xxs\">\n          <Text variant=\"bodySmall\">{comment.text}</Text>\n          {comment.meta ? (\n            <Text tone=\"subtle\" variant=\"caption\">\n              {comment.meta}\n            </Text>\n          ) : null}\n          {comment.action ? <Box>{comment.action}</Box> : null}\n        </Stack>\n      </Box>\n    </Inline>\n  );\n}\n\nfunction PostCardComments({ comments }: { comments: readonly PostCommentPreview[] }) {\n  if (comments.length === 0) {\n    return null;\n  }\n\n  return (\n    <Stack gap=\"s\">\n      {comments.map((comment) => (\n        <PostCommentPreviewItem key={comment.id} comment={comment} />\n      ))}\n    </Stack>\n  );\n}\n\nfunction PostCardInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  author,\n  text,\n  children,\n  media,\n  actions = [],\n  comments = [],\n  headerAction,\n  footer,\n  tone = 'default',\n  compact = false,\n  onPress,\n}: PostCardProps) {\n  const mediaItems = normalizeMedia(media);\n  const gap = compact ? 's' : 'm';\n  const isInteractive = Boolean(onPress) && !headerAction;\n  const hasBody = text != null || children != null || mediaItems.length > 0;\n  const hasEngagement = actions.length > 0 || comments.length > 0;\n\n  return (\n    <Card\n      compact={compact}\n      onPress={isInteractive ? onPress : undefined}\n      testID={testID}\n      tone={tone}\n    >\n      <Stack gap={gap}>\n        <Inline align=\"center\" gap=\"m\" justify=\"space-between\" wrap=\"nowrap\">\n          <Box flex={1}>\n            <PostCardAuthor author={author} compact={compact} />\n          </Box>\n          {headerAction ? <Box>{headerAction}</Box> : null}\n        </Inline>\n\n        {hasBody ? (\n          <Stack gap={gap}>\n            {text ? <Text variant=\"body\">{text}</Text> : null}\n            {children ? <Box>{children}</Box> : null}\n            {mediaItems.length > 0 ? (\n              <Stack gap=\"s\">\n                {mediaItems.map((item, index) => (\n                  <PostCardMediaItem key={`${index}`} media={item} />\n                ))}\n              </Stack>\n            ) : null}\n          </Stack>\n        ) : null}\n\n        {hasEngagement ? <Divider /> : null}\n        <PostCardActions actions={actions} />\n        <PostCardComments comments={comments} />\n        {footer ? <Box pt=\"xs\">{footer}</Box> : null}\n      </Stack>\n    </Card>\n  );\n}\n\nexport const PostCard = withZoraThemeScope(PostCardInner);\n"]}

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

@@ -0,0 +1,3 @@
+export { PostCard } from './PostCard';
+export type { PostAction, PostAuthor, PostAuthorAvatar, PostCardMedia, PostCardProps, PostCommentPreview, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/post-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/patterns/post-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/dist/patterns/post-card/index.js

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

package/dist/patterns/post-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/patterns/post-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { PostCard } from './PostCard';\nexport type {\n  PostAction,\n  PostAuthor,\n  PostAuthorAvatar,\n  PostCardMedia,\n  PostCardProps,\n  PostCommentPreview,\n} from './types';\n"]}

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

@@ -0,0 +1,64 @@
+export declare const postCardMeta: {
+    readonly name: "PostCard";
+    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", "ChatListItem"];
+    readonly blueprint: {
+        readonly label: "Post card";
+        readonly icon: {
+            readonly name: "chatbubble-ellipses-outline";
+        };
+        readonly defaultProps: {
+            readonly author: {
+                readonly name: "Ada Lovelace";
+                readonly subtitle: "@ada · 2h";
+                readonly avatar: {
+                    readonly name: "Ada Lovelace";
+                };
+            };
+            readonly text: "Share an update, image, or announcement with a reusable ZORA PostCard.";
+        };
+    };
+    readonly props: {
+        readonly author: {
+            readonly type: "array";
+            readonly category: "Content";
+            readonly label: "Author";
+            readonly itemSchema: readonly [{
+                readonly key: "name";
+                readonly schema: {
+                    readonly type: "string";
+                    readonly category: "Content";
+                    readonly label: "Name";
+                };
+            }, {
+                readonly key: "subtitle";
+                readonly schema: {
+                    readonly type: "string";
+                    readonly category: "Content";
+                    readonly label: "Subtitle";
+                };
+            }];
+        };
+        readonly text: {
+            readonly type: "string";
+            readonly category: "Content";
+            readonly label: "Text";
+        };
+        readonly compact: {
+            readonly type: "boolean";
+            readonly category: "Layout";
+            readonly label: "Compact";
+            readonly default: false;
+        };
+        readonly tone: {
+            readonly type: "enum";
+            readonly category: "Style";
+            readonly label: "Tone";
+            readonly enum: readonly ["default", "subtle", "outline"];
+            readonly default: "default";
+        };
+    };
+};
+//# sourceMappingURL=meta.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/patterns/post-card/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEa,CAAC"}

package/dist/patterns/post-card/meta.js

@@ -0,0 +1,66 @@
+import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+export const postCardMeta = {
+    name: 'PostCard',
+    category: 'pattern',
+    description: 'Social/content post card with author identity, body, media, actions, and comment previews.',
+    directManifestNode: true,
+    allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],
+    blueprint: {
+        label: 'Post card',
+        icon: { name: 'chatbubble-ellipses-outline' },
+        defaultProps: {
+            author: {
+                name: 'Ada Lovelace',
+                subtitle: '@ada · 2h',
+                avatar: {
+                    name: 'Ada Lovelace',
+                },
+            },
+            text: 'Share an update, image, or announcement with a reusable ZORA PostCard.',
+        },
+    },
+    props: {
+        author: {
+            type: 'array',
+            category: 'Content',
+            label: 'Author',
+            itemSchema: [
+                {
+                    key: 'name',
+                    schema: {
+                        type: 'string',
+                        category: 'Content',
+                        label: 'Name',
+                    },
+                },
+                {
+                    key: 'subtitle',
+                    schema: {
+                        type: 'string',
+                        category: 'Content',
+                        label: 'Subtitle',
+                    },
+                },
+            ],
+        },
+        text: {
+            type: 'string',
+            category: 'Content',
+            label: 'Text',
+        },
+        compact: {
+            type: 'boolean',
+            category: 'Layout',
+            label: 'Compact',
+            default: false,
+        },
+        tone: {
+            type: 'enum',
+            category: 'Style',
+            label: 'Tone',
+            enum: ['default', 'subtle', 'outline'],
+            default: 'default',
+        },
+    },
+};
+//# sourceMappingURL=meta.js.map

package/dist/patterns/post-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/patterns/post-card/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,SAAS;IACnB,WAAW,EACT,4FAA4F;IAC9F,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,0BAA0B,CAAC;IAChD,SAAS,EAAE;QACT,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,EAAE,IAAI,EAAE,6BAA6B,EAAE;QAC7C,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE,WAAW;gBACrB,MAAM,EAAE;oBACN,IAAI,EAAE,cAAc;iBACrB;aACF;YACD,IAAI,EAAE,wEAAwE;SAC/E;KACF;IACD,KAAK,EAAE;QACL,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,QAAQ;YACf,UAAU,EAAE;gBACV;oBACE,GAAG,EAAE,MAAM;oBACX,MAAM,EAAE;wBACN,IAAI,EAAE,QAAQ;wBACd,QAAQ,EAAE,SAAS;wBACnB,KAAK,EAAE,MAAM;qBACd;iBACF;gBACD;oBACE,GAAG,EAAE,UAAU;oBACf,MAAM,EAAE;wBACN,IAAI,EAAE,QAAQ;wBACd,QAAQ,EAAE,SAAS;wBACnB,KAAK,EAAE,UAAU;qBAClB;iBACF;aACF;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,KAAK;SACf;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,OAAO;YACjB,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC;YACtC,OAAO,EAAE,SAAS;SACnB;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const postCardMeta = {\n  name: 'PostCard',\n  category: 'pattern',\n  description:\n    'Social/content post card with author identity, body, media, actions, and comment previews.',\n  directManifestNode: true,\n  allowedChildren: [...CONTAINER_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Post card',\n    icon: { name: 'chatbubble-ellipses-outline' },\n    defaultProps: {\n      author: {\n        name: 'Ada Lovelace',\n        subtitle: '@ada · 2h',\n        avatar: {\n          name: 'Ada Lovelace',\n        },\n      },\n      text: 'Share an update, image, or announcement with a reusable ZORA PostCard.',\n    },\n  },\n  props: {\n    author: {\n      type: 'array',\n      category: 'Content',\n      label: 'Author',\n      itemSchema: [\n        {\n          key: 'name',\n          schema: {\n            type: 'string',\n            category: 'Content',\n            label: 'Name',\n          },\n        },\n        {\n          key: 'subtitle',\n          schema: {\n            type: 'string',\n            category: 'Content',\n            label: 'Subtitle',\n          },\n        },\n      ],\n    },\n    text: {\n      type: 'string',\n      category: 'Content',\n      label: 'Text',\n    },\n    compact: {\n      type: 'boolean',\n      category: 'Layout',\n      label: 'Compact',\n      default: false,\n    },\n    tone: {\n      type: 'enum',\n      category: 'Style',\n      label: 'Tone',\n      enum: ['default', 'subtle', 'outline'],\n      default: 'default',\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

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

@@ -0,0 +1,64 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
+import type React from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import type { AvatarShape, AvatarSize } from '../../components/avatar';
+import type { ZoraCardTone, ZoraTone } from '../../internal/recipes';
+import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
+export interface PostAuthorAvatar {
+    source?: ImageSourcePropType;
+    name?: string;
+    initials?: string;
+    label?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    tone?: ZoraTone;
+}
+export interface PostAuthor {
+    name: React.ReactNode;
+    subtitle?: React.ReactNode;
+    avatar?: PostAuthorAvatar;
+}
+interface PostCardSourceMedia {
+    source: ImageSourcePropType;
+    label: string;
+    aspectRatio?: number;
+    children?: never;
+}
+interface PostCardCustomMedia {
+    children: React.ReactNode;
+    label?: string;
+    aspectRatio?: number;
+    source?: never;
+}
+export type PostCardMedia = PostCardSourceMedia | PostCardCustomMedia;
+export interface PostAction {
+    id: string;
+    label: string;
+    icon?: ButtonIconSpec;
+    count?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+}
+export interface PostCommentPreview {
+    id: string;
+    author?: PostAuthor;
+    text: React.ReactNode;
+    meta?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export interface PostCardProps extends ZoraBaseProps {
+    author: PostAuthor;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
+    media?: PostCardMedia | readonly PostCardMedia[];
+    actions?: readonly PostAction[];
+    comments?: readonly PostCommentPreview[];
+    headerAction?: React.ReactNode;
+    footer?: React.ReactNode;
+    tone?: ZoraCardTone;
+    compact?: boolean;
+    onPress?: () => void;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/patterns/post-card/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/patterns/post-card/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACzD,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,YAAY,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,gBAAgB;IAC/B,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,UAAU;IACzB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,UAAU,mBAAmB;IAC3B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAEtE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,aAAa;IAClD,MAAM,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,aAAa,EAAE,CAAC;IACjD,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACzC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/patterns/post-card/types.js

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

package/dist/patterns/post-card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/patterns/post-card/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ButtonIconSpec } from '@ankhorage/surface';\nimport type React from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport type { AvatarShape, AvatarSize } from '../../components/avatar';\nimport type { ZoraCardTone, ZoraTone } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PostAuthorAvatar {\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 PostAuthor {\n  name: React.ReactNode;\n  subtitle?: React.ReactNode;\n  avatar?: PostAuthorAvatar;\n}\n\ninterface PostCardSourceMedia {\n  source: ImageSourcePropType;\n  label: string;\n  aspectRatio?: number;\n  children?: never;\n}\n\ninterface PostCardCustomMedia {\n  children: React.ReactNode;\n  label?: string;\n  aspectRatio?: number;\n  source?: never;\n}\n\nexport type PostCardMedia = PostCardSourceMedia | PostCardCustomMedia;\n\nexport interface PostAction {\n  id: string;\n  label: string;\n  icon?: ButtonIconSpec;\n  count?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n  onPress?: () => void;\n}\n\nexport interface PostCommentPreview {\n  id: string;\n  author?: PostAuthor;\n  text: React.ReactNode;\n  meta?: React.ReactNode;\n  action?: React.ReactNode;\n}\n\nexport interface PostCardProps extends ZoraBaseProps {\n  author: PostAuthor;\n  text?: React.ReactNode;\n  children?: React.ReactNode;\n  media?: PostCardMedia | readonly PostCardMedia[];\n  actions?: readonly PostAction[];\n  comments?: readonly PostCommentPreview[];\n  headerAction?: React.ReactNode;\n  footer?: React.ReactNode;\n  tone?: ZoraCardTone;\n  compact?: boolean;\n  onPress?: () => void;\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "1.4.7",
+  "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,
@@ -205,6 +207,15 @@ export type { NoticeProps } from './patterns/notice';
 export { Notice } from './patterns/notice';
 export type { PanelProps } from './patterns/panel';
 export { Panel } from './patterns/panel';
+export type {
+  PostAction,
+  PostAuthor,
+  PostAuthorAvatar,
+  PostCardMedia,
+  PostCardProps,
+  PostCommentPreview,
+} from './patterns/post-card';
+export { PostCard } from './patterns/post-card';
 export type {
   ResponsivePanelDesktopMode,
   ResponsivePanelMobileMode,

package/src/metadata/allowedChildren.ts

@@ -16,6 +16,8 @@ export const CONTAINER_ALLOWED_CHILDREN = [
   'EmptyState',
   '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([
@@ -151,6 +152,7 @@ describe('ZORA_COMPONENT_META invariants', () => {
       'Card',
       'Panel',
       'Notice',
+      'PostCard',
       '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';
@@ -55,6 +56,7 @@ import { inspectorFieldMeta } from '../patterns/inspector-field/meta';
 import { listMeta, listRowMeta, listSectionMeta } from '../patterns/list/meta';
 import { noticeMeta } from '../patterns/notice/meta';
 import { panelMeta } from '../patterns/panel/meta';
+import { postCardMeta } from '../patterns/post-card/meta';
 import { responsivePanelMeta } from '../patterns/responsive-panel/meta';
 import { sectionHeaderMeta } from '../patterns/section-header/meta';
 import { selectableItemMeta, selectionProviderMeta } from '../patterns/selection/meta';
@@ -118,6 +120,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   OtpForm: otpFormMeta,
   SignInForm: signInFormMeta,
   SignUpForm: signUpFormMeta,
+  ChatListItem: chatListItemMeta,
   CollectionEditor: collectionEditorMeta,
   ConfirmDialog: confirmDialogMeta,
   DisclosureSection: disclosureSectionMeta,
@@ -132,6 +135,7 @@ export const ZORA_COMPONENT_META: ZoraComponentMetaRegistry = {
   ListSection: listSectionMeta,
   Notice: noticeMeta,
   Panel: panelMeta,
+  PostCard: postCardMeta,
   ResponsivePanel: responsivePanelMeta,
   SectionHeader: sectionHeaderMeta,
   SelectableItem: selectableItemMeta,

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';