@ankhorage/zora 18.0.1 → 19.0.1

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

@@ -1,10 +1,10 @@
 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 { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';

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

@@ -1,12 +1,13 @@
 import React from 'react';
 
-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 { resolveBadgeRecipe } from '../../../badge/utils/resolveBadgeRecipe';
 import { Icon } from '../../../icon/public';
+import { resolveIconSize } from '../../../icon/utils/resolveIconSize';
 import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';

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

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import { ZORA_COMPONENT_META } from '../../../../metadata';
+import { ZORA_COMPONENT_META } from '../../../authoring';
 
 describe('PostCard', () => {
   test('is registered as a public ZORA pattern', () => {

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { Image as ReactNativeImage } from 'react-native';
 
-import { useZoraTheme } from '../../../../theme/useZoraTheme';
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
 import type {
   PostAction,
   PostAuthor,
@@ -13,6 +11,8 @@ import type {
 import { Avatar } from '../../../avatar/public';
 import { Button } from '../../../button/public';
 import { Divider, View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';
 /***

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

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 
-import { ZORA_COMPONENT_META } from '../../../../metadata';
+import { ZORA_COMPONENT_META } from '../../../authoring';
 
 describe('ProductCard', () => {
   test('is registered as a public ZORA pattern', () => {

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

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { withZoraThemeScope } from '../../../../theme/withZoraThemeScope';
-import type { ZoraBaseProps } from '../../../../theme/ZoraBaseProps';
+import type { ZoraBaseProps } from '../../../../types/base';
 import type { ProductCardProps } from '../../../../types/product-card';
 import { Badge } from '../../../badge/public';
 import { Button } from '../../../button/public';
 import { Image } from '../../../image/public';
 import { Divider, View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { Heading } from '../../../typography/public';
 import { Text } from '../../../typography/public';
 import { Card } from '../../public';

package/src/features/card/cardMeta.ts

@@ -1,6 +1,6 @@
-import { COMPONENT_THEME_AUTHORING } from '../../constants';
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
+import { COMPONENT_THEME_AUTHORING } from '../authoring/constants';
 
 export const cardMeta = {
   name: 'Card',

package/src/features/card/mediaCardMeta.ts

@@ -1,5 +1,5 @@
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-import type { ZoraComponentMeta } from '../../metadata/types';
+import type { ZoraComponentMeta } from '../../types/authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
 
 export const mediaCardMeta = {
   name: 'MediaCard',

package/src/features/card/metricCardMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata/types';
+import type { ZoraComponentMeta } from '../../types/authoring';
 
 export const metricCardMeta = {
   name: 'MetricCard',

package/src/features/card/postCardMeta.ts

@@ -1,5 +1,5 @@
-import type { ZoraComponentMeta } from '../../metadata';
-import { CONTAINER_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
+import type { ZoraComponentMeta } from '../authoring';
+import { CONTAINER_ALLOWED_CHILDREN } from '../authoring/allowedChildren';
 
 export const postCardMeta = {
   name: 'PostCard',

package/src/features/card/productCardMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraComponentMeta } from '../../metadata';
+import type { ZoraComponentMeta } from '../authoring';
 
 export const productCardMeta = {
   name: 'ProductCard',

package/src/features/card/utils/resolveCardThemeRecipe.ts

@@ -1,6 +1,6 @@
 import type { ThemeRecipeOverrideValue } from '@ankhorage/contracts';
 
-import type { ZoraCardTone } from '../../../internal/recipes';
+import type { ZoraCardTone } from '../../../types/card';
 
 export function resolveCardThemeRecipe(input: {
   readonly tone?: ZoraCardTone;

package/src/features/card/utils/resolveCardVariant.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'bun:test';
+
+import { resolveCardVariant } from './resolveCardVariant';
+
+describe('resolveCardVariant', () => {
+  test('maps card tones to Surface variants', () => {
+    expect(resolveCardVariant()).toBe('raised');
+    expect(resolveCardVariant('outline')).toBe('outline');
+    expect(resolveCardVariant('subtle')).toBe('subtle');
+  });
+});

package/src/features/card/utils/resolveCardVariant.ts

@@ -0,0 +1,15 @@
+import type { CardProps as SurfaceCardProps } from '@ankhorage/surface';
+
+import type { ZoraCardTone } from '../../../types/card';
+
+export function resolveCardVariant(tone: ZoraCardTone = 'default'): SurfaceCardProps['variant'] {
+  switch (tone) {
+    case 'outline':
+      return 'outline';
+    case 'subtle':
+      return 'subtle';
+    case 'default':
+    default:
+      return 'raised';
+  }
+}

package/src/features/card/utils/themeRecipeMeta.ts

@@ -1,4 +1,4 @@
-import type { ZoraThemeRecipeMeta } from '../../../metadata/themeRecipeTypes';
+import type { ZoraThemeRecipeMeta } from '../../../types/theme-recipe';
 
 export const cardThemeRecipeMeta = {
   name: 'Card',

package/src/features/chat/adapters/inbound/ChatListItem.test.tsx

@@ -0,0 +1,11 @@
+import { describe, expect, test } from 'bun:test';
+
+import { ZORA_COMPONENT_META } from '../../../authoring';
+
+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/features/chat/adapters/inbound/ChatListItem.tsx

@@ -0,0 +1,227 @@
+import { Pressable } from '@ankhorage/surface';
+import React from 'react';
+
+import type { ChatListAvatar, ChatListItemProps } from '../../../../types/chat';
+import { Avatar } from '../../../avatar/public';
+import { Badge } from '../../../badge/public';
+import { View } from '../../../layout/public';
+import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
+import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
+import { Text } from '../../../typography/public';
+
+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" color="primary">
+      {unreadCount}
+    </Badge>
+  );
+}
+
+function ChatListItemInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy,
+  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 (
+      <View
+        bg={styles.bg}
+        borderColor={styles.borderColor}
+        borderWidth={styles.borderWidth}
+        px={padding.px}
+        py={padding.py}
+        radius="m"
+        style={{ opacity: styles.opacity }}
+      >
+        <View direction="row" 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}
+              color={avatar?.color}
+            />
+          )}
+
+          <View flex={1}>
+            <View gap="xxs">
+              <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                <View flex={1}>
+                  <Text
+                    numberOfLines={1}
+                    emphasis={disabled ? 'muted' : 'default'}
+                    variant="bodySmall"
+                    weight={unread || selected ? 'semiBold' : 'medium'}
+                  >
+                    {title}
+                  </Text>
+                </View>
+                {hasTimestamp ? (
+                  <Text
+                    numberOfLines={1}
+                    color={unread ? 'primary' : undefined}
+                    emphasis={unread ? 'default' : 'subtle'}
+                    variant="caption"
+                    weight={unread ? 'semiBold' : 'regular'}
+                  >
+                    {timestamp}
+                  </Text>
+                ) : null}
+              </View>
+
+              {hasSecondaryRow ? (
+                <View direction="row" align="center" gap="s" justify="space-between" wrap="nowrap">
+                  <View flex={1}>
+                    <View gap="xxs">
+                      {hasPreview ? (
+                        <Text
+                          numberOfLines={1}
+                          emphasis={unread ? 'default' : 'muted'}
+                          variant="bodySmall"
+                          weight={unread ? 'medium' : 'regular'}
+                        >
+                          {preview}
+                        </Text>
+                      ) : null}
+                      {hasMeta ? (
+                        <Text numberOfLines={1} emphasis="subtle" variant="caption">
+                          {meta}
+                        </Text>
+                      ) : null}
+                    </View>
+                  </View>
+
+                  {hasUnreadCount || hasTrailing ? (
+                    <View direction="row" align="center" gap="s" wrap="nowrap">
+                      {renderUnreadCount(unreadCount)}
+                      {trailing}
+                    </View>
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  };
+
+  if (!isInteractive) {
+    return <View testID={testID}>{content({ pressed: false, hovered: false })}</View>;
+  }
+
+  return (
+    <Pressable
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      interactionPolicy={interactionPolicy}
+      onPress={onPress}
+      radius="m"
+      testID={testID}
+    >
+      {(state) =>
+        content({
+          pressed: state.pressed,
+          hovered: state.hovered,
+        })
+      }
+    </Pressable>
+  );
+}
+
+/***
+ * Chat-style list row with avatar, title, preview text, and unread indicators.
+ *
+ 
+ */
+export const ChatListItem = withZoraThemeScope(ChatListItemInner);