@ankhorage/zora 2.13.2 → 3.0.0

package/src/expo57Migration.test.ts

@@ -0,0 +1,125 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { describe, expect, test } from 'bun:test';
+
+const ROOT = process.cwd();
+const EXPO_EXAMPLE_DIRS = [
+  'examples/expo-showcase',
+  'examples/food_drink/restaurant',
+  'examples/shopping_commerce/marketplace',
+  'examples/shopping_commerce/storefront',
+  'examples/social_community/community-feed',
+  'examples/social_community/photo-social',
+  'examples/social_community/private-messaging',
+  'examples/social_community/visual-discovery',
+] as const;
+const RNVI_PLUGINS = [
+  '@react-native-vector-icons/fontawesome',
+  '@react-native-vector-icons/fontawesome5',
+  '@react-native-vector-icons/fontawesome6',
+  '@react-native-vector-icons/ionicons',
+] as const;
+
+function readJson(path: string): Record<string, unknown> {
+  const value: unknown = JSON.parse(readFileSync(path, 'utf8'));
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new Error(`Expected an object in ${path}.`);
+  }
+  return value as Record<string, unknown>;
+}
+
+function readRecord(record: Record<string, unknown>, key: string): Record<string, unknown> {
+  const value = Reflect.get(record, key);
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new Error(`Expected ${key} to be an object.`);
+  }
+  return value as Record<string, unknown>;
+}
+
+function readValue(record: Record<string, unknown>, key: string): unknown {
+  return Reflect.get(record, key);
+}
+
+function readExamplePackage(directory: string): Record<string, unknown> {
+  return readJson(join(ROOT, directory, 'package.json'));
+}
+
+describe('portable ZORA package boundary', () => {
+  test('targets the released RN 0.86 and Surface 3 contract without Expo runtime peers', () => {
+    const packageJson = readJson(join(ROOT, 'package.json'));
+    const dependencies = readRecord(packageJson, 'dependencies');
+    const peers = readRecord(packageJson, 'peerDependencies');
+    const development = readRecord(packageJson, 'devDependencies');
+
+    expect(readValue(dependencies, '@ankhorage/surface')).toBe('^3.0.0');
+    expect(readValue(dependencies, '@ankhorage/contracts')).toBe('^8.0.0');
+    expect(peers.react).toBe('19.2.3');
+    expect(readValue(peers, 'react-native')).toBe('0.86.2');
+    expect(readValue(peers, 'react-native-web')).toBe('~0.21.0');
+    expect(development.typescript).toBe('~6.0.3');
+
+    for (const expoPackage of ['@expo/vector-icons', 'expo-font', 'expo-linear-gradient']) {
+      expect(readValue(peers, expoPackage)).toBeUndefined();
+      expect(readValue(development, expoPackage)).toBeUndefined();
+    }
+  });
+
+  test('contains no Expo runtime import or removed RN 0.85 style API', () => {
+    const runtimeSource = readFileSync(
+      join(ROOT, 'src', 'components', 'gradient', 'Gradient.tsx'),
+      'utf8',
+    );
+    const shellSource = readFileSync(
+      join(ROOT, 'src', 'layout', 'app-shell', 'AppShell.tsx'),
+      'utf8',
+    );
+
+    expect(runtimeSource).not.toContain("from 'expo");
+    expect(shellSource).not.toContain('absoluteFillObject');
+    expect(shellSource).not.toMatch(/pointerEvents=/);
+  });
+});
+
+describe('Expo 57 example boundary', () => {
+  test('uses the canonical React, RN, RNW, TypeScript, and Expo baselines', () => {
+    for (const directory of EXPO_EXAMPLE_DIRS) {
+      const packageJson = readExamplePackage(directory);
+      const dependencies = readRecord(packageJson, 'dependencies');
+      const development = readRecord(packageJson, 'devDependencies');
+
+      expect(dependencies.expo).toBe('~57.0.15');
+      expect(dependencies.react).toBe('19.2.3');
+      expect(readValue(dependencies, 'react-native')).toBe('0.86.2');
+      expect(readValue(dependencies, 'react-native-web')).toBe('~0.21.0');
+      expect(development.typescript).toBe('~6.0.3');
+      expect(readValue(dependencies, '@expo/vector-icons')).toBeUndefined();
+    }
+  });
+
+  test('registers all scoped RNVI packages in each Expo app config', () => {
+    for (const directory of EXPO_EXAMPLE_DIRS) {
+      const appJson = readJson(join(ROOT, directory, 'app.json'));
+      const expo = readRecord(appJson, 'expo');
+      const { plugins } = expo;
+      expect(Array.isArray(plugins)).toBe(true);
+
+      for (const plugin of RNVI_PLUGINS) {
+        expect(plugins).toContain(plugin);
+      }
+    }
+  });
+
+  test('loads every icon font face exercised by Web acceptance', () => {
+    const webFontSource = readFileSync(
+      join(ROOT, 'examples', 'expo-showcase', 'useZoraIconFonts.web.ts'),
+      'utf8',
+    );
+
+    expect(webFontSource).toContain('Ionicons.ttf');
+    expect(webFontSource).toContain('FontAwesome.ttf');
+    expect(webFontSource).toContain('FontAwesome5_Brands.ttf');
+    expect(webFontSource).toContain('FontAwesome5_Solid.ttf');
+    expect(webFontSource).toContain('FontAwesome6_Brands.ttf');
+  });
+});

package/src/index.ts

@@ -74,8 +74,11 @@ export type {
   GradientLocations,
   GradientPoint,
   GradientProps,
+  GradientRenderer,
+  GradientRendererProps,
+  GradientRendererProviderProps,
 } from './components/gradient';
-export { Gradient } from './components/gradient';
+export { Gradient, GradientRendererProvider } from './components/gradient';
 export type {
   HeadingAlign,
   HeadingColor,

package/src/interactionPolicy.test.ts

@@ -203,7 +203,7 @@ describe('Select', () => {
   test('prevents pointer/touch interaction with Picker subtree while passive', () => {
     const source = readComponent('select', 'Select.tsx');
 
-    expect(source).toMatch(/pointerEvents=\{passive \? 'none' : 'auto'\}/);
+    expect(source).toMatch(/pointerEvents:\s*passive \? 'none' : 'auto'/);
     expect(source).toMatch(
       /onValueChange=\{\s*\(\s*itemValue\s*\)\s*=>\s*\{\s*if\s*\(\s*!passive\s*\)/,
     );

package/src/internal/resolveZoraNavigationItems.test.ts

@@ -60,6 +60,17 @@ describe('resolveRouteLabel', () => {
 
     expect(result).toEqual({ label: 'profile', source: 'name' });
   });
+
+  test('uses descriptor title instead of invoking a callable Expo tab label', () => {
+    const result = resolveRouteLabel({
+      route: { key: 'k4', name: 'home' },
+      metadata: undefined,
+      descriptor: { options: { tabBarLabel: () => 'callable', title: 'Home title' } },
+      kind: 'tab',
+    });
+
+    expect(result).toEqual({ label: 'Home title', source: 'descriptor' });
+  });
 });
 
 describe('resolveNavigationItems', () => {

package/src/internal/resolveZoraNavigationItems.ts

@@ -8,8 +8,8 @@ import type { ZoraNavigationRouteMap } from '../components/navigation-list';
 
 interface ZoraNavigationDescriptorOptions {
   title?: string;
-  tabBarLabel?: string | React.ReactNode;
-  drawerLabel?: string | React.ReactNode;
+  tabBarLabel?: unknown;
+  drawerLabel?: unknown;
 }
 
 export interface ZoraNavigationDescriptor {
@@ -71,13 +71,14 @@ export function resolveRouteLabel({
   }
 
   const options = descriptor?.options;
+  const configuredLabel = kind === 'tab' ? options?.tabBarLabel : options?.drawerLabel;
   const fallback =
-    kind === 'tab'
-      ? (options?.tabBarLabel ?? options?.title)
-      : (options?.drawerLabel ?? options?.title);
+    configuredLabel === undefined || typeof configuredLabel === 'function'
+      ? options?.title
+      : configuredLabel;
 
   if (fallback !== undefined) {
-    return { label: fallback, source: 'descriptor' };
+    return { label: fallback as React.ReactNode, source: 'descriptor' };
   }
 
   return { label: route.name, source: 'name' };

package/src/layout/app-shell/AppShell.tsx

@@ -24,11 +24,7 @@ function AppShellInner({
 
         {footer ? <View style={styles.slot}>{footer}</View> : null}
 
-        {overlay ? (
-          <View pointerEvents="box-none" style={styles.overlay}>
-            {overlay}
-          </View>
-        ) : null}
+        {overlay ? <View style={[StyleSheet.absoluteFill, styles.overlay]}>{overlay}</View> : null}
       </View>
     </Box>
   );
@@ -63,7 +59,7 @@ const styles = StyleSheet.create({
     flexShrink: 0,
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none',
     zIndex: 10,
   },
 });

package/src/metadata/componentMeta.test.ts

@@ -27,7 +27,7 @@ describe('ZORA_COMPONENT_META registry coverage', () => {
       .flatMap((match) => match[1].split(',').map((item) => item.trim()))
       .map((item) => item.split(' as ')[0].trim())
       .filter((name) => /^[A-Z][A-Za-z0-9]+$/.test(name))
-      .filter((name) => !['ToastProvider'].includes(name));
+      .filter((name) => !['GradientRendererProvider', 'ToastProvider'].includes(name));
     componentExports.push('ThemeModeToggle');
 
     for (const name of componentExports) {
@@ -40,6 +40,7 @@ describe('ZORA_COMPONENT_META registry coverage', () => {
 
   test('does not treat providers/scopes as direct manifest UI nodes', () => {
     expect(ZORA_COMPONENT_META.ToastProvider?.directManifestNode).toBe(false);
+    expect(ZORA_COMPONENT_META.GradientRendererProvider).toBeUndefined();
     expect(ZORA_COMPONENT_META.ZoraProvider).toBeUndefined();
   });
 });

package/src/nativePeerContract.test.ts

@@ -22,13 +22,15 @@ function isOptionalPeer(metadata: unknown, packageName: string): boolean {
   return isRecord(peerMetadata) && peerMetadata.optional === true;
 }
 
-test('root-entry native imports are required peers', async () => {
+test('root-entry native imports are required portable peers', async () => {
   const packageJson = JSON.parse(
     await readFile(new URL('../package.json', import.meta.url), 'utf8'),
   ) as unknown;
   if (!isRecord(packageJson)) throw new Error('Expected package.json to contain an object.');
 
-  const { peerDependenciesMeta } = packageJson;
-  expect(isOptionalPeer(peerDependenciesMeta, 'expo-linear-gradient')).toBe(false);
+  const { peerDependencies, peerDependenciesMeta } = packageJson;
   expect(isOptionalPeer(peerDependenciesMeta, '@react-native-picker/picker')).toBe(false);
+  expect(isRecord(peerDependencies) && peerDependencies['expo-linear-gradient']).toBeUndefined();
+  expect(isRecord(peerDependencies) && peerDependencies['expo-font']).toBeUndefined();
+  expect(isRecord(peerDependencies) && peerDependencies['@expo/vector-icons']).toBeUndefined();
 });

package/src/patterns/auth/oauthProviders.test.ts

@@ -23,6 +23,31 @@ describe('OAuth provider UI helpers', () => {
     expect(resolveOAuthProviderIcon('google')).toEqual({ provider: 'FontAwesome', name: 'google' });
     expect(resolveOAuthProviderIcon('github')).toEqual({ provider: 'FontAwesome', name: 'github' });
     expect(DEFAULT_OAUTH_PROVIDER_ICONS.apple).toEqual({ provider: 'FontAwesome', name: 'apple' });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.microsoft).toEqual({
+      provider: 'FontAwesome5',
+      name: 'microsoft',
+      variant: 'brand',
+    });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.discord).toEqual({
+      provider: 'FontAwesome5',
+      name: 'discord',
+      variant: 'brand',
+    });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.gitlab).toEqual({
+      provider: 'FontAwesome5',
+      name: 'gitlab',
+      variant: 'brand',
+    });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.zoom).toEqual({
+      provider: 'FontAwesome5',
+      name: 'video',
+      variant: 'solid',
+    });
+    expect(DEFAULT_OAUTH_PROVIDER_ICONS.x).toEqual({
+      provider: 'FontAwesome6',
+      name: 'x-twitter',
+      variant: 'brand',
+    });
   });
 
   it('returns undefined for custom provider icons', () => {

package/src/patterns/auth/oauthProviders.ts

@@ -2,22 +2,22 @@ import type { OAuthProviderIconSpec } from './types';
 
 export const DEFAULT_OAUTH_PROVIDER_ICONS = {
   apple: { provider: 'FontAwesome', name: 'apple' },
-  azure: { provider: 'FontAwesome5', name: 'microsoft' },
+  azure: { provider: 'FontAwesome5', name: 'microsoft', variant: 'brand' },
   bitbucket: { provider: 'FontAwesome', name: 'bitbucket' },
-  discord: { provider: 'FontAwesome5', name: 'discord' },
+  discord: { provider: 'FontAwesome5', name: 'discord', variant: 'brand' },
   facebook: { provider: 'FontAwesome', name: 'facebook' },
-  figma: { provider: 'FontAwesome5', name: 'figma' },
+  figma: { provider: 'FontAwesome5', name: 'figma', variant: 'brand' },
   github: { provider: 'FontAwesome', name: 'github' },
-  gitlab: { provider: 'FontAwesome5', name: 'gitlab' },
+  gitlab: { provider: 'FontAwesome5', name: 'gitlab', variant: 'brand' },
   google: { provider: 'FontAwesome', name: 'google' },
   linkedin: { provider: 'FontAwesome', name: 'linkedin' },
-  microsoft: { provider: 'FontAwesome5', name: 'microsoft' },
-  slack: { provider: 'FontAwesome5', name: 'slack' },
+  microsoft: { provider: 'FontAwesome5', name: 'microsoft', variant: 'brand' },
+  slack: { provider: 'FontAwesome5', name: 'slack', variant: 'brand' },
   spotify: { provider: 'FontAwesome', name: 'spotify' },
-  twitch: { provider: 'FontAwesome5', name: 'twitch' },
+  twitch: { provider: 'FontAwesome5', name: 'twitch', variant: 'brand' },
   twitter: { provider: 'FontAwesome', name: 'twitter' },
-  x: { provider: 'FontAwesome6', name: 'x-twitter' },
-  zoom: { provider: 'FontAwesome5', name: 'video' },
+  x: { provider: 'FontAwesome6', name: 'x-twitter', variant: 'brand' },
+  zoom: { provider: 'FontAwesome5', name: 'video', variant: 'solid' },
 } as const satisfies Record<string, OAuthProviderIconSpec>;
 
 const DEFAULT_OAUTH_PROVIDER_LABELS = {

package/src/patterns/auth/types.ts

@@ -1,3 +1,4 @@
+import type { ButtonIconSpec } from '@ankhorage/surface';
 import type React from 'react';
 
 import type { ButtonProps } from '../../components/button';
@@ -67,12 +68,7 @@ export interface OtpFormProps extends AuthFormBaseProps {
   onResend?: () => void | Promise<void>;
 }
 
-export interface OAuthProviderIconSpec {
-  name: string;
-  provider?: string;
-  size?: number | string;
-  color?: string;
-}
+export type OAuthProviderIconSpec = ButtonIconSpec;
 
 export interface OAuthProviderItem {
   id: string;

package/src/patterns/scanner/BarcodeScannerView.tsx

@@ -70,7 +70,7 @@ function BarcodeScannerViewInner({
             ) : (
               <View style={[styles.placeholder, placeholderStyle]} />
             )}
-            <View pointerEvents="none" style={styles.overlay}>
+            <View style={[styles.overlay, { pointerEvents: 'none' }]}>
               <ScanOverlay
                 cornerLabel={cornerLabel}
                 description={overlayDescription}

package/src/patterns/timeline/Timeline.tsx

@@ -69,9 +69,8 @@ function TimelineInner({
           >
             {item.icon ? (
               <Icon
+                {...item.icon}
                 color={status === 'neutral' ? theme.semantics.content.muted : role.base}
-                name={item.icon.name}
-                provider={item.icon.provider}
                 size={iconSize}
               />
             ) : null}

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -110,9 +110,8 @@ function ZoraTabBarInner({
           >
             {item.metadata?.icon ? (
               <Icon
+                {...item.metadata.icon}
                 color={contentColor}
-                name={item.metadata.icon.name}
-                provider={item.metadata.icon.provider}
                 size={compact ? theme.spacing.m : theme.spacing.l}
               />
             ) : null}

package/src/platformAcceptance.test.ts

@@ -0,0 +1,14 @@
+import { expect, test } from 'bun:test';
+
+test('passes the isolated Surface 3 and RN Web 0.21 acceptance suite', () => {
+  const subprocess = Bun.spawnSync({
+    cmd: [process.execPath, 'test', 'test-fixtures/platformAcceptance.test.tsx'],
+    stderr: 'pipe',
+    stdout: 'pipe',
+  });
+  const output = `${subprocess.stdout.toString()}\n${subprocess.stderr.toString()}`;
+
+  expect(subprocess.exitCode, output).toBe(0);
+  expect(output).toContain('4 pass');
+  expect(output).toContain('0 fail');
+});

package/src/registry.test.ts

@@ -2,7 +2,11 @@ import { describe, expect, test } from 'bun:test';
 
 import type { ZoraComponentRegistry } from './index';
 
-const NON_RUNTIME_COMPONENT_EXPORTS = new Set(['SelectionProvider', 'ToastProvider']);
+const NON_RUNTIME_COMPONENT_EXPORTS = new Set([
+  'GradientRendererProvider',
+  'SelectionProvider',
+  'ToastProvider',
+]);
 const RUNTIME_THEME_COMPONENT_EXPORTS = ['ThemeModeToggle'] as const;
 const REGISTRY_SNAPSHOT_PREFIX = 'ZORA_REGISTRY_SNAPSHOT:';
 

package/src/theme/themeScopeStructure.test.ts

@@ -210,7 +210,7 @@ describe('theme scope structure', () => {
     for (const filePath of scopedPropTypeFiles) {
       const source = readFileSync(filePath, 'utf8');
       expect(source).toMatch(/ZoraBaseProps/);
-      expect(source).toMatch(/extends\s+ZoraBaseProps/);
+      expect(source).toMatch(/extends\s+ZoraBaseProps|ZoraBaseProps\s*&|&\s*ZoraBaseProps/);
     }
   });