@ankhorage/zora 2.13.1 → 3.0.0

package/src/components/gradient/GradientRendererContext.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, use } from 'react';
+
+import type { GradientRenderer, GradientRendererProviderProps } from './types';
+
+const GradientRendererContext = createContext<GradientRenderer | null>(null);
+
+/**
+ * Supplies the host-owned renderer used by `Gradient`.
+ *
+ * Expo apps can adapt `expo-linear-gradient` here, while standalone React
+ * Native hosts can inject another compatible implementation.
+ */
+export function GradientRendererProvider({ children, renderer }: GradientRendererProviderProps) {
+  return <GradientRendererContext value={renderer}>{children}</GradientRendererContext>;
+}
+
+export function useGradientRenderer(): GradientRenderer {
+  const renderer = use(GradientRendererContext);
+
+  if (!renderer) {
+    throw new Error(
+      'Gradient requires a renderer. Wrap the app in GradientRendererProvider with a platform-compatible gradient implementation.',
+    );
+  }
+
+  return renderer;
+}

package/src/components/gradient/index.ts

@@ -1,8 +1,12 @@
 export { Gradient } from './Gradient';
+export { GradientRendererProvider } from './GradientRendererContext';
 export type {
   GradientColor,
   GradientColors,
   GradientLocations,
   GradientPoint,
   GradientProps,
+  GradientRenderer,
+  GradientRendererProps,
+  GradientRendererProviderProps,
 } from './types';

package/src/components/gradient/types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { BoxProps } from '../../foundation';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
@@ -12,6 +13,22 @@ export interface GradientPoint {
   readonly y: number;
 }
 
+export interface GradientRendererProps {
+  children?: React.ReactNode;
+  colors: GradientColors;
+  locations?: GradientLocations;
+  start?: GradientPoint;
+  end?: GradientPoint;
+  style?: StyleProp<ViewStyle>;
+}
+
+export type GradientRenderer = React.ComponentType<GradientRendererProps>;
+
+export interface GradientRendererProviderProps {
+  children?: React.ReactNode;
+  renderer: GradientRenderer;
+}
+
 export interface GradientProps extends ZoraBaseProps {
   children?: React.ReactNode;
   colors: GradientColors;

package/src/components/icon/Icon.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
-export interface IconProps extends ZoraBaseProps, Omit<SurfaceIconProps, 'mode' | 'themeId'> {}
+export type IconProps = ZoraBaseProps & SurfaceIconProps;
 
 function IconInner({
   themeId: _themeId,

package/src/components/input/Input.tsx

@@ -30,12 +30,7 @@ function InputInner({
       interactionPolicy={interactionPolicy}
       leadingAccessory={
         leadingIcon ? (
-          <Surface.Icon
-            color={iconColor}
-            name={leadingIcon.name}
-            provider={leadingIcon.provider}
-            size={iconSize}
-          />
+          <Surface.Icon {...leadingIcon} color={iconColor} size={iconSize} />
         ) : undefined
       }
       readOnly={readOnly}
@@ -53,12 +48,7 @@ function InputInner({
             onPress={trailingAction.onPress}
           />
         ) : trailingIcon ? (
-          <Surface.Icon
-            color={iconColor}
-            name={trailingIcon.name}
-            provider={trailingIcon.provider}
-            size={iconSize}
-          />
+          <Surface.Icon {...trailingIcon} color={iconColor} size={iconSize} />
         ) : undefined
       }
     />

package/src/components/menu/Menu.tsx

@@ -17,14 +17,7 @@ function renderActionLeading(action: MenuAction, iconColor: string) {
     return undefined;
   }
 
-  return (
-    <Icon
-      color={iconColor}
-      name={action.icon.name}
-      provider={action.icon.provider}
-      size={resolveIconSize('s')}
-    />
-  );
+  return <Icon {...action.icon} color={iconColor} size={resolveIconSize('s')} />;
 }
 
 function renderActionTrailing(action: MenuAction) {

package/src/components/metric-card/MetricCard.tsx

@@ -45,14 +45,7 @@ function MetricCardInner({
         <Inline align="flex-start" gap="m" justify="space-between">
           <Stack flex={1} gap="xs">
             <Inline align="center" gap="xs" wrap="wrap">
-              {icon ? (
-                <Icon
-                  color={iconColor}
-                  name={icon.name}
-                  provider={icon.provider}
-                  size={resolveIconSize('s')}
-                />
-              ) : null}
+              {icon ? <Icon {...icon} color={iconColor} size={resolveIconSize('s')} /> : null}
               <Text emphasis="muted" variant="caption" weight="semiBold">
                 {label}
               </Text>

package/src/components/select/Select.tsx

@@ -30,7 +30,7 @@ function SelectInner<TValue extends string = string>({
       radius="m"
       testID={testID}
     >
-      <View pointerEvents={passive ? 'none' : 'auto'}>
+      <View style={{ pointerEvents: passive ? 'none' : 'auto' }}>
         <Picker
           enabled={!disabled}
           onValueChange={(itemValue) => {

package/src/components/textarea/Textarea.tsx

@@ -25,23 +25,13 @@ function TextareaInner({
       interactionPolicy={interactionPolicy}
       leadingAccessory={
         leadingIcon ? (
-          <Surface.Icon
-            color={iconColor}
-            name={leadingIcon.name}
-            provider={leadingIcon.provider}
-            size={iconSize}
-          />
+          <Surface.Icon {...leadingIcon} color={iconColor} size={iconSize} />
         ) : undefined
       }
       size={size}
       trailingAccessory={
         trailingIcon ? (
-          <Surface.Icon
-            color={iconColor}
-            name={trailingIcon.name}
-            provider={trailingIcon.provider}
-            size={iconSize}
-          />
+          <Surface.Icon {...trailingIcon} color={iconColor} size={iconSize} />
         ) : undefined
       }
     />

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/layout/sidebar-layout/SidebarLayout.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'bun:test';
+
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
+
+describe('SidebarLayout sizing contract', () => {
+  it('keeps content-flow sizing as the default', () => {
+    expect(resolveSidebarLayoutSizing()).toEqual({
+      root: {
+        align: 'flex-start',
+        flex: undefined,
+        minHeight: undefined,
+        minWidth: undefined,
+      },
+      child: {
+        minHeight: undefined,
+        minWidth: undefined,
+      },
+    });
+  });
+
+  it('fills a bounded parent for child-owned scroll areas', () => {
+    expect(resolveSidebarLayoutSizing('fill')).toEqual({
+      root: {
+        align: 'stretch',
+        flex: 1,
+        minHeight: 0,
+        minWidth: 0,
+      },
+      child: {
+        minHeight: 0,
+        minWidth: 0,
+      },
+    });
+  });
+});

package/src/layout/sidebar-layout/SidebarLayout.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, Stack } from '../../foundation';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
+import { resolveSidebarLayoutSizing } from './resolveSidebarLayoutSizing';
 import type { SidebarLayoutProps } from './types';
 
 function SidebarLayoutInner({
@@ -13,15 +14,24 @@ function SidebarLayoutInner({
   aside,
   sidebarWidth = 280,
   asideWidth = 280,
+  sizing,
   testID,
 }: SidebarLayoutProps) {
+  const layoutSizing = resolveSidebarLayoutSizing(sizing);
+
   return (
-    <Stack direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID} align="flex-start">
-      <Box width={{ base: '100%', lg: sidebarWidth }}>{sidebar}</Box>
-      <Box flex={1} width="100%">
+    <Stack {...layoutSizing.root} direction={{ base: 'column', lg: 'row' }} gap="l" testID={testID}>
+      <Box {...layoutSizing.child} width={{ base: '100%', lg: sidebarWidth }}>
+        {sidebar}
+      </Box>
+      <Box {...layoutSizing.child} flex={1} width="100%">
         {children}
       </Box>
-      {aside ? <Box width={{ base: '100%', lg: asideWidth }}>{aside}</Box> : null}
+      {aside ? (
+        <Box {...layoutSizing.child} width={{ base: '100%', lg: asideWidth }}>
+          {aside}
+        </Box>
+      ) : null}
     </Stack>
   );
 }
@@ -29,6 +39,8 @@ function SidebarLayoutInner({
 /***
  * Responsive layout with a sidebar and main content area (and optional aside).
  *
- 
+ * `sizing="content"` keeps normal content-flow behavior. Use `sizing="fill"` when the layout
+ * should fill an already bounded parent so sidebar/content children receive the available space
+ * for their own scrolling or gesture ownership.
  */
 export const SidebarLayout = withZoraThemeScope(SidebarLayoutInner);

package/src/layout/sidebar-layout/resolveSidebarLayoutSizing.ts

@@ -0,0 +1,18 @@
+import type { SidebarLayoutSizing } from './types';
+
+export function resolveSidebarLayoutSizing(sizing: SidebarLayoutSizing = 'content') {
+  const fillsAvailableSpace = sizing === 'fill';
+
+  return {
+    root: {
+      align: fillsAvailableSpace ? 'stretch' : 'flex-start',
+      flex: fillsAvailableSpace ? 1 : undefined,
+      minHeight: fillsAvailableSpace ? 0 : undefined,
+      minWidth: fillsAvailableSpace ? 0 : undefined,
+    },
+    child: {
+      minHeight: fillsAvailableSpace ? 0 : undefined,
+      minWidth: fillsAvailableSpace ? 0 : undefined,
+    },
+  } as const;
+}

package/src/layout/sidebar-layout/types.ts

@@ -2,10 +2,13 @@ import type React from 'react';
 
 import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
+export type SidebarLayoutSizing = 'content' | 'fill';
+
 export interface SidebarLayoutProps extends ZoraBaseProps {
   sidebar: React.ReactNode;
   children?: React.ReactNode;
   aside?: React.ReactNode;
   sidebarWidth?: number;
   asideWidth?: number;
+  sizing?: SidebarLayoutSizing;
 }

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}