@ankhorage/surface 1.0.2 → 1.1.0

package/src/components/navigation/DrawerNavigationItem.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { NavigationItem } from './NavigationItem';
+import type { DrawerNavigationItemProps } from './types';
+
+export function DrawerNavigationItem({ item, compact = false, testID }: DrawerNavigationItemProps) {
+  return (
+    <NavigationItem
+      compact={compact}
+      item={{
+        ...item,
+        accessibilityRole: item.accessibilityRole ?? 'button',
+      }}
+      testID={testID}
+    />
+  );
+}

package/src/components/navigation/NavigationItem.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+import type { NavigationItemProps } from './types';
+
+export function NavigationItem({ item, compact = false, testID }: NavigationItemProps) {
+  const { theme } = useTheme();
+  const active = Boolean(item.active);
+  const disabled = Boolean(item.disabled);
+  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
+    active,
+    disabled,
+    item.accessibilityState,
+  );
+
+  return (
+    <ButtonBase
+      accessibilityLabel={item.accessibilityLabel}
+      accessibilityRole={item.accessibilityRole ?? 'button'}
+      accessibilityState={resolvedAccessibilityState}
+      disabled={disabled}
+      onPress={item.onPress}
+      testID={resolvedTestID}
+    >
+      {(state) => {
+        const presentation = resolveNavigationItemPresentation(theme, {
+          active,
+          disabled,
+          state,
+        });
+
+        return (
+          <Box
+            px="m"
+            py={compact ? 's' : 'm'}
+            radius="m"
+            style={{
+              backgroundColor: presentation.backgroundColor,
+              flexDirection: 'row',
+              alignItems: 'center',
+              opacity: presentation.opacity,
+            }}
+          >
+            {item.icon ? (
+              <View style={{ marginRight: theme.spacing.s }}>
+                <Icon
+                  color={presentation.contentColor}
+                  name={item.icon.name}
+                  provider={item.icon.provider}
+                  size={compact ? 's' : 'm'}
+                />
+              </View>
+            ) : null}
+            <Box flex={1}>
+              <Text
+                color={presentation.contentColor}
+                numberOfLines={1}
+                variant={compact ? 'bodySmall' : 'body'}
+                weight="medium"
+              >
+                {item.label}
+              </Text>
+            </Box>
+            {item.badge ? <View style={{ marginLeft: theme.spacing.s }}>{item.badge}</View> : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/navigation/NavigationList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Stack } from '../../layout';
+import { NavigationItem } from './NavigationItem';
+import type { NavigationListProps } from './types';
+
+export function NavigationList({
+  items,
+  orientation = 'vertical',
+  compact = false,
+  testID,
+}: NavigationListProps) {
+  return (
+    <Stack
+      direction={orientation === 'horizontal' ? 'row' : 'column'}
+      gap={compact ? 'xs' : 's'}
+      testID={testID}
+    >
+      {items.map((item) => (
+        <NavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+      ))}
+    </Stack>
+  );
+}

package/src/components/navigation/TabBar.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Box } from '../../layout';
+import { useTheme } from '../../theme/ThemeContext';
+import { TabBarItem } from './TabBarItem';
+import type { TabBarProps } from './types';
+
+export function TabBar({ items, compact = false, testID }: TabBarProps) {
+  const { theme } = useTheme();
+
+  return (
+    <Box
+      style={{
+        flexDirection: 'row',
+        borderTopColor: theme.semantics.border.default,
+        borderTopWidth: 1,
+      }}
+      testID={testID}
+    >
+      {items.map((item) => (
+        <TabBarItem compact={compact} item={item} key={item.id} testID={testID} />
+      ))}
+    </Box>
+  );
+}

package/src/components/navigation/TabBarItem.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Box } from '../../layout';
+import { ButtonBase } from '../../primitives/button-base';
+import { Icon } from '../../primitives/icon';
+import { Text } from '../../primitives/text';
+import { useTheme } from '../../theme/ThemeContext';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+import type { TabBarItemProps } from './types';
+
+export function TabBarItem({ item, compact = false, testID }: TabBarItemProps) {
+  const { theme } = useTheme();
+  const active = Boolean(item.active);
+  const disabled = Boolean(item.disabled);
+  const resolvedTestID = item.testID ?? (testID ? `${testID}-item-${item.id}` : undefined);
+  const resolvedAccessibilityState = resolveNavigationAccessibilityState(
+    active,
+    disabled,
+    item.accessibilityState,
+  );
+
+  return (
+    <ButtonBase
+      accessibilityLabel={item.accessibilityLabel}
+      accessibilityRole={item.accessibilityRole ?? 'tab'}
+      accessibilityState={resolvedAccessibilityState}
+      disabled={disabled}
+      onPress={item.onPress}
+      style={{ flex: 1 }}
+      testID={resolvedTestID}
+    >
+      {(state) => {
+        const presentation = resolveNavigationItemPresentation(theme, {
+          active,
+          disabled,
+          state,
+        });
+        const contentColor = disabled
+          ? theme.semantics.content.muted
+          : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.muted;
+
+        return (
+          <Box
+            px="m"
+            py={compact ? 's' : 'm'}
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: presentation.backgroundColor,
+              opacity: presentation.opacity,
+            }}
+          >
+            {item.icon ? (
+              <View style={{ marginBottom: item.label ? theme.spacing.xs : 0 }}>
+                <Icon
+                  color={contentColor}
+                  name={item.icon.name}
+                  provider={item.icon.provider}
+                  size={compact ? 's' : 'm'}
+                />
+              </View>
+            ) : null}
+            {item.label ? (
+              <Text
+                color={contentColor}
+                numberOfLines={1}
+                variant={compact ? 'bodySmall' : 'label'}
+                weight="medium"
+              >
+                {item.label}
+              </Text>
+            ) : null}
+          </Box>
+        );
+      }}
+    </ButtonBase>
+  );
+}

package/src/components/navigation/helpers.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'bun:test';
+
+import { createTheme } from '../../theme/createTheme';
+import { resolveNavigationAccessibilityState, resolveNavigationItemPresentation } from './helpers';
+
+describe('navigation helpers', () => {
+  it('forces selected and disabled when active/disabled are true', () => {
+    expect(
+      resolveNavigationAccessibilityState(true, true, {
+        selected: false,
+        disabled: false,
+      }),
+    ).toEqual({
+      selected: true,
+      disabled: true,
+    });
+  });
+
+  it('preserves user-provided state when not active/disabled', () => {
+    expect(
+      resolveNavigationAccessibilityState(false, false, {
+        disabled: false,
+        selected: false,
+        expanded: true,
+      }),
+    ).toEqual({
+      disabled: false,
+      selected: false,
+      expanded: true,
+    });
+  });
+
+  it('resolves active presentation via primary soft semantics', () => {
+    const theme = createTheme();
+    const state = { pressed: false, hovered: true, focused: false, disabled: false };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: true,
+      disabled: false,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softHover);
+    expect(resolved.contentColor).toBe(theme.semantics.action.primary.base);
+    expect(resolved.opacity).toBe(1);
+  });
+
+  it('resolves inactive presentation via neutral hover/active semantics', () => {
+    const theme = createTheme();
+    const state = { pressed: true, hovered: true, focused: false, disabled: false };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: false,
+      disabled: false,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.neutral.surfaceActive);
+    expect(resolved.contentColor).toBe(theme.semantics.content.default);
+    expect(resolved.opacity).toBe(1);
+  });
+
+  it('ignores hover/pressed presentation when disabled', () => {
+    const theme = createTheme();
+    const state = { pressed: true, hovered: true, focused: false, disabled: true };
+    const resolved = resolveNavigationItemPresentation(theme, {
+      active: true,
+      disabled: true,
+      state,
+    });
+
+    expect(resolved.backgroundColor).toBe(theme.semantics.action.primary.softBg);
+    expect(resolved.contentColor).toBe(theme.semantics.content.muted);
+    expect(resolved.opacity).toBe(0.72);
+  });
+});

package/src/components/navigation/helpers.ts

@@ -0,0 +1,72 @@
+import type { AccessibilityState } from 'react-native';
+
+import type { InteractionState } from '../../internal/resolvers/resolveInteractiveState';
+import type { SurfaceTheme } from '../../theme/types';
+
+export function resolveNavigationAccessibilityState(
+  active: boolean,
+  disabled: boolean,
+  accessibilityState?: AccessibilityState,
+): AccessibilityState {
+  const resolved: AccessibilityState = { ...(accessibilityState ?? {}) };
+
+  if (active) {
+    resolved.selected = true;
+  }
+
+  if (disabled) {
+    resolved.disabled = true;
+  }
+
+  return resolved;
+}
+
+export interface ResolvedNavigationItemPresentation {
+  backgroundColor: string;
+  contentColor: string;
+  opacity: number;
+}
+
+export function resolveNavigationItemPresentation(
+  theme: SurfaceTheme,
+  {
+    active,
+    disabled,
+    state,
+  }: {
+    active: boolean;
+    disabled: boolean;
+    state: InteractionState;
+  },
+): ResolvedNavigationItemPresentation {
+  const interactionState = disabled ? { ...state, hovered: false, pressed: false } : state;
+
+  const opacity = disabled ? 0.72 : 1;
+  const contentColor = disabled
+    ? theme.semantics.content.muted
+    : active
+      ? theme.semantics.action.primary.base
+      : theme.semantics.content.default;
+
+  if (active) {
+    return {
+      backgroundColor: interactionState.pressed
+        ? theme.semantics.action.primary.softActive
+        : interactionState.hovered
+          ? theme.semantics.action.primary.softHover
+          : theme.semantics.action.primary.softBg,
+      contentColor,
+      opacity,
+    };
+  }
+
+  return {
+    backgroundColor: interactionState.pressed
+      ? theme.semantics.neutral.surfaceActive
+      : interactionState.hovered
+        ? theme.semantics.neutral.surfaceHover
+        : 'transparent',
+    contentColor,
+    opacity,
+  };
+}

package/src/components/navigation/index.ts

@@ -0,0 +1,16 @@
+export { DrawerNavigation } from './DrawerNavigation';
+export { DrawerNavigationItem } from './DrawerNavigationItem';
+export { NavigationItem } from './NavigationItem';
+export { NavigationList } from './NavigationList';
+export { TabBar } from './TabBar';
+export { TabBarItem } from './TabBarItem';
+export type {
+  DrawerNavigationItemProps,
+  DrawerNavigationProps,
+  NavigationItemIcon,
+  NavigationItemProps,
+  NavigationItemSpec,
+  NavigationListProps,
+  TabBarItemProps,
+  TabBarProps,
+} from './types';

package/src/components/navigation/policy.test.ts

@@ -0,0 +1,44 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { describe, expect, it } from 'bun:test';
+
+const navigationDir = fileURLToPath(new URL('.', import.meta.url));
+
+const forbiddenPatterns = [
+  'expo-router',
+  '@react-navigation',
+  'AppManifest',
+  'NavigatorSpec',
+  'generated app',
+  'templates',
+] as const;
+
+function listNavigationSources() {
+  return readdirSync(navigationDir)
+    .filter((entry) => {
+      const extension = extname(entry);
+      if (!(extension === '.ts' || extension === '.tsx')) {
+        return false;
+      }
+
+      return !entry.includes('.test.');
+    })
+    .map((entry) => join(navigationDir, entry));
+}
+
+describe('navigation module boundaries', () => {
+  it('does not import routers, manifests, or generated app code', () => {
+    const sources = listNavigationSources().map((path) => ({
+      path,
+      content: readFileSync(path, 'utf8'),
+    }));
+
+    sources.forEach(({ content, path }) => {
+      forbiddenPatterns.forEach((pattern) => {
+        expect(content, path).not.toContain(pattern);
+      });
+    });
+  });
+});

package/src/components/navigation/types.ts

@@ -0,0 +1,59 @@
+import type React from 'react';
+import type { AccessibilityRole, AccessibilityState } from 'react-native';
+
+import type { IconProps } from '../../primitives/icon';
+
+export type NavigationItemIcon = Pick<IconProps, 'name' | 'provider'>;
+
+export interface NavigationItemSpec {
+  id: string;
+  label: React.ReactNode;
+  icon?: NavigationItemIcon;
+  badge?: React.ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onPress?: (() => void) | undefined;
+  accessibilityLabel?: string;
+  accessibilityRole?: AccessibilityRole;
+  accessibilityState?: AccessibilityState;
+  testID?: string;
+}
+
+export interface NavigationItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface NavigationListProps {
+  items: readonly NavigationItemSpec[];
+  orientation?: 'vertical' | 'horizontal';
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface TabBarProps {
+  items: readonly NavigationItemSpec[];
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface TabBarItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface DrawerNavigationProps {
+  items: readonly NavigationItemSpec[];
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  compact?: boolean;
+  testID?: string;
+}
+
+export interface DrawerNavigationItemProps {
+  item: NavigationItemSpec;
+  compact?: boolean;
+  testID?: string;
+}

package/src/index.test.ts

@@ -21,6 +21,7 @@ const expectedRootExports = [
   "export { IconButton } from './components/icon-button';",
   "export { Label } from './components/label';",
   "export { ListItem } from './components/list-item';",
+  "export {\n  DrawerNavigation,\n  DrawerNavigationItem,\n  NavigationItem,\n  NavigationList,\n  TabBar,\n  TabBarItem,\n} from './components/navigation';",
   "export { Menu } from './components/menu';",
   "export { Modal } from './components/modal';",
   "export { Radio } from './components/radio';",

package/src/index.ts

@@ -22,6 +22,24 @@ export type { MenuItem, MenuProps } from './components/menu';
 export { Menu } from './components/menu';
 export type { ModalProps } from './components/modal';
 export { Modal } from './components/modal';
+export type {
+  DrawerNavigationItemProps,
+  DrawerNavigationProps,
+  NavigationItemIcon,
+  NavigationItemProps,
+  NavigationItemSpec,
+  NavigationListProps,
+  TabBarItemProps,
+  TabBarProps,
+} from './components/navigation';
+export {
+  DrawerNavigation,
+  DrawerNavigationItem,
+  NavigationItem,
+  NavigationList,
+  TabBar,
+  TabBarItem,
+} from './components/navigation';
 export type { RadioProps } from './components/radio';
 export { Radio } from './components/radio';
 export type { SwitchProps } from './components/switch';

package/src/primitives/icon/resolveExpoIconComponent.test.ts

@@ -2,11 +2,13 @@ import { describe, expect, mock, test } from 'bun:test';
 
 const Ionicons = () => null;
 const MaterialIcons = () => null;
+const MaterialCommunityIcons = () => null;
 
 describe('resolveExpoIconComponent', () => {
   test('returns the requested Expo icon family when it exists', async () => {
     await mock.module('@expo/vector-icons', () => ({
       Ionicons,
+      MaterialCommunityIcons,
       MaterialIcons,
     }));
 
@@ -14,11 +16,25 @@ describe('resolveExpoIconComponent', () => {
 
     expect(resolveExpoIconComponent('Ionicons')).toBe(Ionicons);
     expect(resolveExpoIconComponent('MaterialIcons')).toBe(MaterialIcons);
+    expect(resolveExpoIconComponent('MaterialCommunityIcons')).toBe(MaterialCommunityIcons);
+  });
+
+  test('resolves the canonical material-community provider id', async () => {
+    await mock.module('@expo/vector-icons', () => ({
+      Ionicons,
+      MaterialCommunityIcons,
+      MaterialIcons,
+    }));
+
+    const { resolveExpoIconComponent } = await import('./resolveExpoIconComponent');
+
+    expect(resolveExpoIconComponent('material-community')).toBe(MaterialCommunityIcons);
   });
 
   test('falls back to Ionicons when the provider is unknown', async () => {
     await mock.module('@expo/vector-icons', () => ({
       Ionicons,
+      MaterialCommunityIcons,
       MaterialIcons,
     }));
 

package/src/primitives/icon/resolveExpoIconComponent.ts

@@ -10,11 +10,24 @@ export type ExpoIconComponent = React.ElementType<{
   testID?: string;
 }>;
 
+const EXPO_ICON_PROVIDER_ALIASES = {
+  'material-community': 'MaterialCommunityIcons',
+} as const;
+
 export function resolveExpoIconComponent(provider: string): ExpoIconComponent {
-  const candidate = (ExpoIcons as Record<string, unknown>)[provider];
+  const normalizedProvider = resolveExpoIconProviderName(provider);
+  const candidate = (ExpoIcons as Record<string, unknown>)[normalizedProvider];
   if (typeof candidate === 'function') {
     return candidate as ExpoIconComponent;
   }
 
   return ExpoIcons.Ionicons as ExpoIconComponent;
 }
+
+function resolveExpoIconProviderName(provider: string): string {
+  const normalizedProvider = provider.trim().toLowerCase();
+
+  return normalizedProvider in EXPO_ICON_PROVIDER_ALIASES
+    ? EXPO_ICON_PROVIDER_ALIASES[normalizedProvider as keyof typeof EXPO_ICON_PROVIDER_ALIASES]
+    : provider;
+}