@compsych/mobile-ui 1.0.9 → 1.0.11

package/src/{EmptyState.tsx → components/EmptyState/index.tsx}

@@ -1,12 +1,17 @@
-import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
+
 import {
   Pressable,
+  StyleProp,
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { sys } from '../../tokens';
 
 export type EmptyStateStyle = 'icon' | 'illustration';
 export type EmptyStateViewport = 'desktop' | 'mobile';
@@ -29,6 +34,7 @@ export interface EmptyStateProps {
   onAction?: () => void;
   /** Whether the action button is shown (default: true when actionLabel is set) */
   showAction?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -79,7 +85,7 @@ const ILLUS_H = 157;
 const SCALE = ILLUS_W / 398; // ≈ 0.703
 
 const CARD_W = Math.round(160 * SCALE); // 112
-const CARD_H = Math.round(98 * SCALE);  // 69
+const CARD_H = Math.round(98 * SCALE); // 69
 
 function scaledPos(left: number, top: number) {
   return {
@@ -120,7 +126,8 @@ function EmptyIllustration() {
               width: CARD_W,
               height: CARD_H,
               borderColor: cr.outline.sysOutlineVariant,
-              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+              backgroundColor:
+                cr.surface.surfaceContainer.sysSurfaceContainerLowest,
             },
             styles.cardFaded,
           ]}
@@ -138,7 +145,8 @@ function EmptyIllustration() {
             width: CARD_W,
             height: CARD_H,
             borderColor: cr.accent.primary.sysPrimary,
-            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            backgroundColor:
+              cr.surface.surfaceContainer.sysSurfaceContainerLowest,
           },
         ]}
       >
@@ -190,12 +198,13 @@ export function EmptyState({
   actionLabel,
   onAction,
   showAction,
+  containerStyle,
 }: EmptyStateProps) {
   const vp = VIEWPORT[viewport];
   const hasAction = showAction !== undefined ? showAction : !!actionLabel;
 
   return (
-    <View style={styles.root}>
+    <View style={[styles.root, containerStyle]}>
       {/* ── Graphic ───────────────────────────────────────────────────────── */}
       {style === 'illustration' ? (
         <EmptyIllustration />
@@ -206,7 +215,8 @@ export function EmptyState({
             {
               width: vp.iconCircle,
               height: vp.iconCircle,
-              backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow,
+              backgroundColor:
+                cr.surface.surfaceContainer.sysSurfaceContainerLow,
             },
           ]}
         >

package/src/components/HeaderText/HeaderText.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { HeaderText } from './index';
+
+describe('HeaderText', () => {
+  it('renders children', () => {
+    const { getByText } = render(<HeaderText>Page Title</HeaderText>);
+    expect(getByText('Page Title')).toBeTruthy();
+  });
+
+  it.each([
+    'large',
+    'medium',
+    'small',
+    'headlineLarge',
+    'headlineMedium',
+    'headlineSmall',
+    'titleLarge',
+    'titleMedium',
+    'titleSmall',
+  ] as const)('renders variant "%s" without crashing', (variant) => {
+    const { getByText } = render(
+      <HeaderText variant={variant}>Title</HeaderText>,
+    );
+    expect(getByText('Title')).toBeTruthy();
+  });
+
+  it('applies custom color', () => {
+    const { getByText } = render(
+      <HeaderText color="#0000ff">Blue Title</HeaderText>,
+    );
+    expect(getByText('Blue Title')).toBeTruthy();
+  });
+
+  it('renders emphasized text', () => {
+    const { getByText } = render(
+      <HeaderText emphasized>Emphasized</HeaderText>,
+    );
+    expect(getByText('Emphasized')).toBeTruthy();
+  });
+});

package/src/{HeaderText.tsx → components/HeaderText/index.tsx}

@@ -1,8 +1,10 @@
 import React from 'react';
+
 import { Text, type TextProps } from 'react-native';
+
 import { useFonts } from 'expo-font';
 
-import { sys } from './tokens';
+import { sys } from '../../tokens';
 
 export type HeaderVariant =
   | 'large'
@@ -49,13 +51,15 @@ export function HeaderText({
   ...rest
 }: HeaderTextProps) {
   const [fontsLoaded] = useFonts({
-    GoogleSans_400Regular: require('./fonts/GoogleSans_400Regular.ttf'),
-    GoogleSans_500Medium: require('./fonts/GoogleSans_500Medium.ttf'),
-    GoogleSans_600SemiBold: require('./fonts/GoogleSans_600SemiBold.ttf'),
+    GoogleSans_400Regular: require('../../fonts/GoogleSans_400Regular.ttf'),
+    GoogleSans_500Medium: require('../../fonts/GoogleSans_500Medium.ttf'),
+    GoogleSans_600SemiBold: require('../../fonts/GoogleSans_600SemiBold.ttf'),
   });
 
   const token = ts[VARIANT_TOKEN_KEY[variant]];
-  const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
+  const weight = emphasized
+    ? token.sysFontWeightEmphasized
+    : token.sysFontWeight;
 
   return (
     <Text

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Input } from './index';
+
+describe('Input', () => {
+  it('renders label', () => {
+    const { getByText } = render(<Input label="Email" />);
+    expect(getByText('Email')).toBeTruthy();
+  });
+
+  it('renders helper text', () => {
+    const { getByText } = render(
+      <Input label="Email" helperText="Enter your work email" />,
+    );
+    expect(getByText('Enter your work email')).toBeTruthy();
+  });
+
+  it('renders error text when invalid', () => {
+    const { getByText } = render(
+      <Input label="Email" invalid errorText="Invalid email address" />,
+    );
+    expect(getByText('Invalid email address')).toBeTruthy();
+  });
+
+  it('calls onChangeText when text changes', () => {
+    const onChangeText = jest.fn();
+    const { getByDisplayValue } = render(
+      <Input label="Name" value="" onChangeText={onChangeText} />,
+    );
+    fireEvent.changeText(getByDisplayValue(''), 'John');
+    expect(onChangeText).toHaveBeenCalledWith('John');
+  });
+
+  it.each(['sm', 'md', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Input label="Field" size={size} />);
+      expect(getByText('Field')).toBeTruthy();
+    },
+  );
+});

package/src/{Input.tsx → components/Input/index.tsx}

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
+
 import {
-  TextInput,
-  TextInputProps,
   StyleSheet,
   Text,
+  TextInput,
+  TextInputProps,
   View,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { sys } from '../../tokens';
 
 export type InputSize = 'sm' | 'md' | 'lg';
 
@@ -78,15 +80,16 @@ export function Input({
   const hasError = invalid || !!errorText;
 
   // ── Border ──────────────────────────────────────────────────────────────
-  const borderWidth = isFocused || hasError
-    ? dim.borderWidth.sysStrokeMedium
-    : dim.borderWidth.sysStrokeThin;
+  const borderWidth =
+    isFocused || hasError
+      ? dim.borderWidth.sysStrokeMedium
+      : dim.borderWidth.sysStrokeThin;
 
   const borderColor = hasError
     ? cr.error.sysError
     : isFocused
-    ? cr.accent.primary.sysPrimary
-    : cr.outline.sysOutlineVariant;
+      ? cr.accent.primary.sysPrimary
+      : cr.outline.sysOutlineVariant;
 
   // ── Text colours ─────────────────────────────────────────────────────────
   const textColor = cr.surface.surface.sysOnSurface;
@@ -136,7 +139,8 @@ export function Input({
             borderRadius: s.radius,
             borderWidth,
             borderColor,
-            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            backgroundColor:
+              cr.surface.surfaceContainer.sysSurfaceContainerLowest,
             flexDirection: 'row',
             alignItems: 'center',
             paddingHorizontal: s.paddingH,
@@ -147,7 +151,15 @@ export function Input({
         >
           {/* Leading icon */}
           {leadingIcon && (
-            <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <View
+              style={{
+                width: s.iconSize,
+                height: s.iconSize,
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+              }}
+            >
               {leadingIcon}
             </View>
           )}
@@ -182,7 +194,15 @@ export function Input({
 
           {/* Trailing icon */}
           {trailingIcon && (
-            <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <View
+              style={{
+                width: s.iconSize,
+                height: s.iconSize,
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+              }}
+            >
               {trailingIcon}
             </View>
           )}

package/src/components/List/List.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { List, ListItem } from './index';
+
+const items = [{ label: 'Item one' }, { label: 'Item two' }];
+
+describe('List', () => {
+  it('renders list items from items prop', () => {
+    const { getByText } = render(<List items={items} />);
+    expect(getByText('Item one')).toBeTruthy();
+    expect(getByText('Item two')).toBeTruthy();
+  });
+
+  it('renders items with onPress callbacks', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <List items={[{ label: 'Tappable', onPress }]} />,
+    );
+    fireEvent.press(getByText('Tappable'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('ListItem', () => {
+  it('renders label', () => {
+    const { getByText } = render(<ListItem label="Settings" />);
+    expect(getByText('Settings')).toBeTruthy();
+  });
+
+  it('renders subLabel when type is detailed', () => {
+    const { getByText } = render(
+      <ListItem
+        type="detailed"
+        label="Notifications"
+        subLabel="Manage your alerts"
+      />,
+    );
+    expect(getByText('Manage your alerts')).toBeTruthy();
+  });
+
+  it('calls onPress when tapped', () => {
+    const onPress = jest.fn();
+    const { getByRole } = render(
+      <ListItem label="Tappable" onPress={onPress} />,
+    );
+    fireEvent.press(getByRole('button'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['simple', 'detailed'] as const)(
+    'renders type "%s" without crashing',
+    (type) => {
+      const { getByText } = render(<ListItem label="Item" type={type} />);
+      expect(getByText('Item')).toBeTruthy();
+    },
+  );
+});

package/src/{List.tsx → components/List/index.tsx}

@@ -1,8 +1,17 @@
 import React from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+
 import { Ionicons } from '@expo/vector-icons';
-import { sys } from './tokens';
-import { BodyText } from './BodyText';
+
+import { sys } from '../../tokens';
+import { BodyText } from '../BodyText';
 
 export type ListItemType = 'simple' | 'detailed';
 
@@ -19,6 +28,7 @@ export interface ListItemProps {
 export interface ListProps {
   items: Omit<ListItemProps, 'showDivider'>[];
   type?: ListItemType;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
@@ -43,7 +53,10 @@ export function ListItem({
         <View
           style={[
             styles.iconBadge,
-            { backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLow },
+            {
+              backgroundColor:
+                cr.surface.surfaceContainer.sysSurfaceContainerLow,
+            },
           ]}
         >
           {icon}
@@ -62,7 +75,10 @@ export function ListItem({
           {label}
         </BodyText>
         {isDetailed && subLabel && (
-          <BodyText variant="small" color={cr.surface.surface.sysOnSurfaceVariant}>
+          <BodyText
+            variant="small"
+            color={cr.surface.surface.sysOnSurfaceVariant}
+          >
             {subLabel}
           </BodyText>
         )}
@@ -132,9 +148,9 @@ export function ListItem({
 
 // ── List ──────────────────────────────────────────────────────────────────────
 
-export function List({ items, type = 'simple' }: ListProps) {
+export function List({ items, type = 'simple', style }: ListProps) {
   return (
-    <View>
+    <View style={style}>
       {items.map((item, index) => (
         <ListItem
           key={index}

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Pagination } from './index';
+
+describe('Pagination', () => {
+  it('renders current and total page info', () => {
+    const { getByText } = render(
+      <Pagination currentPage={2} totalPages={10} onPageChange={jest.fn()} />,
+    );
+    expect(getByText('2')).toBeTruthy();
+    expect(getByText('10')).toBeTruthy();
+  });
+
+  it('calls onPageChange with next page when next is pressed', () => {
+    const onPageChange = jest.fn();
+    const { getByLabelText } = render(
+      <Pagination
+        currentPage={3}
+        totalPages={10}
+        onPageChange={onPageChange}
+      />,
+    );
+    fireEvent.press(getByLabelText('Next page'));
+    expect(onPageChange).toHaveBeenCalledWith(4);
+  });
+
+  it('calls onPageChange with previous page when prev is pressed', () => {
+    const onPageChange = jest.fn();
+    const { getByLabelText } = render(
+      <Pagination
+        currentPage={3}
+        totalPages={10}
+        onPageChange={onPageChange}
+      />,
+    );
+    fireEvent.press(getByLabelText('Previous page'));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it.each(['sm', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { toJSON } = render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={jest.fn()}
+          size={size}
+        />,
+      );
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+});

package/src/{Pagination.tsx → components/Pagination/index.tsx}

@@ -1,7 +1,17 @@
-import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { sys } from './tokens';
+
+import {
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { sys } from '../../tokens';
 
 export type PaginationSize = 'sm' | 'lg';
 
@@ -29,6 +39,7 @@ export interface PaginationProps {
   siblingCount?: number;
   /** On mobile/compact layouts — renders only prev + next arrows (no page numbers) */
   compact?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -149,9 +160,10 @@ function PageItem({ s, page, isActive, onPress }: PageItemProps) {
               borderColor,
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundColor: pressed && !isActive
-                ? cr.transparent.neutral.sysBlack10
-                : 'transparent',
+              backgroundColor:
+                pressed && !isActive
+                  ? cr.transparent.neutral.sysBlack10
+                  : 'transparent',
             }}
           >
             <Text
@@ -211,8 +223,7 @@ interface NavButtonProps {
 }
 
 function NavButton({ s, direction, disabled, onPress }: NavButtonProps) {
-  const iconName =
-    direction === 'prev' ? 'chevron-back' : 'chevron-forward';
+  const iconName = direction === 'prev' ? 'chevron-back' : 'chevron-forward';
 
   return (
     <Pressable
@@ -230,9 +241,10 @@ function NavButton({ s, direction, disabled, onPress }: NavButtonProps) {
             borderRadius: s.itemSize / 2,
             alignItems: 'center',
             justifyContent: 'center',
-            backgroundColor: pressed && !disabled
-              ? cr.transparent.neutral.sysBlack10
-              : 'transparent',
+            backgroundColor:
+              pressed && !disabled
+                ? cr.transparent.neutral.sysBlack10
+                : 'transparent',
           }}
         >
           <Ionicons
@@ -255,6 +267,7 @@ export function Pagination({
   onPageChange,
   siblingCount = 1,
   compact = false,
+  style,
 }: PaginationProps) {
   const s = SIZE_TOKENS[size];
   const pages = buildPageRange(totalPages, currentPage, siblingCount);
@@ -322,10 +335,12 @@ export function Pagination({
           {
             paddingHorizontal: s.pillPaddingH,
             paddingVertical: s.pillPaddingV,
-            backgroundColor: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+            backgroundColor:
+              cr.surface.surfaceContainer.sysSurfaceContainerLowest,
             borderColor: cr.outline.sysOutline,
             borderWidth: dim.borderWidth.sysStrokeThin,
           },
+          style,
         ]}
       >
         {content}
@@ -333,7 +348,8 @@ export function Pagination({
     );
   }
 
-  return content;
+  // sm — wrap content in a View so style can be applied
+  return <View style={style}>{content}</View>;
 }
 
 const styles = StyleSheet.create({

package/src/components/PlanCard/PlanCard.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { PlanCard } from './index';
+
+const items = [
+  { id: '1', title: 'Session 1', subtitle: 'Introduction', checked: false },
+  { id: '2', title: 'Session 2', subtitle: 'Deep work', checked: true },
+];
+
+describe('PlanCard', () => {
+  it('renders title', () => {
+    const { getByText } = render(<PlanCard title="My Plan" />);
+    expect(getByText('My Plan')).toBeTruthy();
+  });
+
+  it('renders tag when provided', () => {
+    const { getByText } = render(<PlanCard title="Plan" tag="Recommended" />);
+    expect(getByText('Recommended')).toBeTruthy();
+  });
+
+  it('renders items when expanded', () => {
+    const { getByText } = render(
+      <PlanCard title="Plan" items={items} expanded />,
+    );
+    expect(getByText('Session 1')).toBeTruthy();
+    expect(getByText('Session 2')).toBeTruthy();
+  });
+
+  it('calls onToggle when header is pressed', () => {
+    const onToggle = jest.fn();
+    const { getByLabelText } = render(
+      <PlanCard title="Plan" onToggle={onToggle} />,
+    );
+    fireEvent.press(getByLabelText('Expand'));
+    expect(onToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders without items', () => {
+    const { toJSON } = render(<PlanCard title="Empty Plan" />);
+    expect(toJSON()).toBeTruthy();
+  });
+});