@oxyhq/services 6.9.32 → 6.9.34

package/src/ui/components/HelperText.tsx

@@ -6,18 +6,7 @@ import {
   StyleSheet,
   type TextStyle,
 } from 'react-native';
-import { useThemeColors } from '../styles';
-
-// Helper function for text color
-const getTextColor = (colors: ReturnType<typeof useThemeColors>, disabled?: boolean, type?: 'error' | 'info') => {
-  if (type === 'error') {
-    return colors.error;
-  }
-  if (disabled) {
-    return `${colors.secondaryText}80`; // Add opacity
-  }
-  return colors.secondaryText;
-};
+import { useTheme } from '@oxyhq/bloom/theme';
 
 export type HelperTextProps = {
   /**
@@ -73,7 +62,7 @@ const HelperText = ({
   maxFontSizeMultiplier = 1.5,
   ...rest
 }: HelperTextProps) => {
-  const colors = useThemeColors(themeProp);
+  const { colors } = useTheme();
   const { current: shown } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );
@@ -109,9 +98,9 @@ const HelperText = ({
       return colors.error;
     }
     if (disabled) {
-      return `${colors.secondaryText}80`; // Add opacity
+      return `${colors.textSecondary}80`; // Add opacity
     }
-    return colors.secondaryText;
+    return colors.textSecondary;
   };
 
   const textColor = getTextColor();

package/src/ui/components/OxyLogo.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import Svg, { Circle, Path } from 'react-native-svg';
 import type { ViewStyle } from 'react-native';
-import { useThemeColors } from '../styles/theme';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 interface OxyLogoProps {
     width?: number;
@@ -37,7 +37,7 @@ export const OxyLogo: React.FC<OxyLogoProps> = ({
     theme = 'light'
 }) => {
     // Get colors from theme
-    const themeColors = useThemeColors(theme);
+    const { colors: themeColors } = useTheme();
 
     // Use theme primary color if no fillColor is provided
     const primaryColor = fillColor || themeColors.primary;

package/src/ui/components/ProfileCard.tsx

@@ -1,13 +1,12 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { useI18n } from '../hooks/useI18n';
 import Avatar from './Avatar';
 import { useOxy } from '../context/OxyContext';
 import { useFileDownloadUrl } from '../hooks';
 import { fontFamilies } from '../styles/fonts';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/useColorScheme';
 
 interface ProfileCardProps {
     user: {
@@ -29,24 +28,22 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
     onClosePress,
     showCloseButton = false,
 }) => {
-    const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme, colorScheme);
+    const { colors } = useTheme();
     const { oxyServices } = useOxy();
     const { t } = useI18n();
-    const textColor = themeStyles.textColor;
-    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
-    const primaryColor = '#0066CC';
 
     const avatarUrl = useFileDownloadUrl(oxyServices, user?.avatar, { variant: 'thumb' }).url || undefined;
 
     return (
         <View style={styles.headerSection}>
-            <View style={[
-                styles.profileCard,
-                styles.firstGroupedItem,
-                styles.lastGroupedItem,
-                { backgroundColor: secondaryBackgroundColor }
-            ]}>
+            <View
+                className="bg-secondary"
+                style={[
+                    styles.profileCard,
+                    styles.firstGroupedItem,
+                    styles.lastGroupedItem,
+                ]}
+            >
                 <View style={styles.userProfile}>
                     <Avatar
                         uri={user?.avatar ? avatarUrl : undefined}
@@ -55,9 +52,9 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                         theme={theme}
                     />
                     <View style={styles.userInfo}>
-                        <Text style={[styles.userName, { color: textColor }]}>{user.username}</Text>
+                        <Text className="text-foreground" style={styles.userName}>{user.username}</Text>
                         {user.email && (
-                            <Text style={[styles.userEmail, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                            <Text className="text-muted-foreground" style={styles.userEmail}>
                                 {user.email}
                             </Text>
                         )}
@@ -66,7 +63,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                                 style={styles.editProfileButton}
                                 onPress={onEditPress}
                             >
-                                <Text style={[styles.editProfileText, { color: primaryColor }]}>
+                                <Text className="text-primary" style={styles.editProfileText}>
                                     {t('editProfile.title') || 'Edit Profile'}
                                 </Text>
                             </TouchableOpacity>
@@ -75,7 +72,7 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
                 </View>
                 {showCloseButton && onClosePress && (
                     <TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
-                        <Ionicons name="close" size={24} color={textColor} />
+                        <Ionicons name="close" size={24} color={colors.text} />
                     </TouchableOpacity>
                 )}
             </View>

package/src/ui/components/QuickActions.tsx

@@ -1,8 +1,7 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { useThemeStyles } from '../hooks/useThemeStyles';
-import { useColorScheme } from '../hooks/useColorScheme';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 interface QuickAction {
     id: string;
@@ -18,31 +17,30 @@ interface QuickActionsProps {
 }
 
 const QuickActions: React.FC<QuickActionsProps> = ({ actions, theme }) => {
-    const colorScheme = useColorScheme();
-    const themeStyles = useThemeStyles(theme, colorScheme);
-    const textColor = themeStyles.textColor;
-    const secondaryBackgroundColor = themeStyles.secondaryBackgroundColor;
+    const { isDark } = useTheme();
 
     return (
-        <View style={[
-            styles.quickActionsContainer,
-            styles.firstGroupedItem,
-            styles.lastGroupedItem,
-            { backgroundColor: secondaryBackgroundColor }
-        ]}>
+        <View
+            className="bg-secondary"
+            style={[
+                styles.quickActionsContainer,
+                styles.firstGroupedItem,
+                styles.lastGroupedItem,
+            ]}
+        >
             <View style={styles.quickActionsRow}>
                 {actions.map((action) => (
                     <View key={action.id} style={styles.quickActionItem}>
                         <TouchableOpacity
                             style={[
                                 styles.quickActionCircle,
-                                { backgroundColor: themeStyles.isDarkTheme ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
+                                { backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.03)' }
                             ]}
                             onPress={action.onPress}
                         >
                             <Ionicons name={action.icon as React.ComponentProps<typeof Ionicons>['name']} size={24} color={action.iconColor} />
                         </TouchableOpacity>
-                        <Text style={[styles.quickActionText, { color: textColor }]}>{action.title}</Text>
+                        <Text className="text-foreground" style={styles.quickActionText}>{action.title}</Text>
                     </View>
                 ))}
             </View>

package/src/ui/components/SectionTitle.tsx

@@ -1,9 +1,6 @@
 import type React from 'react';
 import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
 import { fontFamilies } from '../styles/fonts';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { normalizeColorScheme } from '../utils/themeUtils';
-import { useThemeStyles } from '../hooks/useThemeStyles';
 
 interface SectionTitleProps {
     title: string;
@@ -12,11 +9,8 @@ interface SectionTitleProps {
 }
 
 const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {
-    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
-    const themeStyles = useThemeStyles(theme || colorScheme, colorScheme);
-
     return (
-        <Text style={[styles.sectionTitle, { color: themeStyles.textColor }, style]}>
+        <Text className="text-foreground" style={[styles.sectionTitle, style]}>
             {title}
         </Text>
     );

package/src/ui/components/SignInModal.tsx

@@ -358,8 +358,8 @@ const SignInModal: React.FC = () => {
                     {/* Header */}
                     <View style={styles.header}>
                         <OxyLogo width={56} height={56} />
-                        <Text style={[styles.title, { color: theme.colors.text }]}>Sign in with Oxy</Text>
-                        <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
+                        <Text className="text-foreground" style={styles.title}>Sign in with Oxy</Text>
+                        <Text className="text-muted-foreground" style={styles.subtitle}>
                             Scan with Oxy Accounts app or use the button below
                         </Text>
                     </View>
@@ -367,13 +367,13 @@ const SignInModal: React.FC = () => {
                     {isLoading ? (
                         <View style={styles.loadingContainer}>
                             <Loading size="large" />
-                            <Text style={[styles.loadingText, { color: theme.colors.textSecondary }]}>
+                            <Text className="text-muted-foreground" style={styles.loadingText}>
                                 Preparing sign in...
                             </Text>
                         </View>
                     ) : error ? (
                         <View style={styles.errorContainer}>
-                            <Text style={[styles.errorText, { color: theme.colors.error }]}>{error}</Text>
+                            <Text className="text-destructive" style={styles.errorText}>{error}</Text>
                             <Button onPress={handleRefresh}>Try Again</Button>
                         </View>
                     ) : (
@@ -462,13 +462,11 @@ const styles = StyleSheet.create({
         fontSize: 28,
         fontWeight: 'bold',
         marginTop: 16,
-        color: 'white',
     },
     subtitle: {
         fontSize: 15,
         marginTop: 8,
         textAlign: 'center',
-        color: 'rgba(255, 255, 255, 0.7)',
     },
     qrContainer: {
         padding: 20,

package/src/ui/components/TextField/TextFieldFlat.tsx

@@ -8,7 +8,7 @@ import {
   View,
   Animated,
 } from 'react-native';
-import { useThemeColors } from '../../hooks/useThemeColors';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 import { Underline } from './Addons/Underline';
 import { AdornmentSide, AdornmentType, InputMode } from './Adornment/enums';
@@ -158,17 +158,17 @@ const TextInputFlat = ({
     theme,
   });
 
-  const themeColors = useThemeColors();
+  const { colors: bloomColors } = useTheme();
 
   const containerStyle = {
-    backgroundColor: themeColors.inputBackground,
+    backgroundColor: bloomColors.backgroundSecondary,
     borderTopLeftRadius: theme.roundness,
     borderTopRightRadius: theme.roundness,
   };
 
   // Override text color with theme color (unless custom textColor prop is provided)
   // If disabled, keep the original inputTextColor which handles opacity correctly
-  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : bloomColors.text);
 
   const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
   const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;

package/src/ui/components/TextField/TextFieldOutlined.tsx

@@ -10,7 +10,7 @@ import {
   type ColorValue,
   type LayoutChangeEvent,
 } from 'react-native';
-import { useThemeColors } from '../../hooks/useThemeColors';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 import { Outline } from './Addons/Outline';
 import { AdornmentType, AdornmentSide } from './Adornment/enums';
@@ -89,7 +89,7 @@ const TextInputOutlined = ({
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } =
     getConstants(isV3);
 
-  const themeColors = useThemeColors();
+  const { colors: bloomColors } = useTheme();
 
   const {
     fontSize: fontSizeStyle,
@@ -101,7 +101,7 @@ const TextInputOutlined = ({
     ...viewStyle
   } = (StyleSheet.flatten(style) || {}) as TextStyle;
 
-  const backgroundColor = styleBackgroundColor ?? themeColors.background;
+  const backgroundColor = styleBackgroundColor ?? bloomColors.background;
   const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
   // Always set a minimum lineHeight to prevent text cutoff
   // Use at least 1.4x fontSize for better text spacing
@@ -127,7 +127,7 @@ const TextInputOutlined = ({
 
   // Override text color with theme color (unless custom textColor prop is provided)
   // If disabled, keep the original inputTextColor which handles opacity correctly
-  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+  const finalInputTextColor = textColor ?? (disabled ? inputTextColor : bloomColors.text);
 
   const densePaddingTop = label ? LABEL_PADDING_TOP_DENSE : 0;
   const paddingTop = label ? LABEL_PADDING_TOP : 0;

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

@@ -1,10 +1,10 @@
 import type React from 'react';
 import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import type { ThemeStyles } from '../../hooks/useThemeStyles';
 
 interface FileDetailsModalProps {
     visible: boolean;
@@ -12,8 +12,9 @@ interface FileDetailsModalProps {
     onClose: () => void;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
-    themeStyles: ThemeStyles;
     isOwner: boolean;
+    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
+    themeStyles?: unknown;
 }
 
 export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
@@ -22,11 +23,9 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
     onClose,
     onDownload,
     onDelete,
-    themeStyles,
     isOwner,
 }) => {
-    const backgroundColor = themeStyles.backgroundColor;
-    const borderColor = themeStyles.borderColor;
+    const { colors } = useTheme();
 
     if (!file) return null;
 
@@ -37,66 +36,66 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
             presentationStyle="pageSheet"
             onRequestClose={onClose}
         >
-            <View style={[fileManagementStyles.modalContainer, { backgroundColor }]}>
-                <View style={[fileManagementStyles.modalHeader, { borderBottomColor: borderColor }]}>
+            <View className="bg-background" style={fileManagementStyles.modalContainer}>
+                <View className="border-b border-border" style={fileManagementStyles.modalHeader}>
                     <TouchableOpacity
                         style={fileManagementStyles.modalCloseButton}
                         onPress={onClose}
                     >
-                        <Ionicons name="close" size={24} color={themeStyles.textColor} />
+                        <Ionicons name="close" size={24} color={colors.text} />
                     </TouchableOpacity>
-                    <Text style={[fileManagementStyles.modalTitle, { color: themeStyles.textColor }]}>File Details</Text>
+                    <Text className="text-foreground" style={fileManagementStyles.modalTitle}>File Details</Text>
                     <View style={fileManagementStyles.modalPlaceholder} />
                 </View>
 
                 <ScrollView style={fileManagementStyles.modalContent}>
-                    <View style={[fileManagementStyles.fileDetailCard, { backgroundColor: themeStyles.secondaryBackgroundColor, borderColor }]}>
+                    <View className="bg-secondary border-border" style={fileManagementStyles.fileDetailCard}>
                         <View style={fileManagementStyles.fileDetailIcon}>
                             <Ionicons
                                 name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
                                 size={64}
-                                color={themeStyles.primaryColor}
+                                color={colors.primary}
                             />
                         </View>
 
-                        <Text style={[fileManagementStyles.fileDetailName, { color: themeStyles.textColor }]}>
+                        <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
                             {file.filename}
                         </Text>
 
                         <View style={fileManagementStyles.fileDetailInfo}>
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Size:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {formatFileSize(file.length)}
                                 </Text>
                             </View>
 
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Type:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {file.contentType}
                                 </Text>
                             </View>
 
                             <View style={fileManagementStyles.detailRow}>
-                                <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                     Uploaded:
                                 </Text>
-                                <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                     {new Date(file.uploadDate).toLocaleString()}
                                 </Text>
                             </View>
 
                             {file.metadata?.description && (
                                 <View style={fileManagementStyles.detailRow}>
-                                    <Text style={[fileManagementStyles.detailLabel, { color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666' }]}>
+                                    <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
                                         Description:
                                     </Text>
-                                    <Text style={[fileManagementStyles.detailValue, { color: themeStyles.textColor }]}>
+                                    <Text className="text-foreground" style={fileManagementStyles.detailValue}>
                                         {file.metadata.description}
                                     </Text>
                                 </View>
@@ -105,7 +104,8 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
                         <View style={fileManagementStyles.modalActions}>
                             <TouchableOpacity
-                                style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.primaryColor }]}
+                                className="bg-primary"
+                                style={fileManagementStyles.modalActionButton}
                                 onPress={() => {
                                     onDownload(file.id, file.filename);
                                     onClose();
@@ -117,7 +117,8 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
 
                             {isOwner && (
                                 <TouchableOpacity
-                                    style={[fileManagementStyles.modalActionButton, { backgroundColor: themeStyles.dangerColor }]}
+                                    className="bg-destructive"
+                                    style={fileManagementStyles.modalActionButton}
                                     onPress={() => {
                                         onClose();
                                         onDelete(file.id, file.filename);