@ankhorage/surface 4.2.0 → 4.3.0

package/src/features/form/radio/adapters/inbound/Radio.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import {
+  type InteractionState,
+  resolveFieldState,
+  resolveIndicatorSize,
+  resolveSelectionControlColors,
+  resolveSelectionControlNextChecked,
+} from '../../../../../internal/resolvers';
+import { useControllableState } from '../../../../../internal/useControllableState';
+import { ButtonBase } from '../../../../../primitives/button-base';
+import type { ButtonBaseProps } from '../../../../../primitives/button-base/types';
+import { useTheme } from '../../../../../theme/ThemeContext';
+import type { SurfaceTheme } from '../../../../../theme/types';
+import type { RadioProps } from '../../../../../types/radio';
+import { Box } from '../../../../layout/public';
+import { Text } from '../../../../typography/public';
+import { isRadioTextContent } from '../../utils/isRadioTextContent';
+
+/*** Renders one accessible radio control with text or structured label content. */
+export function Radio({
+  accessibilityLabel,
+  checked,
+  children,
+  color = 'primary',
+  defaultChecked = false,
+  disabled = false,
+  invalid = false,
+  onCheckedChange,
+  readOnly = false,
+  size = 'm',
+  testID,
+  ...buttonProps
+}: RadioProps) {
+  const { theme } = useTheme();
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <RadioControl
+      accessibilityLabel={accessibilityLabel}
+      buttonProps={buttonProps}
+      color={color}
+      disabled={disabled}
+      invalid={invalid}
+      isChecked={isChecked}
+      readOnly={readOnly}
+      setChecked={setChecked}
+      size={size}
+      testID={testID}
+      theme={theme}
+    >
+      {children}
+    </RadioControl>
+  );
+}
+
+/*** Owns the radio interaction boundary around resolved selection content. */
+function RadioControl({
+  accessibilityLabel,
+  buttonProps,
+  children,
+  color,
+  disabled,
+  invalid,
+  isChecked,
+  readOnly,
+  setChecked,
+  size,
+  testID,
+  theme,
+}: RadioControlProps) {
+  const nextChecked = resolveSelectionControlNextChecked({
+    checked: isChecked,
+    disabled,
+    kind: 'radio',
+    readOnly,
+  });
+
+  return (
+    <ButtonBase
+      {...buttonProps}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isChecked }}
+      disabled={disabled}
+      onPress={nextChecked === null ? undefined : () => setChecked(nextChecked)}
+      testID={testID}
+    >
+      {(interactionState) =>
+        renderRadioContent({
+          children,
+          color,
+          disabled,
+          interactionState,
+          invalid,
+          isChecked,
+          readOnly,
+          size,
+          theme,
+        })
+      }
+    </ButtonBase>
+  );
+}
+
+/*** Renders the radio indicator and optional content for one interaction state. */
+function renderRadioContent(input: RadioContentInput) {
+  const { interactionState, theme } = input;
+  const fieldState = resolveFieldState({
+    disabled: input.disabled,
+    focused: interactionState.focused,
+    invalid: input.invalid,
+    readOnly: input.readOnly,
+  });
+  const colors = resolveSelectionControlColors(theme, {
+    checked: input.isChecked,
+    fieldState,
+    hovered: interactionState.hovered,
+    pressed: interactionState.pressed,
+    color: input.color,
+  });
+  const indicatorSize = resolveIndicatorSize(input.size);
+  const labelEmphasis = colors.labelColor === theme.semantics.content.muted ? 'muted' : 'default';
+  const hasContent =
+    input.children !== undefined && input.children !== null && input.children !== false;
+
+  return (
+    <Box style={resolveSelectionRowStyle(colors.opacity)}>
+      <Box
+        radius="full"
+        style={resolveRadioIndicatorStyle(
+          colors.backgroundColor,
+          colors.borderColor,
+          indicatorSize.radio,
+        )}
+      >
+        {input.isChecked ? (
+          <Box
+            radius="full"
+            style={resolveRadioDotStyle(colors.indicatorColor, indicatorSize.radioDot)}
+          />
+        ) : null}
+      </Box>
+      {hasContent ? (
+        <Box flex={1} ml="s">
+          {isRadioTextContent(input.children) ? (
+            <Text emphasis={labelEmphasis}>{input.children}</Text>
+          ) : (
+            input.children
+          )}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+/*** Resolves the horizontal selection-control row style. */
+function resolveSelectionRowStyle(opacity: number | undefined): ViewStyle {
+  return { alignItems: 'center', flexDirection: 'row', opacity };
+}
+
+/*** Resolves radio indicator dimensions and interaction colors. */
+function resolveRadioIndicatorStyle(
+  backgroundColor: string,
+  borderColor: string,
+  size: number,
+): ViewStyle {
+  return {
+    alignItems: 'center',
+    backgroundColor,
+    borderColor,
+    borderWidth: 1.5,
+    height: size,
+    justifyContent: 'center',
+    width: size,
+  };
+}
+
+/*** Resolves the checked radio dot style. */
+function resolveRadioDotStyle(backgroundColor: string, size: number): ViewStyle {
+  return { backgroundColor, height: size, width: size };
+}
+
+interface RadioControlProps {
+  accessibilityLabel: RadioProps['accessibilityLabel'];
+  buttonProps: ButtonBaseProps;
+  children: RadioProps['children'];
+  color: NonNullable<RadioProps['color']>;
+  disabled: boolean;
+  invalid: boolean;
+  isChecked: boolean;
+  readOnly: boolean;
+  setChecked: (checked: boolean) => void;
+  size: NonNullable<RadioProps['size']>;
+  testID: RadioProps['testID'];
+  theme: SurfaceTheme;
+}
+
+interface RadioContentInput {
+  children: RadioProps['children'];
+  color: NonNullable<RadioProps['color']>;
+  disabled: boolean;
+  interactionState: InteractionState;
+  invalid: boolean;
+  isChecked: boolean;
+  readOnly: boolean;
+  size: NonNullable<RadioProps['size']>;
+  theme: SurfaceTheme;
+}

package/src/features/form/radio/public.ts

@@ -0,0 +1,2 @@
+export type { RadioProps } from '../../../types/radio';
+export { Radio } from './adapters/inbound/Radio';

package/src/{components/radio → features/form/radio/utils}/isRadioTextContent.ts

@@ -1,8 +1,6 @@
 import type React from 'react';
 
-/***
- * Reports whether Radio content should use the built-in text-label presentation.
- */
+/*** Reports whether Radio content should use the built-in text-label presentation. */
 export function isRadioTextContent(children: React.ReactNode): children is string | number {
   return typeof children === 'string' || typeof children === 'number';
 }

package/src/features/form/text-input/adapters/inbound/TextInput.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Platform, TextInput as ReactNativeTextInput, View, type ViewStyle } from 'react-native';
+
+import { resolveFocusRingStyles } from '../../../../../internal/resolvers';
+import { useTheme } from '../../../../../theme/ThemeContext';
+import type { TextInputProps } from '../../../../../types/text-input';
+import { resolveTextInputPresentation } from '../../utils/resolveTextInputPresentation';
+
+/*** Renders a token-aware text input with controlled interaction policy. */
+export function TextInput(props: TextInputProps) {
+  const { theme } = useTheme();
+  const [focused, setFocused] = React.useState(false);
+  const {
+    disabled: _disabled,
+    interactionPolicy = 'enabled',
+    invalid: _invalid,
+    leadingAccessory,
+    readOnly = false,
+    size: _size,
+    trailingAccessory,
+    ...nativeProps
+  } = props;
+  const presentation = resolveTextInputPresentation(theme, props, focused);
+
+  return (
+    <View
+      style={[
+        presentation.containerStyle,
+        resolveFocusRingStyles(theme.semantics.border.focus, focused, Platform.OS === 'web'),
+      ]}
+    >
+      {renderAccessory(leadingAccessory, presentation.accessorySpacing, 'leading')}
+      <ReactNativeTextInput
+        {...nativeProps}
+        editable={presentation.editable}
+        numberOfLines={presentation.numberOfLines}
+        onBlur={(event) => {
+          setFocused(false);
+          nativeProps.onBlur?.(event);
+        }}
+        onChangeText={(nextValue) => {
+          if (interactionPolicy !== 'passive') {
+            nativeProps.onChangeText?.(nextValue);
+          }
+        }}
+        onFocus={(event) => {
+          setFocused(true);
+          nativeProps.onFocus?.(event);
+        }}
+        placeholderTextColor={presentation.placeholderColor}
+        readOnly={readOnly}
+        style={[presentation.inputStyle, nativeProps.style]}
+      />
+      {renderAccessory(trailingAccessory, presentation.accessorySpacing, 'trailing')}
+    </View>
+  );
+}
+
+/*** Renders one optional TextInput accessory with directional spacing. */
+function renderAccessory(
+  accessory: React.ReactNode,
+  spacing: number,
+  position: 'leading' | 'trailing',
+) {
+  if (!accessory) return null;
+  return <View style={resolveAccessoryStyle(spacing, position)}>{accessory}</View>;
+}
+
+/*** Resolves spacing around a leading or trailing TextInput accessory. */
+function resolveAccessoryStyle(spacing: number, position: 'leading' | 'trailing'): ViewStyle {
+  return position === 'leading' ? { marginRight: spacing } : { marginLeft: spacing };
+}

package/src/features/form/text-input/public.ts

@@ -0,0 +1,2 @@
+export type { TextInputProps } from '../../../types/text-input';
+export { TextInput } from './adapters/inbound/TextInput';

package/src/features/form/text-input/utils/resolveTextInputPresentation.ts

@@ -0,0 +1,91 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import {
+  resolveControlSize,
+  resolveFieldState,
+  resolveInputColors,
+  resolveTextStyles,
+} from '../../../../internal/resolvers';
+import type { SurfaceTheme } from '../../../../theme/types';
+import type { TextInputProps } from '../../../../types/text-input';
+
+/*** Resolves layout, colors, and editability for one TextInput state. */
+export function resolveTextInputPresentation(
+  theme: SurfaceTheme,
+  props: TextInputProps,
+  focused: boolean,
+): TextInputPresentation {
+  const controlSize = resolveControlSize(theme, props.size ?? 'm');
+  const disabled = props.disabled ?? false;
+  const readOnly = props.readOnly ?? false;
+  const fieldState = resolveFieldState({
+    disabled,
+    focused,
+    invalid: props.invalid ?? false,
+    readOnly,
+  });
+  const colors = resolveInputColors(theme, fieldState);
+  const textStyle = resolveTextStyles(theme, { variant: controlSize.textVariant });
+  const heights = resolveTextInputHeights(
+    controlSize,
+    props.multiline,
+    props.numberOfLines,
+    textStyle.lineHeight,
+  );
+
+  return {
+    accessorySpacing: theme.spacing.s,
+    containerStyle: {
+      alignItems: props.multiline ? 'flex-start' : 'center',
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderRadius: controlSize.borderRadius,
+      borderWidth: 1,
+      flexDirection: 'row',
+      minHeight: heights.container,
+      opacity: colors.opacity,
+      paddingHorizontal: controlSize.paddingHorizontal,
+      paddingVertical: controlSize.paddingVertical,
+    },
+    editable: props.interactionPolicy === 'passive' ? false : !disabled && !readOnly,
+    inputStyle: {
+      color: colors.contentColor,
+      flex: 1,
+      minHeight: heights.input,
+      padding: 0,
+      textAlignVertical: props.multiline ? 'top' : 'center',
+    },
+    numberOfLines: props.multiline ? props.numberOfLines : 1,
+    placeholderColor: colors.placeholderColor,
+  };
+}
+
+/*** Resolves input and container heights from control typography and multiline state. */
+function resolveTextInputHeights(
+  controlSize: ReturnType<typeof resolveControlSize>,
+  multiline: boolean | undefined,
+  numberOfLines: number | undefined,
+  lineHeight: TextStyle['lineHeight'],
+) {
+  const resolvedLineHeight =
+    typeof lineHeight === 'number'
+      ? lineHeight
+      : controlSize.minHeight - controlSize.paddingVertical * 2;
+  const lineCount = Math.max(numberOfLines ?? 1, 1);
+  const input = multiline
+    ? resolvedLineHeight * lineCount
+    : controlSize.minHeight - controlSize.paddingVertical * 2;
+  return {
+    input,
+    container: multiline ? input + controlSize.paddingVertical * 2 : controlSize.minHeight,
+  };
+}
+
+interface TextInputPresentation {
+  accessorySpacing: number;
+  containerStyle: ViewStyle;
+  editable: boolean;
+  inputStyle: TextStyle;
+  numberOfLines: number | undefined;
+  placeholderColor: string;
+}

package/src/features/icon/adapters/inbound/Icon.tsx

@@ -0,0 +1,14 @@
+import { resolveToken } from '../../../../theme/resolveToken';
+import { useTheme } from '../../../../theme/ThemeContext';
+import type { IconProps } from '../../../../types/icon';
+import { PortableIcon } from './PortableIcon';
+
+/*** Renders a theme-aware font or SVG icon through the portable icon adapter. */
+export function Icon(props: IconProps) {
+  const { theme } = useTheme();
+  const size = props.size ?? 'm';
+  const color = props.color ?? 'text';
+  const resolvedSize = typeof size === 'number' ? size : resolveToken(theme.spacing, size);
+  const resolvedColor = resolveToken(theme.colors, color);
+  return <PortableIcon {...props} color={resolvedColor} size={resolvedSize} />;
+}

package/src/{primitives/icon → features/icon/adapters/inbound}/PortableIcon.tsx

@@ -1,24 +1,8 @@
-import {
-  FontAwesome,
-  type FontAwesomeIconName,
-} from '@react-native-vector-icons/fontawesome/static';
-import {
-  FontAwesome5,
-  type FontAwesome5BrandIconName,
-  type FontAwesome5RegularIconName,
-  type FontAwesome5SolidIconName,
-} from '@react-native-vector-icons/fontawesome5/static';
-import {
-  FontAwesome6,
-  type FontAwesome6BrandIconName,
-  type FontAwesome6RegularIconName,
-  type FontAwesome6SolidIconName,
-} from '@react-native-vector-icons/fontawesome6/static';
-import { Ionicons, type IoniconsIconName } from '@react-native-vector-icons/ionicons/static';
-import {
-  MaterialDesignIcons,
-  type MaterialDesignIconsIconName,
-} from '@react-native-vector-icons/material-design-icons/static';
+import { FontAwesome } from '@react-native-vector-icons/fontawesome/static';
+import { FontAwesome5 } from '@react-native-vector-icons/fontawesome5/static';
+import { FontAwesome6 } from '@react-native-vector-icons/fontawesome6/static';
+import { Ionicons } from '@react-native-vector-icons/ionicons/static';
+import { MaterialDesignIcons } from '@react-native-vector-icons/material-design-icons/static';
 import React from 'react';
 import {
   Image,
@@ -30,39 +14,38 @@ import {
 } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-import type { SurfaceImageSource } from '../image';
+import type { FontIconSource, IconSource, SvgIconSource } from '../../../../types/icon';
+import type { SurfaceImageSource } from '../../../../types/image';
 
-export const SUPPORTED_ICON_PROVIDERS = [
-  'Ionicons',
-  'FontAwesome',
-  'FontAwesome5',
-  'FontAwesome6',
-  'MaterialDesignIcons',
-] as const;
-
-export type IconProvider = (typeof SUPPORTED_ICON_PROVIDERS)[number];
-export type IconVariant = 'regular' | 'solid' | 'brand';
+/*** Renders a resolved portable icon using the configured font or SVG runtime. */
+export function PortableIcon(props: PortableIconProps) {
+  if ('source' in props) return renderSvgIcon(props);
 
-export type FontIconSource =
-  | { name: IoniconsIconName; provider?: 'Ionicons'; variant?: never }
-  | { name: FontAwesomeIconName; provider: 'FontAwesome'; variant?: never }
-  | { name: FontAwesome5RegularIconName; provider: 'FontAwesome5'; variant: 'regular' }
-  | { name: FontAwesome5SolidIconName; provider: 'FontAwesome5'; variant: 'solid' }
-  | { name: FontAwesome5BrandIconName; provider: 'FontAwesome5'; variant: 'brand' }
-  | { name: FontAwesome6RegularIconName; provider: 'FontAwesome6'; variant: 'regular' }
-  | { name: FontAwesome6SolidIconName; provider: 'FontAwesome6'; variant: 'solid' }
-  | { name: FontAwesome6BrandIconName; provider: 'FontAwesome6'; variant: 'brand' }
-  | { name: MaterialDesignIconsIconName; provider: 'MaterialDesignIcons'; variant?: never };
+  const { provider } = props;
+  const sharedProps = {
+    color: props.color,
+    size: props.size,
+    style: props.style,
+    testID: props.testID,
+  };
 
-export interface SvgIconSource {
-  source: SurfaceImageSource;
-  name?: never;
-  provider?: never;
-  variant?: never;
+  switch (provider) {
+    case undefined:
+    case 'Ionicons':
+      return <Ionicons {...sharedProps} name={props.name} />;
+    case 'FontAwesome':
+      return <FontAwesome {...sharedProps} name={props.name} />;
+    case 'FontAwesome5':
+      return renderFontAwesome5(props, sharedProps);
+    case 'FontAwesome6':
+      return renderFontAwesome6(props, sharedProps);
+    case 'MaterialDesignIcons':
+      return <MaterialDesignIcons {...sharedProps} name={props.name} />;
+    default:
+      return assertNever(provider, 'provider');
+  }
 }
 
-export type IconSource = FontIconSource | SvgIconSource;
-
 interface PortableIconPresentationProps {
   color: string;
   size: number;
@@ -70,37 +53,25 @@ interface PortableIconPresentationProps {
 }
 
 type FontPortableIconProps = FontIconSource &
-  PortableIconPresentationProps & {
-    style?: StyleProp<TextStyle>;
-  };
-
+  PortableIconPresentationProps & { style?: StyleProp<TextStyle> };
 type SvgPortableIconProps = SvgIconSource &
-  PortableIconPresentationProps & {
-    style?: StyleProp<ViewStyle>;
-  };
-
+  PortableIconPresentationProps & { style?: StyleProp<ViewStyle> };
 type PortableIconProps = FontPortableIconProps | SvgPortableIconProps;
+type SharedIconProps = PortableIconPresentationProps & { style?: StyleProp<TextStyle> };
 
-type SharedIconProps = PortableIconPresentationProps & {
-  style?: StyleProp<TextStyle>;
-};
-
-const styles = StyleSheet.create({
-  bundledSvgImage: { height: '100%', width: '100%' },
-});
+const styles = StyleSheet.create({ bundledSvgImage: { height: '100%', width: '100%' } });
 
-/*** Resolve an SVG URI directly or through React Native's native bundled-asset API when available. */
+/*** Resolves an SVG URI directly or through React Native's bundled-asset API. */
 function resolveSvgIconUri(source: SurfaceImageSource): string | null {
   if (typeof source === 'string') return source;
   if (!Array.isArray(source) && typeof source === 'object' && typeof source.uri === 'string') {
     return source.uri;
   }
   if (typeof Image.resolveAssetSource !== 'function') return null;
-
   return Image.resolveAssetSource(source).uri;
 }
 
-/*** Render URI-backed SVGs through SvgUri and let React Native Web resolve bundled numeric assets through Image. */
+/*** Renders URI-backed SVGs and bundled SVG image assets. */
 function renderSvgIcon(props: SvgPortableIconProps) {
   const uri = resolveSvgIconUri(props.source);
   if (uri) {
@@ -124,10 +95,12 @@ function renderSvgIcon(props: SvgPortableIconProps) {
   );
 }
 
+/*** Rejects unsupported icon configuration at runtime. */
 function assertNever(value: never, configuration: string): never {
   throw new Error(`Unsupported icon ${configuration}: ${String(value)}`);
 }
 
+/*** Renders one FontAwesome5 variant. */
 function renderFontAwesome5(
   props: Extract<IconSource, { provider: 'FontAwesome5' }>,
   sharedProps: SharedIconProps,
@@ -146,6 +119,7 @@ function renderFontAwesome5(
   }
 }
 
+/*** Renders one FontAwesome6 variant. */
 function renderFontAwesome6(
   props: Extract<IconSource, { provider: 'FontAwesome6' }>,
   sharedProps: SharedIconProps,
@@ -163,33 +137,3 @@ function renderFontAwesome6(
       return assertNever(variant, 'FontAwesome6 variant');
   }
 }
-
-export function PortableIcon(props: PortableIconProps) {
-  if ('source' in props) {
-    return renderSvgIcon(props);
-  }
-
-  const { provider } = props;
-  const sharedProps = {
-    color: props.color,
-    size: props.size,
-    style: props.style,
-    testID: props.testID,
-  };
-
-  switch (provider) {
-    case undefined:
-    case 'Ionicons':
-      return <Ionicons {...sharedProps} name={props.name} />;
-    case 'FontAwesome':
-      return <FontAwesome {...sharedProps} name={props.name} />;
-    case 'FontAwesome5':
-      return renderFontAwesome5(props, sharedProps);
-    case 'FontAwesome6':
-      return renderFontAwesome6(props, sharedProps);
-    case 'MaterialDesignIcons':
-      return <MaterialDesignIcons {...sharedProps} name={props.name} />;
-    default:
-      return assertNever(provider, 'provider');
-  }
-}

package/src/{primitives/icon → features/icon/adapters/inbound}/PortableIcon.web.test.tsx

@@ -34,13 +34,13 @@ await mock.module('react-native-svg', () => ({
     }),
 }));
 
+const { SUPPORTED_ICON_PROVIDERS } = await import('../../constants');
 const { Icon } = await import('./Icon');
-const { PortableIcon, SUPPORTED_ICON_PROVIDERS } = await import('./PortableIcon');
+const { PortableIcon } = await import('./PortableIcon');
 
 describe('portable icon rendering', () => {
   test('renders Ionicons through the public Icon API', () => {
     const markup = renderToStaticMarkup(<Icon color="#123456" name="home-outline" size={18} />);
-
     expect(markup).toContain('font-family:Ionicons');
   });
 
@@ -48,7 +48,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" name="github" provider="FontAwesome" size={18} />,
     );
-
     expect(markup).toContain('font-family:FontAwesome');
   });
 
@@ -56,7 +55,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" name="microsoft" provider="FontAwesome5" size={18} variant="brand" />,
     );
-
     expect(markup).toContain('font-family:FontAwesome5Brands-Regular');
   });
 
@@ -64,7 +62,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" name="video" provider="FontAwesome5" size={18} variant="solid" />,
     );
-
     expect(markup).toContain('font-family:FontAwesome5Free-Solid');
   });
 
@@ -72,7 +69,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" name="x-twitter" provider="FontAwesome6" size={18} variant="brand" />,
     );
-
     expect(markup).toContain('font-family:FontAwesome6Brands-Regular');
   });
 
@@ -80,7 +76,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" name="bookshelf" provider="MaterialDesignIcons" size={18} />,
     );
-
     expect(markup).toContain('font-family:MaterialDesignIcons');
   });
 
@@ -88,7 +83,6 @@ describe('portable icon rendering', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" size={18} source="https://example.com/icons/home.svg" />,
     );
-
     expect(markup).toContain('data-uri="https://example.com/icons/home.svg"');
     expect(markup).toContain('data-color="#123456"');
     expect(markup).toContain('width="18"');
@@ -101,7 +95,6 @@ describe('portable icon web assets', () => {
     const markup = renderToStaticMarkup(
       <Icon color="#123456" size={18} source={42} testID="bundled-svg" />,
     );
-
     expect(markup).toContain('data-image-source="42"');
     expect(markup).toContain('data-testid="bundled-svg"');
     expect(markup).toContain('data-tint-color="#123456"');
@@ -162,7 +155,10 @@ describe('portable icon runtime rejection', () => {
 
 describe('portable icon dependency boundary', () => {
   test('has no Expo icon dependency or resolver path', () => {
-    const packageSource = readFileSync(new URL('../../../package.json', import.meta.url), 'utf8');
+    const packageSource = readFileSync(
+      new URL('../../../../../package.json', import.meta.url),
+      'utf8',
+    );
     const iconSource = readFileSync(new URL('./PortableIcon.tsx', import.meta.url), 'utf8');
 
     expect(packageSource).not.toContain('@expo/vector-icons');