@compsych/mobile-ui 1.0.8 → 1.0.10

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Breadcrumb } from './index';
+
+const items = [
+  { label: 'Home', onPress: jest.fn() },
+  { label: 'Settings', onPress: jest.fn() },
+  { label: 'Profile' },
+];
+
+describe('Breadcrumb', () => {
+  it('renders all item labels', () => {
+    const { getByText } = render(<Breadcrumb items={items} />);
+    expect(getByText('Home')).toBeTruthy();
+    expect(getByText('Settings')).toBeTruthy();
+    expect(getByText('Profile')).toBeTruthy();
+  });
+
+  it('calls onPress for a tappable item', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(
+      <Breadcrumb items={[{ label: 'Home', onPress }, { label: 'Current' }]} />,
+    );
+    fireEvent.press(getByText('Home'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['sm', 'lg'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Breadcrumb items={items} size={size} />);
+      expect(getByText('Home')).toBeTruthy();
+    },
+  );
+});

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

@@ -1,13 +1,18 @@
-import { Ionicons } from '@expo/vector-icons';
 import React from 'react';
+
 import {
   Pressable,
   ScrollView,
+  StyleProp,
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { Ionicons } from '@expo/vector-icons';
+
+import { sys } from '../../tokens';
 
 export type BreadcrumbSize = 'sm' | 'lg';
 
@@ -30,6 +35,7 @@ export interface BreadcrumbItem {
 export interface BreadcrumbProps {
   items: BreadcrumbItem[];
   size?: BreadcrumbSize;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -55,7 +61,7 @@ const SIZE_TOKENS = {
   },
 };
 
-export function Breadcrumb({ items, size = 'lg' }: BreadcrumbProps) {
+export function Breadcrumb({ items, size = 'lg', style }: BreadcrumbProps) {
   const s = SIZE_TOKENS[size];
 
   return (
@@ -64,6 +70,7 @@ export function Breadcrumb({ items, size = 'lg' }: BreadcrumbProps) {
       horizontal
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={styles.row}
+      style={style}
     >
       {items.map((item, index) => {
         const isLast = index === items.length - 1;
@@ -81,7 +88,9 @@ export function Breadcrumb({ items, size = 'lg' }: BreadcrumbProps) {
               styles.content,
               {
                 paddingHorizontal: s.paddingH,
-                paddingVertical: item.isHome ? dim.spacing.padding.sysPadding2 : s.paddingV,
+                paddingVertical: item.isHome
+                  ? dim.spacing.padding.sysPadding2
+                  : s.paddingV,
                 gap: item.isHome ? 0 : dim.spacing.padding.sysPadding4,
               },
               item.disabled && styles.disabled,

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Button } from './index';
+
+describe('Button', () => {
+  it('renders label', () => {
+    const { getByText } = render(<Button label="Submit" />);
+    expect(getByText('Submit')).toBeTruthy();
+  });
+
+  it('calls onPress when tapped', () => {
+    const onPress = jest.fn();
+    const { getByRole } = render(<Button label="Submit" onPress={onPress} />);
+    fireEvent.press(getByRole('button'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('is accessible as disabled when disabled prop is set', () => {
+    const { getByRole } = render(<Button label="Submit" disabled />);
+    expect(getByRole('button').props.accessibilityState.disabled).toBe(true);
+  });
+
+  it.each(['filled', 'tonal', 'outlined', 'elevated', 'text'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { getByText } = render(<Button label="Button" variant={variant} />);
+      expect(getByText('Button')).toBeTruthy();
+    },
+  );
+
+  it.each(['sm', 'md', 'lg', 'xl'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Button label="Button" size={size} />);
+      expect(getByText('Button')).toBeTruthy();
+    },
+  );
+
+  it('renders in full width mode', () => {
+    const { getByText } = render(<Button label="Full" fullWidth />);
+    expect(getByText('Full')).toBeTruthy();
+  });
+});

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

@@ -1,13 +1,15 @@
 import React from 'react';
+
 import {
   ActivityIndicator,
   Pressable,
+  type PressableProps,
   StyleSheet,
   Text,
   View,
-  type PressableProps,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { sys } from '../../tokens';
 
 export type ButtonVariant =
   | 'filled'
@@ -20,7 +22,10 @@ export type ButtonVariant =
 
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
-export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+export interface ButtonProps extends Omit<
+  PressableProps,
+  'children' | 'style'
+> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   label: string;
@@ -153,18 +158,18 @@ export function Button({
           ...(iconOnly
             ? { width: s.height, height: s.height }
             : variant === 'text'
-            ? {
-                // Text variant is content-height (no fixed container). Figma:
-                // sm=26px, md=28px, lg=31px, xl=32px — each resolves to
-                // lineHeight + 2×paddingV, not the standard fixed height.
-                paddingHorizontal: 0,
-                paddingVertical: s.paddingV,
-              }
-            : {
-                height: s.height,
-                paddingHorizontal: paddingH,
-                paddingVertical: s.paddingV,
-              }),
+              ? {
+                  // Text variant is content-height (no fixed container). Figma:
+                  // sm=26px, md=28px, lg=31px, xl=32px — each resolves to
+                  // lineHeight + 2×paddingV, not the standard fixed height.
+                  paddingHorizontal: 0,
+                  paddingVertical: s.paddingV,
+                }
+              : {
+                  height: s.height,
+                  paddingHorizontal: paddingH,
+                  paddingVertical: s.paddingV,
+                }),
           ...(fullWidth && !iconOnly ? { alignSelf: 'stretch' } : {}),
           opacity: isDisabled ? 0.48 : pressed ? 0.82 : 1,
           ...(variant === 'elevated'
@@ -183,7 +188,14 @@ export function Button({
         {loading ? (
           <ActivityIndicator size={s.iconSize} color={v.label} />
         ) : leadingIcon ? (
-          <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center' }}>
+          <View
+            style={{
+              width: s.iconSize,
+              height: s.iconSize,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             {leadingIcon}
           </View>
         ) : null}
@@ -204,7 +216,14 @@ export function Button({
         )}
 
         {trailingIcon && (
-          <View style={{ width: s.iconSize, height: s.iconSize, alignItems: 'center', justifyContent: 'center' }}>
+          <View
+            style={{
+              width: s.iconSize,
+              height: s.iconSize,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
             {trailingIcon}
           </View>
         )}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Checkbox } from './index';
+
+describe('Checkbox', () => {
+  it('renders label', () => {
+    const { getByText } = render(<Checkbox label="Accept terms" />);
+    expect(getByText('Accept terms')).toBeTruthy();
+  });
+
+  it('renders description when provided', () => {
+    const { getByText } = render(
+      <Checkbox label="Subscribe" description="Get weekly updates" />,
+    );
+    expect(getByText('Get weekly updates')).toBeTruthy();
+  });
+
+  it('calls onChange when pressed', () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(
+      <Checkbox label="Check me" checked={false} onChange={onChange} />,
+    );
+    fireEvent.press(getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('does not call onChange when disabled', () => {
+    const onChange = jest.fn();
+    const { getByRole } = render(
+      <Checkbox
+        label="Disabled"
+        checked={false}
+        onChange={onChange}
+        disabled
+      />,
+    );
+    fireEvent.press(getByRole('checkbox'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('renders indeterminate state', () => {
+    const { getByRole } = render(
+      <Checkbox label="Indeterminate" checked="indeterminate" />,
+    );
+    expect(getByRole('checkbox')).toBeTruthy();
+  });
+
+  it.each(['sm', 'md'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Checkbox label="Size test" size={size} />);
+      expect(getByText('Size test')).toBeTruthy();
+    },
+  );
+});

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

@@ -1,7 +1,17 @@
-import { Ionicons } from '@expo/vector-icons';
 import React, { useState } 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 CheckboxSize = 'sm' | 'md';
 export type CheckboxCheckedState = boolean | 'indeterminate';
@@ -15,13 +25,26 @@ export interface CheckboxProps {
   description?: string;
   disabled?: boolean;
   invalid?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
 
 const SIZE_TOKENS = {
-  sm: { box: 20, hitArea: 36, fontSize: ts.bodySmall.sysFontSize, lineHeight: ts.bodySmall.sysLineHeight, iconSize: 13 },
-  md: { box: 24, hitArea: 40, fontSize: ts.bodyMedium.sysFontSize, lineHeight: ts.bodyMedium.sysLineHeight, iconSize: 16 },
+  sm: {
+    box: 20,
+    hitArea: 36,
+    fontSize: ts.bodySmall.sysFontSize,
+    lineHeight: ts.bodySmall.sysLineHeight,
+    iconSize: 13,
+  },
+  md: {
+    box: 24,
+    hitArea: 40,
+    fontSize: ts.bodyMedium.sysFontSize,
+    lineHeight: ts.bodyMedium.sysLineHeight,
+    iconSize: 16,
+  },
 };
 
 export function Checkbox({
@@ -33,18 +56,20 @@ export function Checkbox({
   description,
   disabled = false,
   invalid = false,
+  style,
 }: CheckboxProps) {
-  const [internalChecked, setInternalChecked] = useState<boolean>(defaultChecked);
+  const [internalChecked, setInternalChecked] =
+    useState<boolean>(defaultChecked);
   const isControlled = checkedProp !== undefined;
-  const checkedState: CheckboxCheckedState = isControlled ? checkedProp : internalChecked;
+  const checkedState: CheckboxCheckedState = isControlled
+    ? checkedProp
+    : internalChecked;
 
   const isChecked = checkedState === true;
   const isIndeterminate = checkedState === 'indeterminate';
   const isSelected = isChecked || isIndeterminate;
 
   const s = SIZE_TOKENS[size];
-  const hitPad = (s.hitArea - s.box) / 2;
-
   function handlePress() {
     if (disabled) return;
     // Indeterminate → true on activation (matches HTML spec)
@@ -56,8 +81,8 @@ export function Checkbox({
   const borderColor = invalid
     ? cr.error.sysError
     : isSelected
-    ? 'transparent'
-    : cr.outline.sysOutlineFixed;
+      ? 'transparent'
+      : cr.outline.sysOutlineFixed;
 
   const boxBg = isSelected
     ? invalid
@@ -74,10 +99,7 @@ export function Checkbox({
         checked: isIndeterminate ? 'mixed' : isChecked,
         disabled,
       }}
-      style={({ pressed }) => [
-        styles.root,
-        disabled && styles.disabled,
-      ]}
+      style={() => [styles.root, disabled && styles.disabled, style]}
     >
       {({ pressed }) => (
         <>

package/src/components/Chip/Chip.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Chip } from './index';
+
+describe('Chip', () => {
+  it('renders label', () => {
+    const { getByText } = render(<Chip label="Filter" />);
+    expect(getByText('Filter')).toBeTruthy();
+  });
+
+  it('calls onPress when tapped', () => {
+    const onPress = jest.fn();
+    const { getByText } = render(<Chip label="Filter" onPress={onPress} />);
+    fireEvent.press(getByText('Filter'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders selected state', () => {
+    const { toJSON } = render(<Chip label="Selected" selected />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['sm', 'md', 'lg', 'xl'] as const)(
+    'renders size "%s" without crashing',
+    (size) => {
+      const { getByText } = render(<Chip label="Chip" size={size} />);
+      expect(getByText('Chip')).toBeTruthy();
+    },
+  );
+
+  it.each(['neutral', 'informative', 'positive', 'danger', 'warning'] as const)(
+    'renders usage "%s" without crashing',
+    (usage) => {
+      const { getByText } = render(<Chip label="Chip" usage={usage} />);
+      expect(getByText('Chip')).toBeTruthy();
+    },
+  );
+});

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

@@ -1,15 +1,25 @@
-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 ChipSize = 'sm' | 'md' | 'lg' | 'xl';
-export type ChipUsage = 'neutral' | 'informative' | 'positive' | 'danger' | 'warning';
+export type ChipUsage =
+  | 'neutral'
+  | 'informative'
+  | 'positive'
+  | 'danger'
+  | 'warning';
 
 export interface ChipProps {
   label: string;
@@ -22,6 +32,7 @@ export interface ChipProps {
   onDismiss?: () => void;
   /** Renders a small count badge after the label */
   badge?: number | string;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -163,6 +174,7 @@ export function Chip({
   dismissible = false,
   onDismiss,
   badge,
+  style,
 }: ChipProps) {
   const s = SIZE_TOKENS[size];
   const c = getUsageColors(usage);
@@ -182,6 +194,7 @@ export function Chip({
           backgroundColor: c.bg,
         },
         c.elevated && styles.elevated,
+        style,
       ]}
     >
       {/* Leading icon */}
@@ -260,11 +273,7 @@ export function Chip({
             overflow: 'hidden',
           })}
         >
-          <Ionicons
-            name="close"
-            size={s.closeIconSize}
-            color={c.text}
-          />
+          <Ionicons name="close" size={s.closeIconSize} color={c.text} />
         </Pressable>
       )}
     </View>
@@ -282,7 +291,7 @@ const styles = StyleSheet.create({
   elevated: {
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.10,
+    shadowOpacity: 0.1,
     shadowRadius: 8,
     elevation: 2,
     // overflow must be visible for shadow on iOS — override here

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { Divider } from './index';
+
+describe('Divider', () => {
+  it('renders without crashing', () => {
+    const { toJSON } = render(<Divider />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it.each(['full', 'inset', 'middle'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { toJSON } = render(<Divider variant={variant} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+
+  it.each(['thin', 'medium', 'thick'] as const)(
+    'renders weight "%s" without crashing',
+    (weight) => {
+      const { toJSON } = render(<Divider weight={weight} />);
+      expect(toJSON()).toBeTruthy();
+    },
+  );
+});

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
-import { sys } from './tokens';
+
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import { sys } from '../../tokens';
 
 export type DividerVariant = 'horizontal' | 'vertical';
 export type DividerWeight = 'thin' | 'thick';
@@ -9,6 +11,7 @@ export interface DividerProps {
   variant?: DividerVariant;
   weight?: DividerWeight;
   dashed?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
@@ -17,6 +20,7 @@ export function Divider({
   variant = 'horizontal',
   weight = 'thin',
   dashed = false,
+  style,
 }: DividerProps) {
   const thickness =
     weight === 'thin'
@@ -28,15 +32,18 @@ export function Divider({
   if (variant === 'horizontal') {
     return (
       <View
-        style={{
-          // Zero height — the line is drawn as a top border
-          height: 0,
-          // Stretch to fill parent width
-          alignSelf: 'stretch',
-          borderTopWidth: thickness,
-          borderTopColor: color,
-          borderStyle: dashed ? 'dashed' : 'solid',
-        }}
+        style={[
+          {
+            // Zero height — the line is drawn as a top border
+            height: 0,
+            // Stretch to fill parent width
+            alignSelf: 'stretch',
+            borderTopWidth: thickness,
+            borderTopColor: color,
+            borderStyle: dashed ? 'dashed' : 'solid',
+          },
+          style,
+        ]}
         accessible={false}
       />
     );
@@ -45,15 +52,18 @@ export function Divider({
   // Vertical
   return (
     <View
-      style={{
-        // Zero width — the line is drawn as a left border
-        width: 0,
-        // Stretch to fill parent height
-        alignSelf: 'stretch',
-        borderLeftWidth: thickness,
-        borderLeftColor: color,
-        borderStyle: dashed ? 'dashed' : 'solid',
-      }}
+      style={[
+        {
+          // Zero width — the line is drawn as a left border
+          width: 0,
+          // Stretch to fill parent height
+          alignSelf: 'stretch',
+          borderLeftWidth: thickness,
+          borderLeftColor: color,
+          borderStyle: dashed ? 'dashed' : 'solid',
+        },
+        style,
+      ]}
       accessible={false}
     />
   );

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { EmptyState } from './index';
+
+describe('EmptyState', () => {
+  it('renders title and description', () => {
+    const { getByText } = render(
+      <EmptyState
+        title="Nothing here"
+        description="Add something to get started"
+      />,
+    );
+    expect(getByText('Nothing here')).toBeTruthy();
+    expect(getByText('Add something to get started')).toBeTruthy();
+  });
+
+  it('renders action button and handles press', () => {
+    const onAction = jest.fn();
+    const { getByText } = render(
+      <EmptyState
+        title="No results"
+        description="Try a different search"
+        actionLabel="Clear filters"
+        onAction={onAction}
+      />,
+    );
+    fireEvent.press(getByText('Clear filters'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['desktop', 'mobile'] as const)(
+    'renders viewport "%s" without crashing',
+    (viewport) => {
+      const { getByText } = render(
+        <EmptyState
+          title="Empty"
+          description="Nothing to show"
+          viewport={viewport}
+        />,
+      );
+      expect(getByText('Empty')).toBeTruthy();
+    },
+  );
+
+  it.each(['icon', 'illustration'] as const)(
+    'renders style "%s" without crashing',
+    (emptyStyle) => {
+      const { getByText } = render(
+        <EmptyState
+          title="Empty"
+          description="Nothing"
+          emptyStyle={emptyStyle}
+        />,
+      );
+      expect(getByText('Empty')).toBeTruthy();
+    },
+  );
+});