@compsych/mobile-ui 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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/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,27 +295,28 @@ 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"
             />
           </>
         )}
-        {renderedIcon && (
-          <View style={{ width: s.iconSize, height: s.iconSize }}>
-            {renderedIcon}
-          </View>
-        )}
-        {textBlock}
-        {isRow && ChevronRight && (
-          <ChevronRight size={20} color="#ffffff" strokeWidth={1.5} />
-        )}
+        <View style={{ width: s.iconSize, height: s.iconSize }}>
+          {renderedIcon}
+        </View>
+        <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 +400,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,