@oxyhq/services 6.9.44 → 6.9.45

package/src/ui/components/OxySignInButton.tsx

@@ -1,8 +1,9 @@
 import type React from 'react';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
+import { useTheme } from '@oxyhq/bloom/theme';
 import { fontFamilies } from '../styles/fonts';
 import OxyLogo from './OxyLogo';
 import { showSignInModal, subscribeToSignInModal } from './SignInModal';
@@ -51,26 +52,25 @@ export interface OxySignInButtonProps {
 
 /**
  * A pre-styled button component for signing in with Oxy identity
- * 
+ *
  * This component opens the Oxy Auth flow which allows users to authenticate
  * using their Oxy Accounts identity (via QR code or deep link).
- * 
+ *
  * @example
  * ```tsx
  * // Basic usage
  * <OxySignInButton />
- * 
+ *
  * // Custom styling
- * <OxySignInButton 
- *   variant="contained" 
- *   style={{ marginTop: 20 }} 
- *   text="Login with Oxy" 
+ * <OxySignInButton
+ *   variant="contained"
+ *   style={{ marginTop: 20 }}
+ *   text="Login with Oxy"
  * />
- * 
+ *
  * // Custom handler
  * <OxySignInButton onPress={() => {
  *   // Custom authentication flow
- *   console.log('Custom auth flow initiated');
  * }} />
  * ```
  */
@@ -83,6 +83,7 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     disabled = false,
     showWhenAuthenticated = false,
 }) => {
+    const theme = useTheme();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
@@ -105,6 +106,66 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
         showSignInModal();
     }, [onPress]);
 
+    const themedStyles = useMemo(() => StyleSheet.create({
+        button: {
+            padding: 14,
+            borderRadius: 35,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        buttonDefault: {
+            backgroundColor: '#FFFFFF',
+            borderWidth: 1,
+            borderColor: theme.colors.borderLight,
+            ...Platform.select({
+                web: {
+                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                },
+                default: {
+                    shadowColor: '#000000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 4,
+                    elevation: 2,
+                }
+            }),
+        },
+        buttonOutline: {
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: theme.colors.primary,
+        },
+        buttonContained: {
+            backgroundColor: theme.colors.primary,
+        },
+        buttonDisabled: {
+            opacity: 0.6,
+        },
+        buttonContent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        text: {
+            fontFamily: fontFamilies.interSemiBold,
+            fontWeight: Platform.OS === 'web' ? '600' : undefined,
+            fontSize: 16,
+            marginLeft: 10,
+        },
+        textDefault: {
+            color: theme.colors.text,
+        },
+        textOutline: {
+            color: theme.colors.primary,
+        },
+        textContained: {
+            color: '#FFFFFF',
+        },
+        textDisabled: {
+            color: theme.colors.textTertiary,
+        },
+    }), [theme]);
+
     // Don't show the button if already authenticated (unless explicitly overridden)
     if (isAuthenticated && !showWhenAuthenticated) return null;
 
@@ -114,11 +175,11 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     const getButtonStyle = () => {
         switch (variant) {
             case 'outline':
-                return [styles.buttonOutline, style];
+                return [themedStyles.buttonOutline, style];
             case 'contained':
-                return [styles.buttonContained, style];
+                return [themedStyles.buttonContained, style];
             default:
-                return [styles.buttonDefault, style];
+                return [themedStyles.buttonDefault, style];
         }
     };
 
@@ -126,29 +187,29 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     const getTextStyle = () => {
         switch (variant) {
             case 'outline':
-                return [styles.textOutline, textStyle];
+                return [themedStyles.textOutline, textStyle];
             case 'contained':
-                return [styles.textContained, textStyle];
+                return [themedStyles.textContained, textStyle];
             default:
-                return [styles.textDefault, textStyle];
+                return [themedStyles.textDefault, textStyle];
         }
     };
 
     return (
         <TouchableOpacity
-            style={[styles.button, getButtonStyle(), isButtonDisabled && styles.buttonDisabled]}
+            style={[themedStyles.button, getButtonStyle(), isButtonDisabled && themedStyles.buttonDisabled]}
             onPress={handlePress}
             disabled={isButtonDisabled}
         >
-            <View style={styles.buttonContent}>
+            <View style={themedStyles.buttonContent}>
                 <OxyLogo
                     variant="icon"
                     size={20}
-                    fillColor={variant === 'contained' ? 'white' : '#d269e6'}
-                    innerFillColor={variant === 'contained' ? '#d269e6' : undefined}
+                    fillColor={variant === 'contained' ? 'white' : theme.colors.primary}
+                    innerFillColor={variant === 'contained' ? theme.colors.primary : undefined}
                     style={isButtonDisabled ? { opacity: 0.6 } : undefined}
                 />
-                <Text style={[styles.text, getTextStyle(), isButtonDisabled && styles.textDisabled]}>
+                <Text style={[themedStyles.text, getTextStyle(), isButtonDisabled && themedStyles.textDisabled]}>
                     {isLoading || isModalOpen ? 'Signing in...' : text}
                 </Text>
             </View>
@@ -156,64 +217,4 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     );
 };
 
-const styles = StyleSheet.create({
-    button: {
-        padding: 14,
-        borderRadius: 35,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    buttonDefault: {
-        backgroundColor: '#FFFFFF',
-        borderWidth: 1,
-        borderColor: '#DDDDDD',
-        ...Platform.select({
-            web: {
-                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            },
-            default: {
-                shadowColor: '#000000',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.1,
-                shadowRadius: 4,
-                elevation: 2,
-            }
-        }),
-    },
-    buttonOutline: {
-        backgroundColor: 'transparent',
-        borderWidth: 1,
-        borderColor: '#d169e5',
-    },
-    buttonContained: {
-        backgroundColor: '#d169e5',
-    },
-    buttonDisabled: {
-        opacity: 0.6,
-    },
-    buttonContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    text: {
-        fontFamily: fontFamilies.interSemiBold,
-        fontWeight: Platform.OS === 'web' ? '600' : undefined,
-        fontSize: 16,
-        marginLeft: 10,
-    },
-    textDefault: {
-        color: '#333333',
-    },
-    textOutline: {
-        color: '#d169e5',
-    },
-    textContained: {
-        color: '#FFFFFF',
-    },
-    textDisabled: {
-        color: '#888888',
-    },
-});
-
 export default OxySignInButton;

package/src/ui/components/SettingRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, Switch, StyleSheet } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 export interface SettingRowProps {
     title: string;
@@ -10,9 +11,9 @@ export interface SettingRowProps {
     textColor?: string;
     mutedTextColor?: string;
     borderColor?: string;
-    /** Active color for the switch track (default: #d169e5) */
+    /** Active color for the switch track */
     activeColor?: string;
-    /** Inactive color for the switch track (default: #767577) */
+    /** Inactive color for the switch track */
     inactiveColor?: string;
     /** Accessibility label for the switch */
     accessibilityLabel?: string;
@@ -31,10 +32,17 @@ const SettingRow: React.FC<SettingRowProps> = ({
     textColor,
     mutedTextColor,
     borderColor,
-    activeColor = '#d169e5',
-    inactiveColor = '#767577',
+    activeColor,
+    inactiveColor,
     accessibilityLabel,
 }) => {
+    const theme = useTheme();
+
+    const resolvedActiveColor = activeColor ?? theme.colors.primary;
+    const resolvedInactiveColor = inactiveColor ?? theme.colors.textTertiary;
+    const thumbOn = theme.colors.background;
+    const thumbOff = theme.colors.backgroundSecondary;
+
     return (
         <View
             style={[styles.settingRow, borderColor ? { borderBottomColor: borderColor } : undefined]}
@@ -60,8 +68,8 @@ const SettingRow: React.FC<SettingRowProps> = ({
                 value={value}
                 onValueChange={onValueChange}
                 disabled={disabled}
-                trackColor={{ false: inactiveColor, true: activeColor }}
-                thumbColor={value ? '#fff' : '#f4f3f4'}
+                trackColor={{ false: resolvedInactiveColor, true: resolvedActiveColor }}
+                thumbColor={value ? thumbOn : thumbOff}
                 accessibilityRole="switch"
                 accessibilityLabel={accessibilityLabel || title}
                 accessibilityState={{ checked: value, disabled }}
@@ -95,4 +103,3 @@ const styles = StyleSheet.create({
 });
 
 export default React.memo(SettingRow);
-

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

@@ -1,138 +1,108 @@
 import type React from 'react';
-import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
+import { View, Text } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import * as Dialog from '@oxyhq/bloom/dialog';
+import type { DialogControlProps } from '@oxyhq/bloom/dialog';
+import * as Prompt from '@oxyhq/bloom/prompt';
 import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
 
 interface FileDetailsModalProps {
-    visible: boolean;
+    control: DialogControlProps;
     file: FileMetadata | null;
-    onClose: () => void;
     onDownload: (fileId: string, filename: string) => void;
     onDelete: (fileId: string, filename: string) => void;
     isOwner: boolean;
-    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
-    themeStyles?: unknown;
+    onClose?: () => void;
 }
 
 export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
-    visible,
+    control,
     file,
-    onClose,
     onDownload,
     onDelete,
     isOwner,
+    onClose,
 }) => {
     const { colors } = useTheme();
 
     if (!file) return null;
 
     return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={onClose}
-        >
-            <View style={[fileManagementStyles.modalContainer, { backgroundColor: colors.background }]}>
-                <View className="border-b border-border" style={fileManagementStyles.modalHeader}>
-                    <TouchableOpacity
-                        style={fileManagementStyles.modalCloseButton}
-                        onPress={onClose}
-                    >
-                        <Ionicons name="close" size={24} color={colors.text} />
-                    </TouchableOpacity>
-                    <Text className="text-foreground" style={fileManagementStyles.modalTitle}>File Details</Text>
-                    <View style={fileManagementStyles.modalPlaceholder} />
-                </View>
+        <Dialog.Outer control={control} onClose={onClose}>
+            <Dialog.Handle />
+            <Dialog.ScrollableInner label="File Details">
+                <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={colors.primary}
+                        />
+                    </View>
 
-                <ScrollView style={fileManagementStyles.modalContent}>
-                    <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={colors.primary}
-                            />
-                        </View>
+                    <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
+                        {file.filename}
+                    </Text>
 
-                        <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
-                            {file.filename}
-                        </Text>
+                    <View style={fileManagementStyles.fileDetailInfo}>
+                        <View style={fileManagementStyles.detailRow}>
+                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                                Size:
+                            </Text>
+                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                                {formatFileSize(file.length)}
+                            </Text>
+                        </View>
 
-                        <View style={fileManagementStyles.fileDetailInfo}>
-                            <View style={fileManagementStyles.detailRow}>
-                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                    Size:
-                                </Text>
-                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                    {formatFileSize(file.length)}
-                                </Text>
-                            </View>
+                        <View style={fileManagementStyles.detailRow}>
+                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                                Type:
+                            </Text>
+                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                                {file.contentType}
+                            </Text>
+                        </View>
 
-                            <View style={fileManagementStyles.detailRow}>
-                                <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                    Type:
-                                </Text>
-                                <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                    {file.contentType}
-                                </Text>
-                            </View>
+                        <View style={fileManagementStyles.detailRow}>
+                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                                Uploaded:
+                            </Text>
+                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                                {new Date(file.uploadDate).toLocaleString()}
+                            </Text>
+                        </View>
 
+                        {file.metadata?.description && (
                             <View style={fileManagementStyles.detailRow}>
                                 <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                    Uploaded:
+                                    Description:
                                 </Text>
                                 <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                    {new Date(file.uploadDate).toLocaleString()}
+                                    {file.metadata.description}
                                 </Text>
                             </View>
-
-                            {file.metadata?.description && (
-                                <View style={fileManagementStyles.detailRow}>
-                                    <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
-                                        Description:
-                                    </Text>
-                                    <Text className="text-foreground" style={fileManagementStyles.detailValue}>
-                                        {file.metadata.description}
-                                    </Text>
-                                </View>
-                            )}
-                        </View>
-
-                        <View style={fileManagementStyles.modalActions}>
-                            <TouchableOpacity
-                                className="bg-primary"
-                                style={fileManagementStyles.modalActionButton}
-                                onPress={() => {
-                                    onDownload(file.id, file.filename);
-                                    onClose();
-                                }}
-                            >
-                                <Ionicons name="download" size={20} color="#FFFFFF" />
-                                <Text style={fileManagementStyles.modalActionText}>Download</Text>
-                            </TouchableOpacity>
-
-                            {isOwner && (
-                                <TouchableOpacity
-                                    className="bg-destructive"
-                                    style={fileManagementStyles.modalActionButton}
-                                    onPress={() => {
-                                        onClose();
-                                        onDelete(file.id, file.filename);
-                                    }}
-                                >
-                                    <Ionicons name="trash" size={20} color="#FFFFFF" />
-                                    <Text style={fileManagementStyles.modalActionText}>Delete</Text>
-                                </TouchableOpacity>
-                            )}
-                        </View>
+                        )}
                     </View>
-                </ScrollView>
-            </View>
-        </Modal>
+
+                    <Prompt.Actions>
+                        <Prompt.Action
+                            onPress={() => onDownload(file.id, file.filename)}
+                            cta="Download"
+                            color="primary"
+                        />
+                        {isOwner && (
+                            <Prompt.Action
+                                onPress={() => onDelete(file.id, file.filename)}
+                                cta="Delete"
+                                color="negative"
+                            />
+                        )}
+                    </Prompt.Actions>
+                </View>
+            </Dialog.ScrollableInner>
+        </Dialog.Outer>
     );
 };
-

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

@@ -1,7 +1,10 @@
 import type React from 'react';
-import { View, Text, TouchableOpacity, Modal, ScrollView } from 'react-native';
+import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons } from '@expo/vector-icons';
+import * as Dialog from '@oxyhq/bloom/dialog';
+import type { DialogControlProps } from '@oxyhq/bloom/dialog';
+import * as Prompt from '@oxyhq/bloom/prompt';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
@@ -15,14 +18,12 @@ interface PendingFile {
 }
 
 interface UploadPreviewProps {
-    visible: boolean;
+    control?: DialogControlProps;
     pendingFiles: PendingFile[];
     onConfirm: () => void;
     onCancel: () => void;
     onRemoveFile: (index: number) => void;
-    inline?: boolean; // New prop to support inline rendering without Modal
-    /** @deprecated No longer used. Colors are sourced from useTheme() internally. */
-    themeStyles?: unknown;
+    inline?: boolean;
 }
 
 const UploadPreviewContent: React.FC<{
@@ -30,11 +31,13 @@ const UploadPreviewContent: React.FC<{
     onConfirm: () => void;
     onCancel: () => void;
     onRemoveFile: (index: number) => void;
+    showActions?: boolean;
 }> = ({
     pendingFiles,
     onConfirm,
     onCancel,
     onRemoveFile,
+    showActions = true,
 }) => {
     const { colors, isDark } = useTheme();
     const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
@@ -66,7 +69,7 @@ const UploadPreviewContent: React.FC<{
                                     contentFit="cover"
                                 />
                             ) : (
-                                <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: isDark ? '#333333' : '#F0F0F0' }]}>
+                                <View style={[fileManagementStyles.uploadPreviewIconContainer, { backgroundColor: colors.backgroundSecondary }]}>
                                     <Ionicons
                                         name={getFileIcon(pendingFile.type) as React.ComponentProps<typeof Ionicons>['name']}
                                         size={32}
@@ -102,44 +105,45 @@ const UploadPreviewContent: React.FC<{
                         {formatFileSize(totalSize)}
                     </Text>
                 </View>
-                <View style={fileManagementStyles.uploadPreviewActions}>
-                    <TouchableOpacity
-                        className="border-border"
-                        style={[
-                            fileManagementStyles.uploadPreviewCancelButton,
-                            { backgroundColor: 'transparent' }
-                        ]}
-                        onPress={onCancel}
-                    >
-                        <Text className="text-foreground" style={fileManagementStyles.uploadPreviewCancelText}>
-                            Cancel
-                        </Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                        className="bg-primary"
-                        style={fileManagementStyles.uploadPreviewConfirmButton}
-                        onPress={onConfirm}
-                    >
-                        <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
-                        <Text style={fileManagementStyles.uploadPreviewConfirmText}>Upload</Text>
-                    </TouchableOpacity>
-                </View>
+                {showActions && (
+                    <View style={fileManagementStyles.uploadPreviewActions}>
+                        <TouchableOpacity
+                            className="border-border"
+                            style={[
+                                fileManagementStyles.uploadPreviewCancelButton,
+                                { backgroundColor: 'transparent' }
+                            ]}
+                            onPress={onCancel}
+                        >
+                            <Text className="text-foreground" style={fileManagementStyles.uploadPreviewCancelText}>
+                                Cancel
+                            </Text>
+                        </TouchableOpacity>
+                        <TouchableOpacity
+                            className="bg-primary"
+                            style={fileManagementStyles.uploadPreviewConfirmButton}
+                            onPress={onConfirm}
+                        >
+                            <Ionicons name="cloud-upload" size={20} color="#FFFFFF" />
+                            <Text style={fileManagementStyles.uploadPreviewConfirmText}>Upload</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
             </View>
         </View>
     );
 };
 
 export const UploadPreview: React.FC<UploadPreviewProps> = ({
-    visible,
+    control,
     pendingFiles,
     onConfirm,
     onCancel,
     onRemoveFile,
     inline = false,
 }) => {
-    // If inline mode, render content directly without Modal
+    // Inline mode: render content directly without Dialog
     if (inline) {
-        if (!visible) return null;
         return (
             <UploadPreviewContent
                 pendingFiles={pendingFiles}
@@ -150,21 +154,29 @@ export const UploadPreview: React.FC<UploadPreviewProps> = ({
         );
     }
 
-    // Default: render with Modal (for backward compatibility)
+    // Dialog mode: requires control prop
+    if (!control) return null;
+
     return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={onCancel}
-        >
-            <UploadPreviewContent
-                pendingFiles={pendingFiles}
-                onConfirm={onConfirm}
-                onCancel={onCancel}
-                onRemoveFile={onRemoveFile}
-            />
-        </Modal>
+        <Dialog.Outer control={control} onClose={onCancel}>
+            <Dialog.Handle />
+            <Dialog.ScrollableInner label="Review Files">
+                <UploadPreviewContent
+                    pendingFiles={pendingFiles}
+                    onConfirm={onConfirm}
+                    onCancel={onCancel}
+                    onRemoveFile={onRemoveFile}
+                    showActions={false}
+                />
+                <Prompt.Actions>
+                    <Prompt.Action
+                        onPress={onConfirm}
+                        cta="Upload"
+                        color="primary"
+                    />
+                    <Prompt.Cancel cta="Cancel" />
+                </Prompt.Actions>
+            </Dialog.ScrollableInner>
+        </Dialog.Outer>
     );
 };
-