Karthik-B-06

Typography System — Design Doc

Status: Proposal. No code changed yet. Goal: Replace 40+ cryptic tokens with 12 semantic variants and one clean component.

---

1. What's Wrong Today

| Problem | Impact |

Karthik-B-06

SuburbanStationSwitch Component Documentation

Overview

The SuburbanStationSwitch component is a sophisticated React Native component designed to display a visual timeline of a multi-leg journey involving train transfers and walking segments. It provides users with a clear, step-by-step visualization of their station switching plan, complete with real-time status tracking and animated progress indicators.

Table of Contents

1. Component Purpose
2. Features

Karthik-B-06

BusSwitchModal Component

A React Native bottom sheet modal component that displays bus information and switching options in two different states:

1. When specific bus information is available
2. When showing a list of alternative buses

🎯 Features

• Bottom sheet modal with a custom handle component
• Dynamic countdown timer for bus arrival

Karthik-B-06

import { useCallback, useMemo } from 'react';
import {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  WithSpringConfig,
  withTiming,
  WithTimingConfig,
} from 'react-native-reanimated';

Karthik-B-06

Metro/Bus Ticket Components Documentation

Overview

This documentation covers a set of React Native components that work together to create a sophisticated ticket display interface for public transportation (Metro and Bus services). The system consists of three main components:

1. TransitInfoCard - Main ticket information display
2. TicketSplit - Passenger count breakdown
3. TicketHeader - Ticket metadata display

Component Architecture

Karthik-B-06

import React, { useEffect, useMemo, useState } from 'react';
import { Pressable, View } from 'react-native';
import { PlayBackType } from 'react-native-audio-recorder-player';
import Animated, { FadeIn, FadeOut, useSharedValue } from 'react-native-reanimated';

import { Slider } from '~/components/Slider';
import { Spinner } from '~/components/Spinner';
import { useAudioPlayer } from '~/store/useAudioPlayer';
import { PauseIcon, PlayIcon } from '~/svg';
import { tailwind } from '~/theme/tailwind';

Karthik-B-06

import React from 'react';
import { LayoutChangeEvent, StyleSheet } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  clamp,
  Extrapolate,
  interpolate,
  runOnJS,
  SharedValue,
  useAnimatedReaction,

Karthik-B-06

import React, { useCallback } from "react";
import {
  NativeSyntheticEvent,
  Platform,
  Pressable,
  TextInputContentSizeChangeEventData,
  TextInputProps,
} from "react-native";
import Animated, {
  Layout,

Karthik-B-06

const AudioPlayer = (props: AudioPlayerProps) => {
  const { audioSrc } = props;

  const [isPlaying, setIsPlaying] = useState(false);
  const [isSoundLoading, setSoundLoadStatus] = useState(true);

  const { position, duration } = useProgress();

  const currentPosition = useDerivedValue(() => Math.round(position));
  const totalDuration = useDerivedValue(() => Math.round(duration));

Karthik-B-06

import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  Alert,
  Dimensions,
  Pressable,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  View,