@oxy.so/services 3.1.0 → 4.0.1

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -1,6 +1,8 @@
 import type React from 'react';
 import { useMemo, useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity, ScrollView, ActivityIndicator, Image, StyleSheet } from 'react-native';
+import { View, ScrollView, ActivityIndicator, Image, StyleSheet } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -194,22 +196,18 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             )}
 
             {/* Floating Back Button */}
-            <TouchableOpacity
-                className="bg-card absolute top-[12px] left-[12px] w-[40px] h-[40px] rounded-full items-center justify-center"
+            <Button appearance="subtle" tone="neutral" iconOnly accessibilityLabel="Back"
+                className="absolute top-[12px] left-[12px]"
                 style={{ zIndex: 10 }}
                 onPress={onClose}
-            >
-                <MaterialCommunityIcons name="arrow-left" size={20} color={colors.text} />
-            </TouchableOpacity>
+            icon={<MaterialCommunityIcons name="arrow-left" size={20} color={colors.text} />} />
 
             {/* Floating Download Button */}
-            <TouchableOpacity
-                className="bg-card absolute top-[12px] right-[12px] w-[40px] h-[40px] rounded-full items-center justify-center"
+            <Button appearance="subtle" tone="neutral" iconOnly accessibilityLabel="Download"
+                className="absolute top-[12px] right-[12px]"
                 style={{ zIndex: 10 }}
                 onPress={() => onDownload(file.id, file.filename)}
-            >
-                <MaterialCommunityIcons name="download" size={20} color={colors.primary} />
-            </TouchableOpacity>
+            icon={<MaterialCommunityIcons name="download" size={20} color={colors.primary} />} />
 
             {/* File Content */}
             <ScrollView
@@ -279,13 +277,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             PDF files cannot be previewed in this viewer.{'\n'}
                             Download the file to view its contents.
                         </Text>
-                        <TouchableOpacity
-                            className="bg-primary flex-row items-center px-[18px] py-[12px] rounded-full gap-[8px]"
-                            onPress={() => onDownload(file.id, file.filename)}
-                        >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
-                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Download PDF</Text>
-                        </TouchableOpacity>
+                        <Button onPress={() => onDownload(file.id, file.filename)}>Download PDF</Button>
                     </View>
                 ) : isVideo && fileContent ? (
                     <View className="flex-1 justify-center items-center py-[32px] px-[24px]">
@@ -301,13 +293,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             Video playback is not supported in this viewer.{'\n'}
                             Download the file to view it.
                         </Text>
-                        <TouchableOpacity
-                            className="bg-primary flex-row items-center px-[18px] py-[12px] rounded-full gap-[8px]"
-                            onPress={() => onDownload(file.id, file.filename)}
-                        >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
-                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Download Video</Text>
-                        </TouchableOpacity>
+                        <Button onPress={() => onDownload(file.id, file.filename)}>Download Video</Button>
                     </View>
                 ) : isAudio && fileContent ? (
                     <View className="flex-1 justify-center items-center py-[32px] px-[24px]">
@@ -323,13 +309,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             Audio playback is not supported in this viewer.{'\n'}
                             Download the file to listen to it.
                         </Text>
-                        <TouchableOpacity
-                            className="bg-primary flex-row items-center px-[18px] py-[12px] rounded-full gap-[8px]"
-                            onPress={() => onDownload(file.id, file.filename)}
-                        >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
-                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Download Audio</Text>
-                        </TouchableOpacity>
+                        <Button onPress={() => onDownload(file.id, file.filename)}>Download Audio</Button>
                     </View>
                 ) : (
                     <View className="flex-1 justify-center items-center py-[32px] px-[24px]">
@@ -345,13 +325,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             This file type cannot be previewed.{'\n'}
                             Download the file to view its contents.
                         </Text>
-                        <TouchableOpacity
-                            className="bg-primary flex-row items-center px-[18px] py-[12px] rounded-full gap-[8px]"
-                            onPress={() => onDownload(file.id, file.filename)}
-                        >
-                            <MaterialCommunityIcons name="download" size={18} color={colors.primaryForeground} />
-                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Download File</Text>
-                        </TouchableOpacity>
+                        <Button onPress={() => onDownload(file.id, file.filename)}>Download File</Button>
                     </View>
                 )}
             </ScrollView>
@@ -362,16 +336,14 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                     <Text className="text-text text-[18px] font-semibold flex-1">
                         File Details
                     </Text>
-                    <TouchableOpacity
-                        className="p-[4px]"
+                    <Button appearance="plain" tone="neutral" iconOnly accessibilityLabel="Toggle file details"
+                        aria-expanded={showFileDetailsInViewer}
                         onPress={onToggleDetails}
-                    >
-                        <MaterialCommunityIcons
+                    icon={<MaterialCommunityIcons
                             name={showFileDetailsInViewer ? "chevron-up" : "chevron-down"}
                             size={20}
                             color={colors.textSecondary}
-                        />
-                    </TouchableOpacity>
+                        />} />
                 </View>
 
                 {showFileDetailsInViewer && (
@@ -392,16 +364,15 @@ export const FileViewer: React.FC<FileViewerProps> = ({
 
                         {isOwner && (
                             <View className="flex-row gap-[12px] mt-[8px] px-[12px] pb-[10px]">
-                                <TouchableOpacity
-                                    className="bg-destructive flex-1 flex-row items-center justify-center py-[12px] rounded-full gap-[6px]"
+                                <Button tone="danger"
+                                    style={{ flex: 1 }}
                                     onPress={() => {
                                         onClose();
                                         onDelete(file.id, file.filename);
                                     }}
                                 >
-                                    <MaterialCommunityIcons name="delete" size={16} color={colors.negativeForeground} />
-                                    <Text className="text-[14px] font-semibold" style={{ color: colors.negativeForeground }}>Delete</Text>
-                                </TouchableOpacity>
+                                    Delete
+                                </Button>
                             </View>
                         )}
                     </>

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -1,5 +1,8 @@
 import type React from 'react';
-import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Card } from '@oxy.so/bloom/card';
+import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
 import Ionicons from '../../icons/Ionicons';
 import { Dialog, type DialogControlProps } from '@oxy.so/bloom/dialog';
@@ -47,19 +50,15 @@ const UploadPreviewContent: React.FC<{
                 <Text className="text-text text-[20px] font-bold">
                     Review Files ({pendingFiles.length})
                 </Text>
-                <TouchableOpacity onPress={onCancel}>
-                    <Ionicons name="close" size={24} color={colors.text} />
-                </TouchableOpacity>
+                <Button appearance="plain" tone="neutral" iconOnly accessibilityLabel="Close upload preview" onPress={onCancel}
+                    icon={<Ionicons name="close" size={24} color={colors.text} />} />
             </View>
 
             <ScrollView className="flex-1 p-[16px]">
                 {pendingFiles.map((pendingFile) => {
                     const isImage = pendingFile.type.startsWith('image/');
                     return (
-                        <View
-                            key={pendingFile.id}
-                            className="bg-secondary border-border flex-row items-center p-[12px] rounded-[12px] border mb-[12px] gap-[12px]"
-                        >
+                        <Card key={pendingFile.id} appearance="subtle" className="flex-row items-center p-3 mb-3 gap-3">
                             {isImage && pendingFile.preview ? (
                                 <ExpoImage
                                     source={{ uri: pendingFile.preview }}
@@ -86,13 +85,10 @@ const UploadPreviewContent: React.FC<{
                                     {formatFileSize(pendingFile.size)} • {pendingFile.type}
                                 </Text>
                             </View>
-                            <TouchableOpacity
-                                className="p-[4px]"
+                            <Button appearance="plain" tone="danger" iconOnly accessibilityLabel={`Remove ${pendingFile.name}`}
                                 onPress={() => onRemoveFile(pendingFile.id)}
-                            >
-                                <Ionicons name="close-circle" size={24} color={colors.error} />
-                            </TouchableOpacity>
-                        </View>
+                                icon={<Ionicons name="close-circle" size={24} color={colors.error} />} />
+                        </Card>
                     );
                 })}
             </ScrollView>
@@ -108,21 +104,8 @@ const UploadPreviewContent: React.FC<{
                 </View>
                 {showActions && (
                     <View className="flex-row gap-[12px]">
-                        <TouchableOpacity
-                            className="bg-transparent border-border flex-1 py-[14px] rounded-[12px] border items-center justify-center"
-                            onPress={onCancel}
-                        >
-                            <Text className="text-text text-[16px] font-semibold">
-                                Cancel
-                            </Text>
-                        </TouchableOpacity>
-                        <TouchableOpacity
-                            className="bg-primary flex-[2] flex-row items-center justify-center py-[14px] rounded-[12px] gap-[8px]"
-                            onPress={onConfirm}
-                        >
-                            <Ionicons name="cloud-upload" size={20} color={colors.primaryForeground} />
-                            <Text className="text-[16px] font-semibold" style={{ color: colors.primaryForeground }}>Upload</Text>
-                        </TouchableOpacity>
+                        <Button appearance="subtle" tone="neutral" style={{ flex: 1 }} onPress={onCancel}>Cancel</Button>
+                        <Button style={{ flex: 2 }} onPress={onConfirm}>Upload</Button>
                     </View>
                 )}
             </View>

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
-import { View, Text, TextInput } from 'react-native';
+import { View, TextInput } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
@@ -100,14 +101,14 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
 
             <View style={{ gap: 8 }}>
                 <Button
-                    variant="destructive"
+                    appearance="solid" tone="danger"
                     onPress={handleDelete}
                     disabled={!isValid || isDeleting}
                     loading={isDeleting}
                 >
                     {t('deleteAccount.confirm') || 'Delete Forever'}
                 </Button>
-                <Button variant="secondary" onPress={handleCancel} disabled={isDeleting}>
+                <Button appearance="subtle" tone="neutral" onPress={handleCancel} disabled={isDeleting}>
                     {t('common.cancel') || 'Cancel'}
                 </Button>
             </View>

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
+import { View, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
 import { TextField, TextFieldInput } from '@oxy.so/bloom/text-field';
@@ -211,11 +212,11 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={onNext}
                     size="small"
                     icon={<Ionicons name="arrow-forward" size={16} />}

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated } from 'react-native';
+import { View, Animated } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Button } from '@oxy.so/bloom/button';
@@ -76,10 +77,10 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
-                <Button variant="primary" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated, ActivityIndicator } from 'react-native';
+import { View, Animated, ActivityIndicator } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Button } from '@oxy.so/bloom/button';
@@ -104,11 +105,11 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={onBack} size="small" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={onPay}
                     size="small"
                     disabled={isPaying}

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated } from 'react-native';
+import { View, Animated } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { Button } from '@oxy.so/bloom/button';
 import { createPaymentStyles } from './paymentStyles';
@@ -56,7 +57,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                 </View>
             </View>
 
-            <Button variant="primary" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
+            <Button appearance="solid" tone="accent" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
                 {t('payment.actions.done')}
             </Button>
         </Animated.View>

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -1,7 +1,8 @@
 import type React from 'react';
 import type { ComponentProps } from 'react';
 import { useMemo } from 'react';
-import { View, Text, Animated } from 'react-native';
+import { View, Animated } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Button } from '@oxy.so/bloom/button';
@@ -144,10 +145,10 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={onClose} size="small" icon={<Ionicons name="close" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onClose} size="small" icon={<Ionicons name="close" size={16} />}>
                     {t('payment.actions.close')}
                 </Button>
-                <Button variant="primary" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { View, Text, Image, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { View, Image, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import type { FileMetadata } from '@oxy.so/core';
 

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -1,5 +1,6 @@
 import type React from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { Button } from '@oxy.so/bloom/button';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { surfaces, type SurfaceControls } from '@oxy.so/bloom/surfaces';
@@ -77,7 +78,7 @@ export function ActionSheetSurface<T extends string>({
                         {option.label}
                     </Button>
                 ))}
-                <Button variant="secondary" onPress={() => surface.dismiss(undefined)}>
+                <Button appearance="subtle" tone="neutral" onPress={() => surface.dismiss(undefined)}>
                     {cancelLabel}
                 </Button>
             </View>

package/src/ui/icons/subsetGlyphMaps.ts

@@ -110,7 +110,6 @@ export const ioniconsGlyphMap = {
   "qr-code-outline": 62717,
   "radio": 62719,
   "receipt-outline": 62735,
-  "refresh": 62740,
   "refresh-outline": 62744,
   "remove": 62752,
   "repeat-outline": 62768,
@@ -257,7 +256,6 @@ export const materialCommunityIconsGlyphMap = {
   "history": 983770,
   "hub": 990357,
   "image": 983785,
-  "image-multiple": 983801,
   "image-multiple-outline": 983791,
   "image-outline": 985462,
   "information": 983804,
@@ -271,7 +269,6 @@ export const materialCommunityIconsGlyphMap = {
   "link-variant": 983865,
   "loading": 984946,
   "lock-outline": 983873,
-  "login": 983874,
   "logout": 983875,
   "magnify": 983881,
   "map-marker": 983886,
@@ -283,7 +280,6 @@ export const materialCommunityIconsGlyphMap = {
   "minus": 983924,
   "minus-circle": 983926,
   "motion": 988594,
-  "music-note": 983943,
   "music-note-outline": 986996,
   "network": 984819,
   "null": 985058,
@@ -307,7 +303,6 @@ export const materialCommunityIconsGlyphMap = {
   "react": 984840,
   "read": 984135,
   "receipt-outline": 984311,
-  "refresh": 984144,
   "resize": 985704,
   "rocket": 984163,
   "scale": 984178,
@@ -341,7 +336,6 @@ export const materialCommunityIconsGlyphMap = {
   "trophy": 984376,
   "trophy-outline": 984378,
   "update": 984752,
-  "video": 984423,
   "video-outline": 986076,
   "volume-off": 984449,
   "wallet": 984452,

package/src/ui/screens/AccountMembersScreen.tsx

@@ -1,8 +1,8 @@
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '@oxy.so/bloom/segmented-control';
 import type React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import {
   View,
-  TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
 import Ionicons from '../icons/Ionicons';
@@ -291,37 +291,14 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               <Text className="text-caption font-caption text-text-secondary px-space-4">
                 {t('accounts.members.invite.roleLabel') || 'Role'}
               </Text>
-              <View className="flex-row flex-wrap gap-space-8">
-                {ASSIGNABLE_ROLES.map((role) => {
-                  const selected = role === inviteRole;
-                  return (
-                    <TouchableOpacity
-                      key={role}
-                      accessibilityRole="radio"
-                      accessibilityState={{ selected }}
-                      accessibilityLabel={roleLabel(role)}
-                      onPress={() => setInviteRole(role)}
-                      activeOpacity={0.7}
-                      className="px-space-12 py-space-8 rounded-radius-full"
-                      style={{
-                        backgroundColor: selected ? colors.primary : colors.card,
-                        borderWidth: 1,
-                        borderColor: selected ? colors.primary : colors.border,
-                      }}
-                    >
-                      <Text
-                        className="text-caption font-semibold"
-                        style={{ color: selected ? colors.background : colors.text }}
-                      >
-                        {roleLabel(role)}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-              </View>
+              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="small">
+                {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
+                  <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+                </SegmentedControlItem>)}
+              </SegmentedControl>
 
               <Button
-                variant="primary"
+                appearance="solid" tone="accent"
                 onPress={handleInvite}
                 disabled={inviteMutation.isPending || !inviteIdentifier.trim()}
                 loading={inviteMutation.isPending}
@@ -394,35 +371,12 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
 
                           {/* Role chips (editable) or static role label */}
                           {canEditThisRole ? (
-                            <View className="flex-row flex-wrap gap-space-8">
-                              {ASSIGNABLE_ROLES.map((role) => {
-                                const selected = role === member.role;
-                                return (
-                                  <TouchableOpacity
-                                    key={role}
-                                    accessibilityRole="radio"
-                                    accessibilityState={{ selected }}
-                                    accessibilityLabel={roleLabel(role)}
-                                    onPress={() => handleChangeRole(member, role)}
-                                    disabled={updateMutation.isPending}
-                                    activeOpacity={0.7}
-                                    className="px-space-12 py-space-4 rounded-radius-full"
-                                    style={{
-                                      backgroundColor: selected ? colors.primary : colors.card,
-                                      borderWidth: 1,
-                                      borderColor: selected ? colors.primary : colors.border,
-                                    }}
-                                  >
-                                    <Text
-                                      className="text-caption font-semibold"
-                                      style={{ color: selected ? colors.background : colors.text }}
-                                    >
-                                      {roleLabel(role)}
-                                    </Text>
-                                  </TouchableOpacity>
-                                );
-                              })}
-                            </View>
+                            <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'}
+                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="small">
+                              {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
+                                <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
+                              </SegmentedControlItem>)}
+                            </SegmentedControl>
                           ) : !isOwner ? (
                             <Text className="text-caption font-caption text-text-secondary">
                               {roleLabel(member.role)}
@@ -433,32 +387,30 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {(canTransferToThis || canRemoveThisMember) ? (
                             <View className="flex-row gap-space-16 pt-space-4">
                               {canTransferToThis ? (
-                                <TouchableOpacity
+                                <Button appearance="plain" tone="neutral" size="small"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   onPress={() => confirmTransfer(member)}
-                                  activeOpacity={0.7}
                                   className="flex-row items-center gap-space-4"
                                 >
                                   <Ionicons name="swap-horizontal-outline" size={16} color={colors.icon} />
                                   <Text className="text-caption font-semibold text-text-secondary">
                                     {t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   </Text>
-                                </TouchableOpacity>
+                                </Button>
                               ) : null}
                               {canRemoveThisMember ? (
-                                <TouchableOpacity
+                                <Button appearance="plain" tone="neutral" size="small"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
                                   onPress={() => confirmRemove(member)}
-                                  activeOpacity={0.7}
                                   className="flex-row items-center gap-space-4"
                                 >
                                   <Ionicons name="trash-outline" size={16} color={colors.error} />
                                   <Text className="text-caption font-semibold" style={{ color: colors.error }}>
                                     {t('accounts.members.actions.remove') || 'Remove'}
                                   </Text>
-                                </TouchableOpacity>
+                                </Button>
                               ) : null}
                             </View>
                           ) : null}

package/src/ui/screens/AccountSettingsScreen.tsx

@@ -233,7 +233,7 @@ const AccountSettingsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, nav
                     </Text>
                   </View>
                   <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={handleSave}
                     disabled={updateMutation.isPending || !displayName.trim() || Boolean(displayNameError)}
                     loading={updateMutation.isPending}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -155,7 +155,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
                 </View>
 
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     size="large"
                     fullWidth
                     className="mt-space-24"

package/src/ui/screens/AvatarCropScreen.tsx

@@ -28,16 +28,8 @@
 
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
-import {
-    View,
-    Text,
-    StyleSheet,
-    ActivityIndicator,
-    Image,
-    Platform,
-    AccessibilityInfo,
-    Pressable,
-} from 'react-native';
+import { View, StyleSheet, ActivityIndicator, Image, Platform, AccessibilityInfo, Pressable } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
     Easing,

package/src/ui/screens/CreateAccountScreen.tsx

@@ -474,7 +474,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
 
       {/* Create Button */}
       <Button
-        variant="primary"
+        appearance="solid" tone="accent"
         onPress={handleCreate}
         disabled={!canCreate}
         loading={isCreating}