@ankhorage/zora 6.0.0 → 8.0.0

package/src/features/card/adapters/inbound/Card.tsx

@@ -0,0 +1,91 @@
+import { Card as SurfaceCard } from '@ankhorage/surface';
+import React from 'react';
+
+import { resolveCardVariant } from '../../../../internal/recipes';
+import { useZoraThemeRecipe } from '../../../../theme/useZoraThemeRecipe';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { CardProps } from '../../../../types/card';
+import { Box, Stack } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
+import { resolveCardThemeRecipe } from '../../utils/resolveCardThemeRecipe';
+/***
+ * Structured content container with built-in heading, description, actions, and footer slots.
+ *
+ * Use `Card` for reusable content blocks that should inherit ZORA spacing,
+ * radius, tone, and responsive header layout without hand-assembling primitives.
+ *
+ * @example Content card
+ * ```tsx
+ * <Card title="Project" description="Latest activity">...</Card>
+ * ```
+ */
+export const Card = withZoraThemeScope(CardInner);
+
+function CardInner({
+  themeId: _themeId,
+  mode: _mode,
+  children,
+  title,
+  description,
+  eyebrow,
+  actions,
+  footer,
+  tone,
+  compact,
+  padding,
+  radius,
+  onPress,
+  interactionPolicy,
+  ...props
+}: CardProps) {
+  const themeFields = useZoraThemeRecipe('Card');
+  const recipe = resolveCardThemeRecipe({ tone, compact, padding, radius, themeFields });
+  const hasHeader = [eyebrow, title, description, actions].some((item) => item != null);
+  const hasFooter = footer !== undefined;
+  const gap = recipe.compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !actions;
+  const passive = interactionPolicy === 'passive';
+
+  return (
+    <SurfaceCard
+      {...props}
+      onPress={isInteractive && !passive ? onPress : undefined}
+      p={recipe.padding}
+      radius={recipe.radius}
+      variant={resolveCardVariant(recipe.tone)}
+    >
+      <Stack gap={gap}>
+        {hasHeader ? (
+          <Stack
+            align={{ base: 'flex-start', md: 'center' }}
+            direction={{ base: 'column', md: 'row' }}
+            gap="m"
+            justify="space-between"
+          >
+            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+              <Stack gap="xs">
+                {eyebrow ? (
+                  <Text emphasis="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>
+                ) : null}
+                {title ? <Heading level={recipe.compact ? 4 : 3}>{title}</Heading> : null}
+                {description ? (
+                  <Text emphasis="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>
+        ) : null}
+
+        {children ? <Box>{children}</Box> : null}
+
+        {hasFooter ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </SurfaceCard>
+  );
+}

package/src/features/card/adapters/inbound/MediaCard.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { MediaCardProps } from '../../../../types/media-card';
+import { Box, Stack } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
+import { Card } from '../../public';
+/***
+ * Card layout with an optional media/header region and structured content slots.
+ */
+export const MediaCard = withZoraThemeScope(MediaCardInner);
+
+function resolveImageAspectRatio(
+  imageAspectRatio: NonNullable<MediaCardProps['imageAspectRatio']>,
+) {
+  if (!Number.isFinite(imageAspectRatio) || imageAspectRatio <= 0) {
+    return 16 / 9;
+  }
+
+  return imageAspectRatio;
+}
+
+function MediaCardInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  testID,
+  imageSource,
+  imageLabel,
+  image,
+  imageAspectRatio = 16 / 9,
+  title,
+  description,
+  eyebrow,
+  badges,
+  actions,
+  footer,
+  children,
+  tone = 'default',
+  compact = false,
+  onPress,
+}: MediaCardProps) {
+  const { theme } = useZoraTheme();
+  const gap = compact ? 's' : 'm';
+  const isInteractive = Boolean(onPress) && !actions;
+  const resolvedAspectRatio = resolveImageAspectRatio(imageAspectRatio);
+
+  const renderImage = () => {
+    if (image) {
+      return (
+        <Box radius="m" style={{ overflow: 'hidden' }}>
+          {image}
+        </Box>
+      );
+    }
+
+    if (!imageSource) {
+      return null;
+    }
+
+    return (
+      <Box bg={theme.semantics.neutral.surface} radius="m" style={{ overflow: 'hidden' }}>
+        <Box style={{ aspectRatio: resolvedAspectRatio, width: '100%' }}>
+          <Image
+            accessibilityLabel={imageLabel}
+            source={imageSource}
+            style={{ height: '100%', width: '100%' }}
+          />
+        </Box>
+      </Box>
+    );
+  };
+
+  const hasHeader = [eyebrow, title, description, badges, actions].some((item) => item != null);
+
+  return (
+    <Card
+      compact={compact}
+      interactionPolicy={interactionPolicy}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      tone={tone}
+    >
+      <Stack gap={gap}>
+        {renderImage()}
+
+        {hasHeader ? (
+          <Stack
+            align={{ base: 'flex-start', md: 'center' }}
+            direction={{ base: 'column', md: 'row' }}
+            gap="m"
+            justify="space-between"
+          >
+            <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
+              <Stack gap="xs">
+                {eyebrow ? (
+                  <Text emphasis="muted" variant="caption" weight="semiBold">
+                    {eyebrow}
+                  </Text>
+                ) : null}
+                <Stack gap="xs">
+                  <Heading level={compact ? 4 : 3}>{title}</Heading>
+                  {badges ? <Box>{badges}</Box> : null}
+                </Stack>
+                {description ? (
+                  <Text emphasis="muted" variant="bodySmall">
+                    {description}
+                  </Text>
+                ) : null}
+              </Stack>
+            </Box>
+            {actions ? <Box>{actions}</Box> : null}
+          </Stack>
+        ) : null}
+
+        {children ? <Box>{children}</Box> : null}
+        {footer ? <Box pt="xs">{footer}</Box> : null}
+      </Stack>
+    </Card>
+  );
+}

package/src/features/card/adapters/inbound/MetricCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import { Inline } from '../../../../foundation';
+import { resolveBadgeRecipe, resolveIconSize } from '../../../../internal/recipes';
+import { useZoraTheme } from '../../../../theme/useZoraTheme';
+import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
+import type { MetricCardProps } from '../../../../types/metric-card';
+import { Badge } from '../../../badge/public';
+import { Icon } from '../../../icon/public';
+import { Box, Stack } from '../../../layout/public';
+import { Heading } from '../../../typography/public';
+import { Text } from '../../../typography/public';
+import { Card } from '../../public';
+/***
+ * Highlights a key metric with label, value, and optional trend/actions.
+ */
+export const MetricCard = withZoraThemeScope(MetricCardInner);
+
+function MetricCardInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  testID,
+  label,
+  value,
+  description,
+  icon,
+  delta,
+  deltaColor = 'neutral',
+  actions,
+  tone = 'default',
+  compact = false,
+  onPress,
+}: MetricCardProps) {
+  const { theme } = useZoraTheme();
+  const isInteractive = Boolean(onPress) && !actions;
+
+  const badgeRecipe = resolveBadgeRecipe({ color: deltaColor, variant: 'soft', size: 's' });
+  const iconColor = theme.semantics.content.muted;
+
+  return (
+    <Card
+      compact={compact}
+      interactionPolicy={interactionPolicy}
+      onPress={isInteractive ? onPress : undefined}
+      testID={testID}
+      tone={tone}
+    >
+      <Stack gap={compact ? 's' : 'm'}>
+        <Inline align="flex-start" gap="m" justify="space-between">
+          <Stack flex={1} gap="xs">
+            <Inline align="center" gap="xs" wrap="wrap">
+              {icon ? <Icon {...icon} color={iconColor} size={resolveIconSize('s')} /> : null}
+              <Text emphasis="muted" variant="caption" weight="semiBold">
+                {label}
+              </Text>
+              {delta != null ? (
+                <Badge
+                  variant={badgeRecipe.variant}
+                  size={badgeRecipe.size}
+                  color={badgeRecipe.color}
+                >
+                  {delta}
+                </Badge>
+              ) : null}
+            </Inline>
+
+            <Heading level={compact ? 3 : 2}>{value}</Heading>
+
+            {description ? (
+              <Text emphasis="muted" variant="bodySmall">
+                {description}
+              </Text>
+            ) : null}
+          </Stack>
+
+          {actions ? <Box>{actions}</Box> : null}
+        </Inline>
+      </Stack>
+    </Card>
+  );
+}

package/src/features/card/adapters/inbound/PostCard.test.tsx

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

package/src/features/card/adapters/inbound/PostCard.tsx

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

package/src/features/card/adapters/inbound/ProductCard.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../../../metadata';
+
+describe('ProductCard', () => {
+  test('is registered as a public ZORA pattern', () => {
+    expect(ZORA_COMPONENT_META.ProductCard?.name).toBe('ProductCard');
+    expect(ZORA_COMPONENT_META.ProductCard?.category).toBe('pattern');
+    expect(ZORA_COMPONENT_META.ProductCard?.directManifestNode).toBe(true);
+    expect(ZORA_COMPONENT_META.ProductCard?.allowedChildren).toEqual([]);
+    expect(ZORA_COMPONENT_META.ProductCard?.requirements).toBeUndefined();
+  });
+
+  test('has correct event metadata', () => {
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.press).toBeDefined();
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.primaryAction).toBeDefined();
+    expect(ZORA_COMPONENT_META.ProductCard?.events?.secondaryAction).toBeDefined();
+  });
+});