@compsych/mobile-ui 1.0.9 → 1.0.10

package/src/{Card.tsx → components/ServiceCard/index.tsx}

@@ -1,24 +1,35 @@
 import React from 'react';
+
 import {
   Image,
   type ImageSourcePropType,
   Pressable,
+  StyleProp,
   StyleSheet,
   View,
+  ViewStyle,
 } from 'react-native';
+
 import { Ionicons } from '@expo/vector-icons';
-import { sys } from './tokens';
-import { BodyText } from './BodyText';
 
-export type CardVariant = 'outlined' | 'tonal' | 'filled' | 'doubled' | 'image';
-export type CardSize = 'sm' | 'md' | 'lg';
+import { ICON_MAP, type IconName } from '../../icons';
+import { sys } from '../../tokens';
+import { BodyText } from '../BodyText';
+
+export type ServiceCardVariant =
+  | 'outlined'
+  | 'tonal'
+  | 'filled'
+  | 'doubled'
+  | 'image';
+export type ServiceCardSize = 'sm' | 'md' | 'lg';
 
-export interface CardProps {
-  variant?: CardVariant;
-  size?: CardSize;
-  title?: string;
-  description?: string;
-  icon?: React.ReactNode;
+export interface ServiceCardProps {
+  variant?: ServiceCardVariant;
+  size?: ServiceCardSize;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: IconName;
   image?: ImageSourcePropType;
   buttonIcon?: React.ReactNode;
   interactive?: boolean;
@@ -27,6 +38,7 @@ export interface CardProps {
   children?: React.ReactNode;
   accessibilityLabel?: string;
   fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
@@ -34,7 +46,7 @@ const { colorRoles: cr, dimensions: dim } = sys;
 // ── Variant tokens ────────────────────────────────────────────────────────────
 
 const VARIANT_TOKENS: Record<
-  CardVariant,
+  ServiceCardVariant,
   {
     bg: string;
     borderColor: string;
@@ -68,12 +80,12 @@ const VARIANT_TOKENS: Record<
     chevronColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
   },
   filled: {
-    bg: cr.accent.primary.sysPrimary,
+    bg: cr.accent.primary.sysPrimaryContainer,
     borderColor: 'transparent',
     borderWidth: 0,
-    elevated: true,
+    elevated: false,
     titleColor: cr.accent.primary.sysOnPrimary,
-    descColor: cr.accent.primary.sysOnPrimary,
+    descColor: cr.transparent.neutral.sysWhite80,
     chevronColor: cr.accent.primary.sysOnPrimary,
   },
   doubled: {
@@ -93,9 +105,9 @@ const VARIANT_TOKENS: Record<
     borderColor: 'transparent',
     borderWidth: 0,
     elevated: false,
-    titleColor: '#ffffff',
+    titleColor: cr.surface.surface.sysInverseOnSurface,
     descColor: cr.transparent.neutral.sysWhite80,
-    chevronColor: '#ffffff',
+    chevronColor: cr.surface.surface.sysInverseOnSurface,
   },
 };
 
@@ -109,6 +121,7 @@ const SIZE_TOKENS = {
     gap: dim.spacing.padding.sysPadding12,
     borderRadius: dim.borderRadius.sysRadiusMd,
     iconSize: 24,
+    iconSizeName: 'small' as const,
     titleVariant: 'medium' as const,
     showChevron: true,
   },
@@ -119,6 +132,7 @@ const SIZE_TOKENS = {
     gap: dim.spacing.padding.sysPadding24,
     borderRadius: dim.borderRadius.sysRadiusLg,
     iconSize: 32,
+    iconSizeName: 'medium' as const,
     titleVariant: 'medium' as const,
     showChevron: false,
   },
@@ -129,6 +143,7 @@ const SIZE_TOKENS = {
     gap: dim.spacing.padding.sysPadding32,
     borderRadius: dim.borderRadius.sysRadiusLg,
     iconSize: 32,
+    iconSizeName: 'large' as const,
     titleVariant: 'large' as const,
     showChevron: false,
   },
@@ -144,7 +159,7 @@ const ELEVATION = {
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
-export function Card({
+export function ServiceCard({
   variant = 'outlined',
   size = 'lg',
   title,
@@ -158,42 +173,54 @@ export function Card({
   children,
   accessibilityLabel,
   fullWidth = false,
-}: CardProps) {
+  style,
+}: ServiceCardProps) {
   const v = VARIANT_TOKENS[variant];
   const s = SIZE_TOKENS[size];
   const isRow = s.layout === 'row';
 
+  const IconComponent = icon ? ICON_MAP[icon] : null;
+  const iconColor = v.iconBadgeColor ?? v.titleColor;
+  const renderedIcon = IconComponent ? (
+    <IconComponent size={s.iconSizeName} color={iconColor} />
+  ) : null;
+
   const outerStyle = [
     {
       backgroundColor: variant === 'doubled' ? v.bg : v.bg,
       borderColor: v.borderColor,
       borderWidth: v.borderWidth,
-      borderRadius: variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
-      paddingHorizontal: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
-      paddingVertical: variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
+      borderRadius:
+        variant === 'doubled' ? dim.borderRadius.sysRadiusXl : s.borderRadius,
+      paddingHorizontal:
+        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingH,
+      paddingVertical:
+        variant === 'doubled' ? dim.spacing.padding.sysPadding8 : s.paddingV,
       opacity: disabled ? 0.48 : 1,
     },
     v.elevated && ELEVATION,
     fullWidth && { alignSelf: 'stretch' as const },
     isRow ? styles.rowRoot : styles.colRoot,
     !isRow && { gap: s.gap },
+    style,
   ];
 
   // ── Text block ──────────────────────────────────────────────────────────────
-  const textBlock = (title || description) ? (
-    <View style={isRow ? styles.rowTextBlock : undefined}>
-      {title && (
-        <BodyText variant={s.titleVariant} color={v.titleColor}>
-          {title}
-        </BodyText>
-      )}
-      {!isRow && description && (
-        <BodyText variant="small" color={v.descColor}>
-          {description}
-        </BodyText>
-      )}
-    </View>
-  ) : null;
+  const textBlock =
+    title || description ? (
+      <View style={isRow ? styles.rowTextBlock : undefined}>
+        {title && (
+          <BodyText variant={s.titleVariant} color={v.titleColor}>
+            {title}
+          </BodyText>
+        )}
+        {!isRow && description && (
+          <BodyText variant="small" color={v.descColor}>
+            {description}
+          </BodyText>
+        )}
+      </View>
+    ) : null;
 
   // ── Inner content by variant ────────────────────────────────────────────────
   let inner: React.ReactNode;
@@ -208,11 +235,11 @@ export function Card({
             borderRadius: s.borderRadius,
             paddingHorizontal: s.paddingH,
             paddingVertical: s.paddingV,
-            gap: s.gap,
+            gap: dim.spacing.padding.sysPadding24,
           },
         ]}
       >
-        {icon && (
+        {renderedIcon && (
           <View
             style={[
               styles.doubledIconBadge,
@@ -222,7 +249,7 @@ export function Card({
               },
             ]}
           >
-            {icon}
+            {renderedIcon}
           </View>
         )}
         {textBlock}
@@ -236,20 +263,30 @@ export function Card({
           <>
             <Image
               source={image}
-              style={[StyleSheet.absoluteFillObject, { borderRadius: s.borderRadius }]}
+              style={[
+                StyleSheet.absoluteFillObject,
+                { borderRadius: s.borderRadius },
+              ]}
               resizeMode="cover"
               accessible={false}
             />
             <View
               style={[
                 StyleSheet.absoluteFillObject,
-                { borderRadius: s.borderRadius, backgroundColor: 'rgba(0,0,0,0.30)' },
+                {
+                  borderRadius: s.borderRadius,
+                  backgroundColor: 'rgba(0,0,0,0.30)',
+                },
               ]}
               pointerEvents="none"
             />
           </>
         )}
-        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {renderedIcon && (
+          <View style={{ width: s.iconSize, height: s.iconSize }}>
+            {renderedIcon}
+          </View>
+        )}
         {textBlock}
         {children}
       </>
@@ -258,7 +295,11 @@ export function Card({
     // sm — horizontal row
     inner = (
       <>
-        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {renderedIcon && (
+          <View style={{ width: s.iconSize, height: s.iconSize }}>
+            {renderedIcon}
+          </View>
+        )}
         {textBlock}
         {s.showChevron && (
           <Ionicons
@@ -275,7 +316,11 @@ export function Card({
     // md / lg — vertical column
     inner = (
       <>
-        {icon && <View style={{ width: s.iconSize, height: s.iconSize }}>{icon}</View>}
+        {renderedIcon && (
+          <View style={{ width: s.iconSize, height: s.iconSize }}>
+            {renderedIcon}
+          </View>
+        )}
         {textBlock}
         {children}
         {buttonIcon && (
@@ -300,7 +345,9 @@ export function Card({
       <Pressable
         onPress={disabled ? undefined : onPress}
         accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityLabel={
+          accessibilityLabel ?? (typeof title === 'string' ? title : undefined)
+        }
         accessibilityState={{ disabled }}
         style={({ pressed }) => [
           styles.overflow,
@@ -313,11 +360,7 @@ export function Card({
     );
   }
 
-  return (
-    <View style={[styles.overflow, ...outerStyle]}>
-      {inner}
-    </View>
-  );
+  return <View style={[styles.overflow, ...outerStyle]}>{inner}</View>;
 }
 
 const styles = StyleSheet.create({

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { Slider } from './index';
+
+describe('Slider', () => {
+  it('renders without crashing', () => {
+    const { toJSON } = render(<Slider />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders label', () => {
+    const { getByText } = render(<Slider label="Volume" />);
+    expect(getByText('Volume')).toBeTruthy();
+  });
+
+  it('renders min/max labels when showMinMax is true', () => {
+    const { getByText } = render(<Slider min={0} max={100} showMinMax />);
+    expect(getByText('0')).toBeTruthy();
+    expect(getByText('100')).toBeTruthy();
+  });
+
+  it('renders disabled state', () => {
+    const { toJSON } = render(<Slider label="Disabled slider" disabled />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('respects default value', () => {
+    const { toJSON } = render(<Slider defaultValue={50} min={0} max={100} />);
+    expect(toJSON()).toBeTruthy();
+  });
+});

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

@@ -1,13 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+
 import {
-  AccessibilityInfo,
   LayoutChangeEvent,
   PanResponder,
+  StyleProp,
   StyleSheet,
   Text,
   View,
+  ViewStyle,
 } from 'react-native';
-import { sys } from './tokens';
+
+import { sys } from '../../tokens';
 
 export interface SliderProps {
   /** Controlled value */
@@ -28,6 +31,7 @@ export interface SliderProps {
   showMinMax?: boolean;
   disabled?: boolean;
   accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
@@ -39,7 +43,7 @@ const THUMB_HALF = THUMB_SIZE / 2; // 12
 const HIT_HEIGHT = 48; // symbol height from Figma — contains track + thumb
 // Vertical offsets within the 48px container
 const TRACK_TOP = (HIT_HEIGHT - TRACK_HEIGHT) / 2; // 20
-const THUMB_TOP = (HIT_HEIGHT - THUMB_SIZE) / 2;   // 12
+const THUMB_TOP = (HIT_HEIGHT - THUMB_SIZE) / 2; // 12
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -61,6 +65,7 @@ export function Slider({
   showMinMax = true,
   disabled = false,
   accessibilityLabel,
+  style,
 }: SliderProps) {
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = useState<number>(
@@ -110,7 +115,8 @@ export function Slider({
 
   const panResponder = useRef(
     PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled && trackWidthRef.current > 0,
+      onStartShouldSetPanResponder: () =>
+        !disabled && trackWidthRef.current > 0,
       onMoveShouldSetPanResponder: () => !disabled && trackWidthRef.current > 0,
       // Don't let parent ScrollView steal the gesture once we've started
       onPanResponderTerminationRequest: () => false,
@@ -118,7 +124,11 @@ export function Slider({
       onPanResponderGrant: (evt) => {
         setPressed(true);
         // Jump thumb to the tapped position on the track
-        const tapped = clamp(evt.nativeEvent.locationX, 0, trackWidthRef.current);
+        const tapped = clamp(
+          evt.nativeEvent.locationX,
+          0,
+          trackWidthRef.current,
+        );
         panStartFraction.current = tapped / trackWidthRef.current;
         const v = fractionToValue(panStartFraction.current);
         commitValue(v, false);
@@ -127,7 +137,8 @@ export function Slider({
       onPanResponderMove: (_, gs) => {
         const newFrac = clamp(
           panStartFraction.current + gs.dx / trackWidthRef.current,
-          0, 1,
+          0,
+          1,
         );
         const v = fractionToValue(newFrac);
         commitValue(v, false);
@@ -137,7 +148,8 @@ export function Slider({
         setPressed(false);
         const newFrac = clamp(
           panStartFraction.current + gs.dx / trackWidthRef.current,
-          0, 1,
+          0,
+          1,
         );
         commitValue(fractionToValue(newFrac), true);
       },
@@ -172,7 +184,7 @@ export function Slider({
   // ── Render ────────────────────────────────────────────────────────────────────
   return (
     <View
-      style={styles.root}
+      style={[styles.root, style]}
       accessible
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel ?? label}
@@ -190,21 +202,12 @@ export function Slider({
       onBlur={() => setFocused(false)}
     >
       {/* ── Optional label ────────────────────────────────────────────────── */}
-      {label && (
-        <Text style={styles.label}>{label}</Text>
-      )}
+      {label && <Text style={styles.label}>{label}</Text>}
 
       {/* ── Slider row ────────────────────────────────────────────────────── */}
-      <View
-        style={[
-          styles.row,
-          disabled && styles.rowDisabled,
-        ]}
-      >
+      <View style={[styles.row, disabled && styles.rowDisabled]}>
         {/* Min label */}
-        {showMinMax && (
-          <Text style={styles.rangeLabel}>{min}</Text>
-        )}
+        {showMinMax && <Text style={styles.rangeLabel}>{min}</Text>}
 
         {/* ── Track container — the gesture zone ──────────────────────────── */}
         <View
@@ -216,21 +219,10 @@ export function Slider({
           <View style={styles.trackBg} />
 
           {/* Track fill (filled — up to thumb center) */}
-          <View
-            style={[
-              styles.trackFill,
-              { width: fillWidth },
-            ]}
-          />
+          <View style={[styles.trackFill, { width: fillWidth }]} />
 
           {/* ── Thumb ─────────────────────────────────────────────────────── */}
-          <View
-            style={[
-              styles.thumb,
-              { left: thumbLeft },
-              thumbShadow,
-            ]}
-          >
+          <View style={[styles.thumb, { left: thumbLeft }, thumbShadow]}>
             {/* Focus ring — 1px outside thumb (26×26 centered over 24×24) */}
             {focused && (
               <View
@@ -248,9 +240,7 @@ export function Slider({
         </View>
 
         {/* Max label */}
-        {showMinMax && (
-          <Text style={styles.rangeLabel}>{max}</Text>
-        )}
+        {showMinMax && <Text style={styles.rangeLabel}>{max}</Text>}
       </View>
     </View>
   );

package/src/components/Snackbar/Snackbar.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Snackbar } from './index';
+
+describe('Snackbar', () => {
+  it('renders message when visible', () => {
+    const { getByText } = render(
+      <Snackbar visible message="Changes saved" onClose={jest.fn()} />,
+    );
+    expect(getByText('Changes saved')).toBeTruthy();
+  });
+
+  it('hides interaction when not visible via pointerEvents', () => {
+    const { toJSON } = render(
+      <Snackbar visible={false} message="Changes saved" onClose={jest.fn()} />,
+    );
+    // Snackbar uses animated opacity — the container gets pointerEvents="none" when hidden
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('calls onAction when action button is pressed', () => {
+    const onAction = jest.fn();
+    const { getByText } = render(
+      <Snackbar
+        visible
+        message="Item deleted"
+        actionLabel="Undo"
+        onAction={onAction}
+        onClose={jest.fn()}
+      />,
+    );
+    fireEvent.press(getByText('Undo'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClose when dismiss button is pressed', () => {
+    const onClose = jest.fn();
+    const { getByLabelText } = render(
+      <Snackbar visible message="Done" onClose={onClose} />,
+    );
+    fireEvent.press(getByLabelText('Dismiss'));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it.each(['filled', 'outlined'] as const)(
+    'renders variant "%s" without crashing',
+    (variant) => {
+      const { getByText } = render(
+        <Snackbar
+          visible
+          message="Hello"
+          variant={variant}
+          onClose={jest.fn()}
+        />,
+      );
+      expect(getByText('Hello')).toBeTruthy();
+    },
+  );
+});

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

@@ -1,13 +1,18 @@
 import React, { useEffect, useRef } from 'react';
+
 import {
   Animated,
   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 SnackbarVariant = 'filled' | 'outlined';
 
@@ -18,6 +23,7 @@ export interface SnackbarProps {
   actionLabel?: string;
   onAction?: () => void;
   onClose?: () => void;
+  style?: StyleProp<ViewStyle>;
 }
 
 const { colorRoles: cr, dimensions: dim } = sys;
@@ -29,6 +35,7 @@ export function Snackbar({
   actionLabel,
   onAction,
   onClose,
+  style,
 }: SnackbarProps) {
   const translateY = useRef(new Animated.Value(100)).current;
   const opacity = useRef(new Animated.Value(0)).current;
@@ -66,7 +73,9 @@ export function Snackbar({
 
   const isFilled = variant === 'filled';
 
-  const containerStyle = isFilled ? styles.containerFilled : styles.containerOutlined;
+  const containerStyle = isFilled
+    ? styles.containerFilled
+    : styles.containerOutlined;
   const labelColor = isFilled
     ? cr.accent.primary.sysOnPrimary
     : cr.surface.surface.sysOnSurface;
@@ -82,10 +91,7 @@ export function Snackbar({
 
   return (
     <Animated.View
-      style={[
-        styles.wrapper,
-        { opacity, transform: [{ translateY }] },
-      ]}
+      style={[styles.wrapper, { opacity, transform: [{ translateY }] }, style]}
       pointerEvents={visible ? 'box-none' : 'none'}
     >
       <View style={[styles.container, containerStyle]}>

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { Animated } from 'react-native';
+
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { Switch } from './index';
+
+beforeEach(() => {
+  jest.spyOn(Animated, 'parallel').mockReturnValue({
+    start: jest.fn(),
+    stop: jest.fn(),
+    reset: jest.fn(),
+  } as any);
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('Switch', () => {
+  it('renders without crashing', () => {
+    const { toJSON } = render(<Switch />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('calls onValueChange with true when toggled on', () => {
+    const onValueChange = jest.fn();
+    const { getByRole } = render(
+      <Switch value={false} onValueChange={onValueChange} />,
+    );
+    fireEvent.press(getByRole('switch'));
+    expect(onValueChange).toHaveBeenCalledWith(true);
+  });
+
+  it('calls onValueChange with false when toggled off', () => {
+    const onValueChange = jest.fn();
+    const { getByRole } = render(
+      <Switch value={true} onValueChange={onValueChange} />,
+    );
+    fireEvent.press(getByRole('switch'));
+    expect(onValueChange).toHaveBeenCalledWith(false);
+  });
+
+  it('is accessible as a switch', () => {
+    const { getByRole } = render(<Switch value={false} />);
+    expect(getByRole('switch')).toBeTruthy();
+  });
+
+  it('reflects disabled state in accessibility', () => {
+    const { getByRole } = render(<Switch value={false} disabled />);
+    expect(getByRole('switch').props.accessibilityState.disabled).toBe(true);
+  });
+});