@ankhorage/surface 1.0.3 → 1.2.0

package/dist/primitives/image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/primitives/image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,yBAAyB,EACzB,UAAU,EACV,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,UAAU,KAAK,CAAC,EACpB,MAAM,EACN,cAAc,EACd,GAAG,EACH,kBAAkB,EAClB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,EACH,UAAU,EACV,MAAM,EACN,KAAK,EACL,MAAM,EACN,OAAO,GACI;IACX,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEvE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,qBAAqB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;IAElG,IAAI,CAAC,cAAc;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC9D,MAAM,0BAA0B,GAAG,yBAAyB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,CAAC,OAAO,CACN,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,iBAAiB,CAAC,OAAO,CACzB,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;YAEjB,IAAI,CAAC,YAAY,IAAI,kBAAkB,EAAE,CAAC;gBACxC,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC,CACF,UAAU,CAAC,CAAC,kBAAkB,CAAC,CAC/B,MAAM,CAAC,CAAC,cAAc,CAAC,CACvB,KAAK,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAC9B,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { Image as RNImage } from 'react-native';\n\nimport { useTheme } from '../../theme/ThemeContext';\nimport {\n  getSourceKey,\n  normalizeSource,\n  resolveAccessibilityLabel,\n  resolveAlt,\n  resolveImageStyle,\n  resolveRenderedSource,\n  resolveResizeMode,\n} from './resolveImageProps';\nimport type { ImageProps } from './types';\n\nexport function Image({\n  source,\n  fallbackSource,\n  alt,\n  accessibilityLabel,\n  width,\n  height,\n  aspectRatio,\n  fit,\n  resizeMode,\n  radius,\n  style,\n  testID,\n  onError,\n}: ImageProps) {\n  const { theme } = useTheme();\n  const [showFallback, setShowFallback] = React.useState(false);\n  const primaryKey = React.useMemo(() => getSourceKey(source), [source]);\n\n  React.useEffect(() => {\n    setShowFallback(false);\n  }, [primaryKey]);\n\n  const normalizedPrimary = normalizeSource(source);\n  const normalizedFallback = normalizeSource(fallbackSource);\n  const resolvedSource = resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback);\n\n  if (!resolvedSource) return null;\n\n  const resolvedResizeMode = resolveResizeMode(fit, resizeMode);\n  const resolvedAccessibilityLabel = resolveAccessibilityLabel(alt, accessibilityLabel);\n  const resolvedAlt = resolveAlt(alt, accessibilityLabel);\n  const resolvedStyle = resolveImageStyle(theme, { width, height, aspectRatio, radius });\n\n  return (\n    <RNImage\n      accessibilityLabel={resolvedAccessibilityLabel}\n      accessibilityRole=\"image\"\n      alt={resolvedAlt}\n      onError={(event) => {\n        onError?.(event);\n\n        if (!showFallback && normalizedFallback) {\n          setShowFallback(true);\n        }\n      }}\n      resizeMode={resolvedResizeMode}\n      source={resolvedSource}\n      style={[resolvedStyle, style]}\n      testID={testID}\n    />\n  );\n}\n"]}

package/dist/primitives/image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './Image';
+export type { ImageFit, ImageProps, SurfaceImageSource } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/primitives/image/index.js

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

package/dist/primitives/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/primitives/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { Image } from './Image';\nexport type { ImageFit, ImageProps, SurfaceImageSource } from './types';\n"]}

package/dist/primitives/image/resolveImageProps.d.ts

@@ -0,0 +1,12 @@
+import type { ImageResizeMode, ImageSourcePropType } from 'react-native';
+import type { ImageStyle } from 'react-native';
+import type { SurfaceTheme } from '../../theme/types';
+import type { ImageProps, SurfaceImageSource } from './types';
+export declare function normalizeSource(source: SurfaceImageSource | null | undefined): ImageSourcePropType | undefined;
+export declare function resolveRenderedSource(normalizedPrimary: ImageSourcePropType | undefined, normalizedFallback: ImageSourcePropType | undefined, showFallback: boolean): ImageSourcePropType | undefined;
+export declare function getSourceKey(source: SurfaceImageSource | null | undefined): string | null;
+export declare function resolveResizeMode(fit: ImageProps['fit'], resizeMode: ImageProps['resizeMode']): ImageResizeMode;
+export declare function resolveAccessibilityLabel(alt: ImageProps['alt'], accessibilityLabel: ImageProps['accessibilityLabel']): string | undefined;
+export declare function resolveAlt(alt: ImageProps['alt'], accessibilityLabel: ImageProps['accessibilityLabel']): string | undefined;
+export declare function resolveImageStyle(theme: SurfaceTheme, props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>): ImageStyle;
+//# sourceMappingURL=resolveImageProps.d.ts.map

package/dist/primitives/image/resolveImageProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveImageProps.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/resolveImageProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D,wBAAgB,eAAe,CAC7B,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAC5C,mBAAmB,GAAG,SAAS,CAIjC;AAED,wBAAgB,qBAAqB,CACnC,iBAAiB,EAAE,mBAAmB,GAAG,SAAS,EAClD,kBAAkB,EAAE,mBAAmB,GAAG,SAAS,EACnD,YAAY,EAAE,OAAO,GACpB,mBAAmB,GAAG,SAAS,CAGjC;AAYD,wBAAgB,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAmBzF;AAED,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,GACnC,eAAe,CAEjB;AAED,wBAAgB,yBAAyB,CACvC,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,kBAAkB,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACnD,MAAM,GAAG,SAAS,CAEpB;AAED,wBAAgB,UAAU,CACxB,GAAG,EAAE,UAAU,CAAC,KAAK,CAAC,EACtB,kBAAkB,EAAE,UAAU,CAAC,oBAAoB,CAAC,GACnD,MAAM,GAAG,SAAS,CAEpB;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,YAAY,EACnB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,QAAQ,CAAC,GACrE,UAAU,CAYZ"}

package/dist/primitives/image/resolveImageProps.js

@@ -0,0 +1,67 @@
+import { resolveToken } from '../../theme/resolveToken';
+export function normalizeSource(source) {
+    if (source === null || source === undefined)
+        return undefined;
+    if (typeof source === 'string')
+        return { uri: source };
+    return source;
+}
+export function resolveRenderedSource(normalizedPrimary, normalizedFallback, showFallback) {
+    if (showFallback || !normalizedPrimary)
+        return normalizedFallback;
+    return normalizedPrimary;
+}
+function getUriFromSource(source) {
+    if (Array.isArray(source)) {
+        const [first] = source;
+        return first?.uri;
+    }
+    if (typeof source === 'number')
+        return undefined;
+    return source.uri;
+}
+export function getSourceKey(source) {
+    if (source === null || source === undefined)
+        return null;
+    if (typeof source === 'string')
+        return `uri:${source}`;
+    if (typeof source === 'number')
+        return `asset:${source}`;
+    if (Array.isArray(source)) {
+        const parts = source
+            .map((item) => item.uri)
+            .filter((value) => typeof value === 'string');
+        return `uri-set:${parts.join('|')}`;
+    }
+    const uri = getUriFromSource(source);
+    if (uri)
+        return `uri:${uri}`;
+    try {
+        return `src:${JSON.stringify(source)}`;
+    }
+    catch {
+        return 'src:unknown';
+    }
+}
+export function resolveResizeMode(fit, resizeMode) {
+    return fit ?? resizeMode ?? 'cover';
+}
+export function resolveAccessibilityLabel(alt, accessibilityLabel) {
+    return accessibilityLabel ?? alt;
+}
+export function resolveAlt(alt, accessibilityLabel) {
+    return alt ?? accessibilityLabel;
+}
+export function resolveImageStyle(theme, props) {
+    const width = resolveToken(theme.spacing, props.width);
+    const height = resolveToken(theme.spacing, props.height);
+    const borderRadius = resolveToken(theme.radii, props.radius);
+    return {
+        width,
+        height,
+        aspectRatio: props.aspectRatio,
+        borderRadius,
+        overflow: borderRadius !== undefined ? 'hidden' : undefined,
+    };
+}
+//# sourceMappingURL=resolveImageProps.js.map

package/dist/primitives/image/resolveImageProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveImageProps.js","sourceRoot":"","sources":["../../../src/primitives/image/resolveImageProps.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ImageResizeMode, ImageSourcePropType } from 'react-native';\nimport type { ImageStyle } from 'react-native';\n\nimport { resolveToken } from '../../theme/resolveToken';\nimport type { SurfaceTheme } from '../../theme/types';\nimport type { ImageProps, SurfaceImageSource } from './types';\n\nexport function normalizeSource(\n  source: SurfaceImageSource | null | undefined,\n): ImageSourcePropType | undefined {\n  if (source === null || source === undefined) return undefined;\n  if (typeof source === 'string') return { uri: source };\n  return source;\n}\n\nexport function resolveRenderedSource(\n  normalizedPrimary: ImageSourcePropType | undefined,\n  normalizedFallback: ImageSourcePropType | undefined,\n  showFallback: boolean,\n): ImageSourcePropType | undefined {\n  if (showFallback || !normalizedPrimary) return normalizedFallback;\n  return normalizedPrimary;\n}\n\nfunction getUriFromSource(source: ImageSourcePropType): string | undefined {\n  if (Array.isArray(source)) {\n    const [first] = source;\n    return first?.uri;\n  }\n\n  if (typeof source === 'number') return undefined;\n  return source.uri;\n}\n\nexport function getSourceKey(source: SurfaceImageSource | null | undefined): string | null {\n  if (source === null || source === undefined) return null;\n  if (typeof source === 'string') return `uri:${source}`;\n  if (typeof source === 'number') return `asset:${source}`;\n  if (Array.isArray(source)) {\n    const parts = source\n      .map((item) => item.uri)\n      .filter((value): value is string => typeof value === 'string');\n    return `uri-set:${parts.join('|')}`;\n  }\n\n  const uri = getUriFromSource(source);\n  if (uri) return `uri:${uri}`;\n\n  try {\n    return `src:${JSON.stringify(source)}`;\n  } catch {\n    return 'src:unknown';\n  }\n}\n\nexport function resolveResizeMode(\n  fit: ImageProps['fit'],\n  resizeMode: ImageProps['resizeMode'],\n): ImageResizeMode {\n  return fit ?? resizeMode ?? 'cover';\n}\n\nexport function resolveAccessibilityLabel(\n  alt: ImageProps['alt'],\n  accessibilityLabel: ImageProps['accessibilityLabel'],\n): string | undefined {\n  return accessibilityLabel ?? alt;\n}\n\nexport function resolveAlt(\n  alt: ImageProps['alt'],\n  accessibilityLabel: ImageProps['accessibilityLabel'],\n): string | undefined {\n  return alt ?? accessibilityLabel;\n}\n\nexport function resolveImageStyle(\n  theme: SurfaceTheme,\n  props: Pick<ImageProps, 'width' | 'height' | 'aspectRatio' | 'radius'>,\n): ImageStyle {\n  const width = resolveToken(theme.spacing, props.width);\n  const height = resolveToken(theme.spacing, props.height);\n  const borderRadius = resolveToken(theme.radii, props.radius);\n\n  return {\n    width,\n    height,\n    aspectRatio: props.aspectRatio,\n    borderRadius,\n    overflow: borderRadius !== undefined ? 'hidden' : undefined,\n  };\n}\n"]}

package/dist/primitives/image/types.d.ts

@@ -0,0 +1,21 @@
+import type { ImageProps as ReactNativeImageProps, ImageResizeMode, ImageSourcePropType } from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
+import type { SurfaceTheme } from '../../theme/types';
+export type SurfaceImageSource = string | ImageSourcePropType;
+export type ImageFit = ImageResizeMode;
+export interface ImageProps {
+    source?: SurfaceImageSource | null;
+    fallbackSource?: SurfaceImageSource | null;
+    alt?: string;
+    accessibilityLabel?: string;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    fit?: ImageFit;
+    resizeMode?: ImageResizeMode;
+    radius?: number | keyof SurfaceTheme['radii'];
+    style?: StyleProp<ImageStyle>;
+    testID?: string;
+    onError?: ReactNativeImageProps['onError'];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/primitives/image/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/primitives/image/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,IAAI,qBAAqB,EACnC,eAAe,EACf,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C"}

package/dist/primitives/image/types.js

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

package/dist/primitives/image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/primitives/image/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  ImageProps as ReactNativeImageProps,\n  ImageResizeMode,\n  ImageSourcePropType,\n} from 'react-native';\nimport type { ImageStyle, StyleProp } from 'react-native';\n\nimport type { SurfaceTheme } from '../../theme/types';\n\nexport type SurfaceImageSource = string | ImageSourcePropType;\n\nexport type ImageFit = ImageResizeMode;\n\nexport interface ImageProps {\n  source?: SurfaceImageSource | null;\n  fallbackSource?: SurfaceImageSource | null;\n  alt?: string;\n  accessibilityLabel?: string;\n  width?: number | string;\n  height?: number | string;\n  aspectRatio?: number;\n  fit?: ImageFit;\n  resizeMode?: ImageResizeMode;\n  radius?: number | keyof SurfaceTheme['radii'];\n  style?: StyleProp<ImageStyle>;\n  testID?: string;\n  onError?: ReactNativeImageProps['onError'];\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/surface",
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "Stable UI foundation for React Native and React Native Web.",
   "homepage": "https://github.com/ankhorage/surface#readme",
   "bugs": {
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@ankhorage/color-theory": "^0.0.4",
-    "@ankhorage/contracts": "^1.1.0"
+    "@ankhorage/contracts": "^1.2.0"
   },
   "files": [
     "dist",

package/src/components/navigation/DrawerNavigation.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Stack } from '../../layout';
+import { DrawerNavigationItem } from './DrawerNavigationItem';
+import type { DrawerNavigationProps } from './types';
+
+export function DrawerNavigation({
+  items,
+  header,
+  footer,
+  compact = false,
+  testID,
+}: DrawerNavigationProps) {
+  return (
+    <Stack gap={compact ? 's' : 'm'} testID={testID}>
+      {header}
+      <Stack gap={compact ? 'xs' : 's'}>
+        {items.map((item) => (
+          <DrawerNavigationItem compact={compact} item={item} key={item.id} testID={testID} />
+        ))}
+      </Stack>
+      {footer}
+    </Stack>
+  );
+}

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);
+      });
+    });
+  });
+});