@oxy.so/services 3.0.0 → 4.0.0

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -1,5 +1,6 @@
+import { Button } from '@oxy.so/bloom/button';
 import React, { useCallback, useMemo, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
 import Ionicons from '../icons/Ionicons';
@@ -196,19 +197,10 @@ const LanguageSelectorScreen: React.FC<LanguageSelectorScreenProps> = () => {
                                             </Text>
                                         </View>
                                     ) : canRemove ? (
-                                        <TouchableOpacity
-                                            onPress={() => handleRemove(entry.code)}
-                                            disabled={isBusy}
-                                            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                                            accessibilityRole="button"
+                                        <Button appearance="plain" tone="neutral" size="small" iconOnly stopPropagation
+                                            onPress={() => handleRemove(entry.code)} disabled={isBusy}
                                             accessibilityLabel={`${t('language.remove')} ${entry.name}`}
-                                        >
-                                            <Ionicons
-                                                name="close-circle"
-                                                size={REMOVE_ICON_SIZE}
-                                                color={bloomTheme.colors.textSecondary}
-                                            />
-                                        </TouchableOpacity>
+                                            icon={<Ionicons name="close-circle" size={REMOVE_ICON_SIZE} color={bloomTheme.colors.textSecondary} />} />
                                     ) : undefined
                                 }
                                 showChevron={false}

package/src/ui/screens/LearnMoreUsernamesScreen.tsx

@@ -10,7 +10,17 @@ import {
     AccordionTrigger,
     AccordionContent,
 } from '@oxy.so/bloom/accordion';
-import * as Icons from '@oxy.so/bloom/icons';
+// Per glyph, never `@oxy.so/bloom/icons`. That barrel re-exports all 461 Remix
+// glyphs and Metro does not tree-shake, so one import of it here re-ships every
+// glyph — 313,123 B, measured — to every app in this package's graph, and no
+// consumer can opt out of what a dependency asks for.
+import { RiAtLine } from '@oxy.so/bloom/icons/RiAtLine';
+import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
+import { RiListUnordered } from '@oxy.so/bloom/icons/RiListUnordered';
+import { RiResetRightLine } from '@oxy.so/bloom/icons/RiResetRightLine';
+import { RiSparklingLine } from '@oxy.so/bloom/icons/RiSparklingLine';
+// `Props` has no per-glyph subpath and needs none: `import type` is erased
+// before any bundler sees it, so the barrel is named here and never loaded.
 import type { Props as IconProps } from '@oxy.so/bloom/icons';
 import type { BaseScreenProps } from '../types/navigation';
 import { useI18n } from '../hooks/useI18n';
@@ -28,31 +38,31 @@ const INFO_SECTIONS: InfoSection[] = [
         id: 'what',
         titleKey: 'learnMoreUsernames.sections.what.title',
         contentKey: 'learnMoreUsernames.sections.what.content',
-        Icon: Icons.RiAtLine,
+        Icon: RiAtLine,
     },
     {
         id: 'rules',
         titleKey: 'learnMoreUsernames.sections.rules.title',
         contentKey: 'learnMoreUsernames.sections.rules.content',
-        Icon: Icons.RiListUnordered,
+        Icon: RiListUnordered,
     },
     {
         id: 'unique',
         titleKey: 'learnMoreUsernames.sections.unique.title',
         contentKey: 'learnMoreUsernames.sections.unique.content',
-        Icon: Icons.RiKey2Line,
+        Icon: RiKey2Line,
     },
     {
         id: 'change',
         titleKey: 'learnMoreUsernames.sections.change.title',
         contentKey: 'learnMoreUsernames.sections.change.content',
-        Icon: Icons.RiResetRightLine,
+        Icon: RiResetRightLine,
     },
     {
         id: 'tips',
         titleKey: 'learnMoreUsernames.sections.tips.title',
         contentKey: 'learnMoreUsernames.sections.tips.content',
-        Icon: Icons.RiSparklingLine,
+        Icon: RiSparklingLine,
     },
 ];
 
@@ -84,7 +94,7 @@ const LearnMoreUsernamesScreen: React.FC<BaseScreenProps> = ({
         <>
             <View className="px-screen-margin pb-space-32">
                 <View className="items-center py-space-24 gap-space-12">
-                    <IconCircle icon={Icons.RiAtLine} />
+                    <IconCircle icon={RiAtLine} />
                     <Text className="font-sans text-body text-text-secondary text-center">
                         {t('learnMoreUsernames.introText')}
                     </Text>

package/src/ui/screens/PaymentGatewayScreen.tsx

@@ -195,7 +195,7 @@ const PaymentGatewayScreen: React.FC<PaymentGatewayScreenProps> = (props) => {
                     {t('payment.errors.invalidAmount')}
                 </H4>
                 <Button
-                    variant="primary"
+                    appearance="solid" tone="accent"
                     onPress={handleClose}
                     size="small"
                     icon={<Ionicons name="close" size={16} />}

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -599,7 +599,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     <View className="flex-row gap-space-12">
                         {subscription.cancelAtPeriodEnd ? (
                             <Button
-                                variant="primary"
+                                appearance="solid" tone="accent"
                                 onPress={handleReactivateSubscription}
                                 className="flex-1"
                                 accessibilityLabel={t('premium.actions.reactivate') || 'Reactivate'}
@@ -608,7 +608,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             </Button>
                         ) : (
                             <Button
-                                variant="destructive"
+                                appearance="solid" tone="danger"
                                 onPress={handleCancelSubscription}
                                 className="flex-1"
                                 accessibilityLabel={t('premium.actions.cancelSubBtn') || 'Cancel Subscription'}
@@ -618,7 +618,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                         )}
 
                         <Button
-                            variant="outline"
+                            appearance="subtle" tone="neutral"
                             onPress={() => navigate?.('PaymentGateway')}
                             className="flex-1"
                             accessibilityLabel={t('premium.actions.manageBilling') || 'Manage Billing'}
@@ -752,7 +752,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isCurrentPlan ? (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         icon={<Ionicons name="checkmark-circle" size={18} color={colors.success} />}
                         accessibilityLabel={t('premium.plan.current') || 'Current Plan'}
@@ -762,7 +762,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </Button>
                 ) : !availability.available ? (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         accessibilityLabel={t('premium.plan.notAvailableInApp') || 'Not Available in Current App'}
                         className="w-full"
@@ -895,7 +895,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
 
                 {isIncludedInCurrentPlan ? (
                     <Button
-                        variant="primary"
+                        appearance="solid" tone="accent"
                         disabled
                         icon={<Ionicons name="checkmark-circle" size={16} color={colors.primaryForeground} />}
                         accessibilityLabel={t('premium.feature.includedInPlan') || 'Included in your plan'}
@@ -906,7 +906,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                 ) : isSubscribed ? (
                     <View className="flex-row gap-space-8">
                         <Button
-                            variant="secondary"
+                            appearance="subtle" tone="neutral"
                             disabled
                             icon={<Ionicons name="checkmark" size={16} color={colors.success} />}
                             accessibilityLabel={t('premium.feature.subscribed') || 'Subscribed'}
@@ -915,7 +915,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                             {t('premium.feature.subscribed') || 'Subscribed'}
                         </Button>
                         <Button
-                            variant="outline"
+                            appearance="subtle" tone="neutral"
                             onPress={() => handleFeatureUnsubscribe(feature.id)}
                             accessibilityLabel={t('premium.actions.unsubscribe') || 'Unsubscribe'}
                             className="flex-1"
@@ -925,7 +925,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </View>
                 ) : canPurchase ? (
                     <Button
-                        variant="primary"
+                        appearance="solid" tone="accent"
                         onPress={() => handleFeatureSubscribe(feature.id)}
                         disabled={processingPayment}
                         loading={processingPayment}
@@ -936,7 +936,7 @@ const PremiumSubscriptionScreen: React.FC<BaseScreenProps> = ({
                     </Button>
                 ) : (
                     <Button
-                        variant="secondary"
+                        appearance="subtle" tone="neutral"
                         disabled
                         accessibilityLabel={t('premium.feature.plansOnly') || 'Only available in subscription plans'}
                         className="w-full"

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -367,7 +367,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         title={displayName}
                                         rightElement={
                                             <Button
-                                                variant="destructive"
+                                                appearance="solid" tone="danger"
                                                 size="small"
                                                 onPress={() => handleUnblock(userId)}
                                             >
@@ -401,7 +401,7 @@ const PrivacySettingsScreen: React.FC<BaseScreenProps> = ({
                                         description={t('privacySettings.restrictedDescription') || 'Limited interactions'}
                                         rightElement={
                                             <Button
-                                                variant="secondary"
+                                                appearance="subtle" tone="neutral"
                                                 size="small"
                                                 onPress={() => handleUnrestrict(userId)}
                                             >

package/src/ui/screens/ProfileScreen.tsx

@@ -214,7 +214,7 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                     <View style={styles.actionButtonWrapper}>
                         {isOwnProfile ? (
                             <Button
-                                variant="secondary"
+                                appearance="subtle" tone="neutral"
                                 size="small"
                                 onPress={() => navigate?.('ManageAccount')}
                             >

package/src/ui/screens/UserListScreen.tsx

@@ -5,14 +5,13 @@ import {
   StyleSheet,
   ActivityIndicator,
   FlatList,
-  TouchableOpacity,
   RefreshControl,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { H6, Text } from '@oxy.so/bloom/typography';
 import { Button } from '@oxy.so/bloom/button';
-import { Avatar } from '@oxy.so/bloom/avatar';
+import { ContactRow } from '@oxy.so/bloom/chat-people';
 import FollowButton from '../components/FollowButton';
 import Ionicons from '../icons/Ionicons';
 import { useI18n } from '../hooks/useI18n';
@@ -36,7 +35,6 @@ interface UserListScreenProps extends BaseScreenProps {
 }
 
 const PAGE_SIZE = 20;
-const AVATAR_SIZE = 48;
 const EMPTY_ICON_SIZE = 64;
 const ERROR_ICON_SIZE = 48;
 
@@ -161,42 +159,21 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
       const handle = getAccountFallbackHandle(item);
 
       return (
-        <TouchableOpacity
-          style={styles.userItem}
-          className="px-screen-margin py-space-12 gap-space-12"
-          onPress={() => handleUserPress(item)}
-          activeOpacity={0.7}
-          accessibilityRole="button"
-          accessibilityLabel={displayName}
-        >
-          <Avatar
-            source={
-              item.avatar
-                ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb')
-                : undefined
-            }
-            name={displayName}
-            size={AVATAR_SIZE}
-          />
-          <View style={styles.userInfo}>
-            <Text className="text-text font-medium text-base" numberOfLines={1}>
-              {displayName}
-            </Text>
-            {handle ? (
-              <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
+        <View className="px-screen-margin flex-row items-center gap-space-12">
+          <ContactRow id={itemUserId || displayName} name={displayName}
+            subtitle={handle ? (item.username ? `@${handle}` : handle) : undefined}
+            avatar={item.avatar ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb') : undefined}
+            horizontalInset={0} style={{ flex: 1 }}
+            onPress={() => handleUserPress(item)}
+            identitySlot={<View style={styles.userInfo}>
+              <Text variant="body-medium" numberOfLines={1}>{displayName}</Text>
+              {handle ? <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
                 {item.username ? `@${handle}` : handle}
-              </Text>
-            ) : null}
-            {description ? (
-              <Text className="text-text-secondary text-sm mt-space-4" numberOfLines={2}>
-                {description}
-              </Text>
-            ) : null}
-          </View>
-          {!isCurrentUser && itemUserId ? (
-            <FollowButton userId={itemUserId} size="small" />
-          ) : null}
-        </TouchableOpacity>
+              </Text> : null}
+              {description ? <Text className="text-text-secondary text-sm mt-space-4" numberOfLines={2}>{description}</Text> : null}
+            </View>} />
+          {!isCurrentUser && itemUserId ? <FollowButton userId={itemUserId} size="small" /> : null}
+        </View>
       );
     },
     [handleUserPress, currentUserId, oxyServices]
@@ -257,7 +234,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         <View style={styles.center} className="px-space-32 gap-space-16">
           <Ionicons name="alert-circle" size={ERROR_ICON_SIZE} color={bloomTheme.colors.error} />
           <Text className="text-text-secondary text-base text-center">{error}</Text>
-          <Button variant="primary" onPress={() => fetchUsers(0)}>
+          <Button appearance="solid" tone="accent" onPress={() => fetchUsers(0)}>
             {t('common.retry') || 'Retry'}
           </Button>
         </View>
@@ -304,17 +281,13 @@ const styles = StyleSheet.create({
   listContent: {
     flexGrow: 1,
   },
-  userItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
   userInfo: {
     flex: 1,
   },
   // Inset the hairline separator to align with the start of the user's text
   // content (avatar width + screen margin + gap).
   separator: {
-    marginLeft: 76,
+    marginLeft: 72,
   },
   emptyContainer: {
     flex: 1,

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -182,10 +182,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (currentStep === totalSteps - 1) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={finish} size="small">
+                    <Button appearance="solid" tone="accent" onPress={finish} size="small">
                         {t('welcomeNew.actions.enter') || 'Enter'}
                     </Button>
                 </View>
@@ -195,11 +195,11 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
                     {avatarStepIndex > 0 && (
-                        <Button variant="secondary" onPress={skipToAvatar} size="small">
+                        <Button appearance="subtle" tone="neutral" onPress={skipToAvatar} size="small">
                             {t('welcomeNew.actions.skip') || 'Skip'}
                         </Button>
                     )}
-                    <Button variant="primary" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                         {t('welcomeNew.actions.next') || 'Next'}
                     </Button>
                 </View>
@@ -208,10 +208,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (nameStepIndex >= 0 && currentStep === nameStepIndex) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
+                    <Button appearance="solid" tone="accent" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
                         {t('welcomeNew.actions.continue') || 'Continue'}
                     </Button>
                 </View>
@@ -220,10 +220,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (step.showAvatar) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                         {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
                     </Button>
                 </View>
@@ -231,10 +231,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         }
         return (
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={prevStep} size="small">
+                <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                     {t('welcomeNew.actions.back') || 'Back'}
                 </Button>
-                <Button variant="primary" onPress={nextStep} size="small">
+                <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                     {t('welcomeNew.actions.next') || 'Next'}
                 </Button>
             </View>
@@ -296,7 +296,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
                                 placeholderColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
-                            <Button variant="primary" size="small" onPress={openAvatarPicker}>
+                            <Button appearance="solid" tone="accent" size="small" onPress={openAvatarPicker}>
                                 {avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}
                             </Button>
                         </View>

package/src/ui/screens/fileManagement/FileLibraryError.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 
 export interface FileLibraryErrorProps {
@@ -11,8 +13,6 @@ export interface FileLibraryErrorProps {
     iconColor: string;
     titleColor: string;
     descriptionColor: string;
-    /** Retry button background (button label/icon are always white). */
-    buttonColor: string;
 }
 
 /**
@@ -30,7 +30,6 @@ const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
     iconColor,
     titleColor,
     descriptionColor,
-    buttonColor,
 }) => (
     <View className="items-center py-[40px] px-[24px]">
         <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
@@ -40,16 +39,9 @@ const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
         <Text className="text-[16px] text-center leading-[24px] mb-[32px]" style={{ color: descriptionColor }}>
             {description}
         </Text>
-        <TouchableOpacity
-            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-            style={{ backgroundColor: buttonColor }}
-            onPress={onRetry}
-            accessibilityRole="button"
-            accessibilityLabel={retryLabel}
-        >
-            <Ionicons name="refresh" size={20} color="#FFFFFF" />
-            <Text className="text-white text-[16px] font-semibold">{retryLabel}</Text>
-        </TouchableOpacity>
+        <Button onPress={onRetry} accessibilityLabel={retryLabel}>
+            {retryLabel}
+        </Button>
     </View>
 );
 

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -1,12 +1,7 @@
 import type React from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    ScrollView,
-    RefreshControl,
-    ActivityIndicator,
-} from 'react-native';
+import { View, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import type { FileMetadata } from '@oxy.so/core';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
@@ -88,14 +83,7 @@ const FileListSection: React.FC<FileListSectionProps> = ({
                     <Text className="text-[16px] text-center leading-[24px] mb-space-32" style={{ color: colors.textSecondary }}>
                         {t('fileManagement.noResults.description', { query: searchQuery })}
                     </Text>
-                    <TouchableOpacity
-                        className="flex-row items-center px-space-24 py-space-12 rounded-[24px] gap-space-8"
-                        style={{ backgroundColor: colors.primary }}
-                        onPress={onClearSearch}
-                    >
-                        <Ionicons name="refresh" size={20} color="#FFFFFF" />
-                        <Text className="text-white text-[16px] font-semibold">{t('fileManagement.clearSearch')}</Text>
-                    </TouchableOpacity>
+                    <Button onPress={onClearSearch}>{t('fileManagement.clearSearch')}</Button>
                 </View>
             ) : filteredFiles.length === 0 ? renderEmptyState() : (
                 <>

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -1,16 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    ActivityIndicator,
-    RefreshControl,
-    FlatList,
-    Platform,
-    Animated,
-    useWindowDimensions,
-    type LayoutChangeEvent,
-} from 'react-native';
+import { View, TouchableOpacity, ActivityIndicator, RefreshControl, FlatList, Platform, Animated, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
 import Ionicons from '../../icons/Ionicons';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
@@ -535,7 +525,6 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                             iconColor="#FF6B6B"
                             titleColor="#FFFFFF"
                             descriptionColor="rgba(255,255,255,0.7)"
-                            buttonColor={primaryColor}
                         />
                     </View>
                 ) : isEmpty && loading ? (

package/src/ui/screens/fileManagement/UploadBar.tsx

@@ -1,69 +1,30 @@
 import type React from 'react';
-import { View, Text, ActivityIndicator, StyleSheet, Platform, type ViewStyle } from 'react-native';
-import Ionicons from '../../icons/Ionicons';
+import { View } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
+import { Card } from '@oxy.so/bloom/card';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Meter } from '@oxy.so/bloom/stat-bar';
 
 export interface UploadBarProps {
-    /** Aggregate upload progress, or null when indeterminate. */
     uploadProgress: { current: number; total: number } | null;
-    /** Bloom dark-mode flag (drives banner + track colors). */
-    isDark: boolean;
-    /** Theme colors used by the banner. */
-    colors: { primary: string; text: string; border: string };
     t: (key: string, vars?: Record<string, string | number>) => string;
 }
 
-// The banner drop-shadow has no Bloom/Tailwind token equivalent, so it stays an
-// inline style. `boxShadow` on web (RN-Web deprecated the `shadow*` props);
-// RN `shadow*`/`elevation` on native.
-const shadowStyle = StyleSheet.create({
-    banner: Platform.select({
-        web: { boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)' },
-        default: {
-            shadowColor: '#000',
-            shadowOpacity: 0.1,
-            shadowRadius: 6,
-            shadowOffset: { width: 0, height: 2 },
-            elevation: 2,
-        },
-    }) as ViewStyle,
-});
-
-/**
- * The non-blocking "Uploading…" banner overlay shown at the bottom of the file
- * manager while uploads are in flight. Purely presentational — the orchestrator
- * gates rendering on `!selectMode && uploading`.
- */
-const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, isDark, colors, t }) => (
-    <View
-        className="absolute top-[72px] left-0 right-0 items-center z-50"
-        style={{ pointerEvents: 'none' }}
-    >
-        <View
-            className="flex-row items-center px-3.5 py-2.5 rounded-[24px] gap-2.5 border min-w-[200px]"
-            style={[shadowStyle.banner, { backgroundColor: isDark ? '#222831EE' : '#FFFFFFEE', borderColor: colors.border }]}
-        >
-            <Ionicons name="cloud-upload" size={18} color={colors.primary} />
+/** Upload state is app-owned; surface, spinner and determinate meter are Bloom. */
+const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, t }) => (
+    <View pointerEvents="none" className="absolute top-[72px] left-0 right-0 items-center z-50">
+        <Card appearance="solid" elevation="s" radius="radius-max" className="flex-row items-center px-3.5 py-2.5 gap-2.5 min-w-[200px]">
             <View className="flex-1 gap-1.5">
-                <Text className="text-[13px] font-medium" style={{ color: colors.text }}>
-                    {t('fileManagement.uploading')}{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}
+                <Text variant="caption-1-medium">
+                    {t('fileManagement.uploading')}{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '…'}
                 </Text>
-                {uploadProgress && uploadProgress.total > 0 && (
-                    <View
-                        className="h-[3px] rounded-[2px] overflow-hidden"
-                        style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }}
-                    >
-                        <View
-                            className="h-full rounded-[2px]"
-                            style={{
-                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
-                                backgroundColor: colors.primary,
-                            }}
-                        />
-                    </View>
-                )}
+                {uploadProgress && uploadProgress.total > 0 ? (
+                    <Meter value={uploadProgress.current} max={uploadProgress.total} height={3}
+                        accessibilityLabel={t('fileManagement.uploading')} />
+                ) : null}
             </View>
-            <ActivityIndicator size="small" color={colors.primary} />
-        </View>
+            <Loading size="small" />
+        </Card>
     </View>
 );