@oxyhq/services 6.9.43 → 6.9.45

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>
     );
 };
-

package/src/ui/components/icon/OxyIcon.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
-import { Platform, type StyleProp, type TextStyle } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 export interface IconProps {
   name: string;
@@ -12,16 +12,17 @@ export interface IconProps {
 const OxyIcon: React.FC<IconProps> = ({
   name,
   size = 24,
-  color = '#000',
+  color,
   style
 }) => {
-  // Icon name is already properly typed as IoniconsGlyphs
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.icon;
 
   return (
     <Ionicons
       name={name as React.ComponentProps<typeof Ionicons>['name']}
       size={size}
-      color={color}
+      color={resolvedColor}
       style={style}
     />
   );

package/src/ui/components/internal/GroupedPillButtons.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { View, TouchableOpacity, Text, ActivityIndicator, StyleSheet, Platform } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 type IoniconsName = React.ComponentProps<typeof Ionicons>['name'];
 
@@ -32,6 +33,8 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
     colors,
     gap = 8,
 }) => {
+    const theme = useTheme();
+
     const getButtonStyle = (button: ButtonConfig, index: number, totalButtons: number) => {
         const baseStyle = {
             flexDirection: 'row' as const,
@@ -87,16 +90,16 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
         switch (button.variant) {
             case 'primary':
-                backgroundColor = isDisabled ? '#CCCCCC' : colors.primary;
-                borderColor = isDisabled ? '#CCCCCC' : colors.primary;
+                backgroundColor = isDisabled ? theme.colors.borderLight : colors.primary;
+                borderColor = isDisabled ? theme.colors.borderLight : colors.primary;
                 break;
             case 'secondary':
-                backgroundColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
-                borderColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
+                backgroundColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
+                borderColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
                 break;
             default:
                 backgroundColor = 'transparent';
-                borderColor = isDisabled ? '#CCCCCC' : colors.border;
+                borderColor = isDisabled ? theme.colors.borderLight : colors.border;
                 break;
         }
 
@@ -119,14 +122,14 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
         const isDisabled = button.disabled || button.loading;
         let textColor = colors.text;
-        
+
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                textColor = isDisabled ? '#999999' : '#FFFFFF';
+                textColor = isDisabled ? theme.colors.textTertiary : '#FFFFFF';
                 break;
             default:
-                textColor = isDisabled ? '#999999' : colors.text;
+                textColor = isDisabled ? theme.colors.textTertiary : colors.text;
                 break;
         }
 
@@ -139,13 +142,13 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
 
     const getIconColor = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
         const isDisabled = button.disabled || button.loading;
-        
+
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                return isDisabled ? '#999999' : '#FFFFFF';
+                return isDisabled ? theme.colors.textTertiary : '#FFFFFF';
             default:
-                return isDisabled ? '#999999' : colors.text;
+                return isDisabled ? theme.colors.textTertiary : colors.text;
         }
     };
 
@@ -247,4 +250,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default GroupedPillButtons; 
+export default GroupedPillButtons;

package/src/ui/components/internal/PinInput.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { View, TextInput, StyleSheet, Platform, type NativeSyntheticEvent, type TextInputKeyPressEventData } from 'react-native';
+import { useTheme } from '@oxyhq/bloom/theme';
 
 interface PinInputColors {
     primary: string;
@@ -24,6 +25,7 @@ export interface PinInputHandle {
 }
 
 const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, length = 6, disabled, autoFocus, colors }, ref) => {
+    const theme = useTheme();
     const inputs = useRef<Array<TextInput | null>>([]);
 
     useImperativeHandle(ref, () => ({
@@ -66,7 +68,7 @@ const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, l
                     ref={(ref) => { inputs.current[idx] = ref; }}
                     style={[
                         styles.pinInput,
-                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground },
+                        { borderColor: colors.primary, color: colors.text, backgroundColor: colors.inputBackground || theme.colors.backgroundSecondary },
                         value[idx] ? { borderWidth: 2 } : { borderWidth: 1 },
                     ]}
                     value={value[idx] || ''}
@@ -100,7 +102,6 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         fontSize: 28,
         fontWeight: '600',
-        backgroundColor: '#F5F5F5',
         textAlign: 'center',
         marginHorizontal: 2,
         ...Platform.select({
@@ -118,4 +119,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default PinInput; 
+export default PinInput;