@ankhorage/zora 18.0.1 → 19.0.1

package/src/metadata/radioGroupReachability.test.ts

@@ -1,20 +0,0 @@
-import { expect, test } from 'bun:test';
-
-import { ZORA_COMPONENT_META } from '.';
-
-const containers = [
-  ['Screen', ZORA_COMPONENT_META.Screen],
-  ['ScreenSection', ZORA_COMPONENT_META.ScreenSection],
-  ['View', ZORA_COMPONENT_META.View],
-  ['ScrollView', ZORA_COMPONENT_META.ScrollView],
-  ['Card', ZORA_COMPONENT_META.Card],
-  ['Panel', ZORA_COMPONENT_META.Panel],
-] as const;
-
-test('keeps manifest RadioGroup reachable through canonical container composition', () => {
-  expect(ZORA_COMPONENT_META.RadioGroup.directManifestNode).toBe(true);
-
-  for (const [name, metadata] of containers) {
-    expect(metadata.allowedChildren, `${name} should allow RadioGroup`).toContain('RadioGroup');
-  }
-});

package/src/metadata/themeRecipeMeta.test.ts

@@ -1,76 +0,0 @@
-import { describe, expect, test } from 'bun:test';
-
-import { ZORA_COMPONENT_META, ZORA_THEME_RECIPE_META, ZORA_THEME_TOKEN_FAMILIES } from '.';
-
-const tokenFamilies = new Set<string>(ZORA_THEME_TOKEN_FAMILIES);
-const recipeMetaByName = new Map(Object.entries(ZORA_THEME_RECIPE_META));
-
-describe('ZORA_THEME_RECIPE_META', () => {
-  test('exports every current component/pattern theme-authority recipe', () => {
-    expect(Object.keys(ZORA_THEME_RECIPE_META)).toEqual([
-      'Button',
-      'Card',
-      'Heading',
-      'RadioGroup',
-      'Text',
-      'Panel',
-    ]);
-
-    for (const [name, componentMeta] of Object.entries(ZORA_COMPONENT_META)) {
-      const themeProps = Object.entries(componentMeta.props).filter(
-        ([, prop]) => prop.authoring?.authority === 'theme' && prop.authoring.scope !== 'global',
-      );
-      if (themeProps.length === 0) continue;
-
-      const recipe = recipeMetaByName.get(name);
-      expect(recipe, `${name} has theme props but no theme recipe`).toBeDefined();
-      expect(recipe?.kind).toBe(componentMeta.category === 'pattern' ? 'pattern' : 'component');
-      const fields = new Map(Object.entries(recipe?.fields ?? {}));
-      for (const [propName] of themeProps) {
-        expect(
-          fields.get(propName),
-          `${name}.${propName} is missing from its recipe`,
-        ).toBeDefined();
-      }
-    }
-  });
-
-  test('references only canonical token families and valid declared defaults', () => {
-    for (const meta of Object.values(ZORA_THEME_RECIPE_META)) {
-      for (const field of Object.values(meta.fields)) {
-        if (field.type === 'token') {
-          expect(tokenFamilies.has(field.tokenFamily), `${meta.name}.${field.label}`).toBe(true);
-        }
-        if (field.type === 'choice' && field.default !== undefined) {
-          expect(field.options).toContain(field.default);
-        }
-      }
-    }
-  });
-
-  test('keeps recipe defaults aligned with existing runtime behavior', () => {
-    expect(ZORA_THEME_RECIPE_META.Button?.fields.size?.default).toBe('l');
-    expect(ZORA_THEME_RECIPE_META.Card?.fields.padding?.default).toBeUndefined();
-    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.gap?.default).toBe('s');
-    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.color?.default).toBe('primary');
-    expect(ZORA_THEME_RECIPE_META.RadioGroup?.fields.size?.default).toBe('m');
-    expect(ZORA_THEME_RECIPE_META.Text?.fields.weight?.default).toBeUndefined();
-    expect(ZORA_THEME_RECIPE_META.Heading?.fields.size?.default).toBeUndefined();
-  });
-
-  test('does not persist theme-owned defaults into new instance blueprints', () => {
-    for (const [name, meta] of Object.entries(ZORA_COMPONENT_META)) {
-      const props = new Map(Object.entries(meta.props));
-      for (const propName of Object.keys(meta.blueprint?.defaultProps ?? {})) {
-        expect(
-          props.get(propName)?.authoring?.authority,
-          `${name}.${propName} blueprint must not pin a theme-owned value`,
-        ).not.toBe('theme');
-      }
-    }
-  });
-
-  test('is serializable for downstream authoring consumers', () => {
-    expect(() => JSON.stringify(ZORA_THEME_RECIPE_META)).not.toThrow();
-  });
-});

package/src/metadata/themeRecipeMeta.ts

@@ -1,16 +0,0 @@
-import { buttonThemeRecipeMeta } from '../features/button/utils/themeRecipeMeta';
-import { cardThemeRecipeMeta } from '../features/card/utils/themeRecipeMeta';
-import { radioGroupThemeRecipeMeta } from '../features/form/radio/themeRecipeMeta';
-import { headingThemeRecipeMeta } from '../features/typography/utils/headingThemeRecipeMeta';
-import { textThemeRecipeMeta } from '../features/typography/utils/textThemeRecipeMeta';
-import { panelThemeRecipeMeta } from '../patterns/panel/themeRecipeMeta';
-import type { ZoraThemeRecipeMetaRegistry } from './themeRecipeTypes';
-
-export const ZORA_THEME_RECIPE_META: ZoraThemeRecipeMetaRegistry = {
-  Button: buttonThemeRecipeMeta,
-  Card: cardThemeRecipeMeta,
-  Heading: headingThemeRecipeMeta,
-  RadioGroup: radioGroupThemeRecipeMeta,
-  Text: textThemeRecipeMeta,
-  Panel: panelThemeRecipeMeta,
-};

package/src/metadata/themeRecipeTypes.ts

@@ -1,45 +0,0 @@
-export const ZORA_THEME_TOKEN_FAMILIES = [
-  'colors',
-  'spacing',
-  'radii',
-  'typography',
-  'shadows',
-] as const;
-
-export type ZoraThemeTokenFamily = (typeof ZORA_THEME_TOKEN_FAMILIES)[number];
-
-export type ZoraThemeRecipeKind = 'component' | 'pattern';
-
-interface ZoraThemeRecipeFieldBase {
-  readonly label: string;
-  readonly description?: string;
-}
-
-export interface ZoraThemeRecipeTokenFieldMeta extends ZoraThemeRecipeFieldBase {
-  readonly type: 'token';
-  readonly tokenFamily: ZoraThemeTokenFamily;
-  readonly default?: string;
-}
-
-export interface ZoraThemeRecipeChoiceFieldMeta extends ZoraThemeRecipeFieldBase {
-  readonly type: 'choice';
-  readonly options: readonly string[];
-  readonly default?: string;
-}
-
-export interface ZoraThemeRecipeBooleanFieldMeta extends ZoraThemeRecipeFieldBase {
-  readonly type: 'boolean';
-  readonly default?: boolean;
-}
-
-export type ZoraThemeRecipeFieldMeta =
-  ZoraThemeRecipeTokenFieldMeta | ZoraThemeRecipeChoiceFieldMeta | ZoraThemeRecipeBooleanFieldMeta;
-
-export interface ZoraThemeRecipeMeta {
-  readonly name: string;
-  readonly kind: ZoraThemeRecipeKind;
-  readonly description?: string;
-  readonly fields: Readonly<Record<string, ZoraThemeRecipeFieldMeta>>;
-}
-
-export type ZoraThemeRecipeMetaRegistry = Readonly<Record<string, ZoraThemeRecipeMeta>>;

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

@@ -1,11 +0,0 @@
-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

@@ -1,227 +0,0 @@
-import { Pressable } from '@ankhorage/surface';
-import React from 'react';
-
-import { Avatar } from '../../features/avatar/public';
-import { Badge } from '../../features/badge/public';
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-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" 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);

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

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

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

@@ -1,74 +0,0 @@
-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;

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

@@ -1,33 +0,0 @@
-import type React from 'react';
-import type { ImageSourcePropType } from 'react-native';
-
-import type { AvatarShape, AvatarSize } from '../../features/avatar/public';
-import type { ZoraColor } from '../../internal/recipes';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface ChatListAvatar {
-  source?: ImageSourcePropType;
-  name?: string;
-  initials?: string;
-  label?: string;
-  size?: AvatarSize;
-  shape?: AvatarShape;
-  color?: ZoraColor;
-}
-
-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;
-}

package/src/patterns/collection-editor/CollectionEditor.tsx

@@ -1,122 +0,0 @@
-import React from 'react';
-
-import { Button } from '../../features/button/public';
-import { IconButton } from '../../features/button/public';
-import { View } from '../../features/layout/public';
-import { Text } from '../../features/typography/public';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import { Panel } from '../panel';
-import type { CollectionEditorProps } from './types';
-
-function CollectionEditorInner<TItem>({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  items,
-  renderItem,
-  onAdd,
-  onRemove,
-  onMove,
-  addLabel = 'Add Item',
-  emptyLabel = 'No items yet.',
-  disabled,
-  testID,
-  interactionPolicy,
-}: CollectionEditorProps<TItem>) {
-  const isEmpty = items.length === 0;
-
-  return (
-    <Panel
-      compact
-      description={description}
-      interactionPolicy={interactionPolicy}
-      testID={testID}
-      title={title}
-      actions={
-        onAdd ? (
-          <Button
-            variant="soft"
-            size="s"
-            disabled={disabled}
-            interactionPolicy={interactionPolicy}
-            onPress={onAdd}
-          >
-            {addLabel}
-          </Button>
-        ) : null
-      }
-    >
-      <View gap="s">
-        {isEmpty ? (
-          <View py="m">
-            <Text align="center" emphasis="muted">
-              {emptyLabel}
-            </Text>
-          </View>
-        ) : (
-          items.map((item, index) => (
-            <View key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
-              <View direction="row" gap="m" align="center">
-                <View flex={1}>
-                  {renderItem({
-                    item,
-                    index,
-                    remove: () => onRemove?.(index),
-                    moveUp: () => onMove?.(index, index - 1),
-                    moveDown: () => onMove?.(index, index + 1),
-                    canMoveUp: index > 0,
-                    canMoveDown: index < items.length - 1,
-                  })}
-                </View>
-                <View direction="row" gap="xs">
-                  {onMove ? (
-                    <>
-                      <IconButton
-                        icon={{ name: 'arrow-up-outline' }}
-                        label="Move Up"
-                        disabled={disabled ?? index === 0}
-                        interactionPolicy={interactionPolicy}
-                        onPress={() => onMove(index, index - 1)}
-                        size="s"
-                        variant="ghost"
-                      />
-                      <IconButton
-                        icon={{ name: 'arrow-down-outline' }}
-                        label="Move Down"
-                        disabled={disabled ?? index === items.length - 1}
-                        interactionPolicy={interactionPolicy}
-                        onPress={() => onMove(index, index + 1)}
-                        size="s"
-                        variant="ghost"
-                      />
-                    </>
-                  ) : null}
-                  {onRemove ? (
-                    <IconButton
-                      icon={{ name: 'trash-outline' }}
-                      label="Remove"
-                      color="danger"
-                      disabled={disabled}
-                      interactionPolicy={interactionPolicy}
-                      onPress={() => onRemove(index)}
-                      size="s"
-                      variant="ghost"
-                    />
-                  ) : null}
-                </View>
-              </View>
-            </View>
-          ))
-        )}
-      </View>
-    </Panel>
-  );
-}
-
-/***
- * Editor pattern for adding, removing, and reordering a collection of items.
- *
- 
- */
-export const CollectionEditor = withZoraThemeScope(CollectionEditorInner);

package/src/patterns/collection-editor/index.ts

@@ -1,2 +0,0 @@
-export * from './CollectionEditor';
-export * from './types';

package/src/patterns/collection-editor/meta.ts

@@ -1,10 +0,0 @@
-import type { ZoraComponentMeta } from '../../metadata';
-
-export const collectionEditorMeta = {
-  name: 'CollectionEditor',
-  category: 'pattern',
-  directManifestNode: false,
-  allowedChildren: [],
-  note: 'Specialized editing pattern; not represented as a manifest node in v1.',
-  props: {},
-} as const satisfies ZoraComponentMeta;

package/src/patterns/collection-editor/types.ts

@@ -1,26 +0,0 @@
-import type React from 'react';
-
-export interface CollectionEditorRenderItemProps<TItem> {
-  item: TItem;
-  index: number;
-  remove: () => void;
-  moveUp: () => void;
-  moveDown: () => void;
-  canMoveUp: boolean;
-  canMoveDown: boolean;
-}
-
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-
-export interface CollectionEditorProps<TItem> extends ZoraBaseProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  items: readonly TItem[];
-  renderItem: (props: CollectionEditorRenderItemProps<TItem>) => React.ReactNode;
-  onAdd?: () => void;
-  onRemove?: (index: number) => void;
-  onMove?: (from: number, to: number) => void;
-  addLabel?: React.ReactNode;
-  emptyLabel?: React.ReactNode;
-  disabled?: boolean;
-}