@compsych/mobile-ui 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/SegmentedControl/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 
 import {
   Pressable,
+  ScrollView,
   StyleProp,
   StyleSheet,
-  View,
   ViewStyle,
 } from 'react-native';
 
-import { ICON_MAP, type IconName } from '../../icons';
+import { type IconName, SIZE_MAP, resolveIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 
@@ -23,7 +23,6 @@ export interface SegmentedControlProps {
   options: SegmentedControlOption[];
   value: string;
   onChange: (value: string) => void;
-  fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -31,27 +30,19 @@ export function SegmentedControl({
   options,
   value,
   onChange,
-  fullWidth = false,
   style,
 }: SegmentedControlProps) {
   const { colorRoles: cr, dimensions: dim } = useTheme();
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor:
-            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-          borderWidth: dim.borderWidth.sysStrokeThin,
-          borderColor: cr.outline.sysOutline,
-          borderRadius: dim.borderRadius.sysRadiusFull,
-          padding: dim.spacing.padding.sysPadding4,
-          gap: dim.spacing.padding.sysPadding4,
-        },
-        fullWidth && styles.fullWidth,
-        style,
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.contentContainer,
+        { gap: dim.spacing.padding.sysPadding4 },
       ]}
+      style={[styles.scroll, style]}
     >
       {options.map((option) => {
         const isActive = option.value === value;
@@ -60,7 +51,8 @@ export function SegmentedControl({
         const iconColor = isActive
           ? cr.accent.primary.sysOnPrimary
           : cr.surface.surface.sysOnSurfaceVariant;
-        const IconComponent = option.icon ? ICON_MAP[option.icon] : null;
+        const IconComponent = option.icon ? resolveIcon(option.icon) : null;
+        const { size: iconPx, strokeWidth: iconSW } = SIZE_MAP['xsmall'];
 
         return (
           <Pressable
@@ -76,17 +68,21 @@ export function SegmentedControl({
                 paddingVertical: dim.spacing.padding.sysPadding6,
                 gap: dim.spacing.padding.sysPadding4,
                 borderRadius: dim.borderRadius.sysRadiusFull,
+                backgroundColor: isActive
+                  ? cr.accent.primary.sysPrimary
+                  : cr.surface.surfaceContainer.sysSurfaceContainerHigh,
               },
-              isActive && { backgroundColor: cr.accent.primary.sysPrimary },
-              !isActive &&
-                pressed &&
-                !isDisabled && {
-                  backgroundColor: cr.transparent.neutral.sysBlack10,
-                },
+              !isActive && pressed && !isDisabled && { opacity: 0.7 },
               isDisabled && styles.disabled,
             ]}
           >
-            {IconComponent && <IconComponent size="xsmall" color={iconColor} />}
+            {IconComponent && (
+              <IconComponent
+                size={iconPx}
+                strokeWidth={iconSW}
+                color={iconColor}
+              />
+            )}
             <BodyText
               variant="small"
               emphasized={isActive}
@@ -98,27 +94,20 @@ export function SegmentedControl({
           </Pressable>
         );
       })}
-    </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
+  scroll: {
+    width: '100%',
+  },
+  contentContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    alignSelf: 'flex-start',
-    // Elevation/lv1: two Figma drop shadows combined into one RN shadow
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.08,
-    shadowRadius: 8,
-    elevation: 2,
-  },
-  fullWidth: {
-    alignSelf: 'stretch',
+    paddingVertical: 2,
   },
   item: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/ServiceCard/index.tsx

@@ -211,7 +211,8 @@ export function ServiceCard({
     v.elevated && ELEVATION,
     fullWidth && { alignSelf: 'stretch' as const },
     isRow ? styles.rowRoot : styles.colRoot,
-    !isRow && { gap: s.gap },
+    !isRow && variant !== 'image' && { gap: s.gap },
+    variant === 'image' && { justifyContent: 'space-between' },
     style,
   ];
 
@@ -294,13 +295,12 @@ export function ServiceCard({
               resizeMode="cover"
               accessible={false}
             />
-            <View
+            <LinearGradient
+              colors={['rgba(0,0,0,0.4)', 'rgba(0,0,0,0.05)', 'rgba(0,0,0,0.5)']}
+              locations={[0.012, 0.268, 1]}
               style={[
                 { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
-                {
-                  borderRadius: s.borderRadius,
-                  backgroundColor: 'rgba(0,0,0,0.30)',
-                },
+                { borderRadius: s.borderRadius },
               ]}
               pointerEvents="none"
             />
@@ -311,10 +311,14 @@ export function ServiceCard({
             {renderedIcon}
           </View>
         )}
-        {textBlock}
-        {isRow && ChevronRight && (
-          <ChevronRight size={20} color="#ffffff" strokeWidth={1.5} />
-        )}
+        <View style={styles.imageBottom}>
+          <View style={{ flex: 1 }}>{textBlock}</View>
+          {onPress && ChevronRight && (
+            <View style={styles.imageArrowButton}>
+              <ChevronRight size={16} color={cr.surface.surface.sysOnSurface} strokeWidth={1.5} />
+            </View>
+          )}
+        </View>
         {children}
       </>
     );
@@ -398,6 +402,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 12,
   },
+  imageBottom: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    width: '100%',
+    gap: 16,
+  },
+  imageArrowButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 999,
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
   rowTextBlock: {
     flex: 1,
     minWidth: 0,