@oxyhq/services 6.9.44 → 6.9.46

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/FileViewer.tsx

@@ -9,7 +9,7 @@ import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
 import { Colors } from '../../constants/theme';
-import { GroupedSection } from '../GroupedSection';
+import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface FileViewerProps {
     file: FileMetadata;
@@ -105,53 +105,53 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     }, [imageDimensions, containerWidth]);
 
     const fileDetailItems = useMemo(() => {
-        const items = [
+        const items: Array<{ id: string; iconName: string; iconColor: string; title: string; description: string }> = [
             {
                 id: 'filename',
-                icon: 'file-document',
+                iconName: 'file-document',
                 iconColor: constantColors.iconSecurity,
                 title: 'File Name',
-                subtitle: file.filename,
+                description: file.filename,
             },
             {
                 id: 'size',
-                icon: 'server',
+                iconName: 'server',
                 iconColor: constantColors.iconStorage,
                 title: 'Size',
-                subtitle: formatFileSize(file.length),
+                description: formatFileSize(file.length),
             },
             {
                 id: 'type',
-                icon: 'code-tags',
+                iconName: 'code-tags',
                 iconColor: constantColors.iconData,
                 title: 'Type',
-                subtitle: file.contentType,
+                description: file.contentType,
             },
             {
                 id: 'uploaded',
-                icon: 'clock',
+                iconName: 'clock',
                 iconColor: constantColors.iconPersonalInfo,
                 title: 'Uploaded',
-                subtitle: new Date(file.uploadDate).toLocaleString(),
+                description: new Date(file.uploadDate).toLocaleString(),
             },
         ];
 
         if (file.metadata?.description) {
             items.push({
                 id: 'description',
-                icon: 'text',
+                iconName: 'text',
                 iconColor: constantColors.iconData,
                 title: 'Description',
-                subtitle: file.metadata.description,
+                description: file.metadata.description,
             });
         }
 
         items.push({
             id: 'fileId',
-            icon: 'key',
+            iconName: 'key',
             iconColor: constantColors.iconSecurity,
             title: 'File ID',
-            subtitle: file.id,
+            description: file.id,
         });
 
         return items;
@@ -366,7 +366,17 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 {showFileDetailsInViewer && (
                     <>
                         <View style={fileManagementStyles.fileDetailsSectionContent}>
-                            <GroupedSection items={fileDetailItems} />
+                            <SettingsListGroup>
+                                {fileDetailItems.map((item) => (
+                                    <SettingsListItem
+                                        key={item.id}
+                                        icon={<MaterialCommunityIcons name={item.iconName} size={20} color={item.iconColor} />}
+                                        title={item.title}
+                                        description={item.description}
+                                        showChevron={false}
+                                    />
+                                ))}
+                            </SettingsListGroup>
                         </View>
 
                         {isOwner && (

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/index.ts

@@ -1,14 +1,9 @@
 // Re-export all reusable UI components
 export { default as ProfileCard } from './ProfileCard';
-export { default as Section } from './Section';
-export { default as SectionTitle } from './SectionTitle';
-export { default as GroupedItem } from './GroupedItem';
-export { default as GroupedSection } from './GroupedSection';
 export { default as QuickActions } from './QuickActions';
 export { default as Header, getHeaderHeight } from './Header';
 export { default as LoadingState } from './LoadingState';
 export { default as EmptyState } from './EmptyState';
-export { default as SettingRow } from './SettingRow';
 export { SettingsIcon } from './SettingsIcon';
 
 // Re-export existing components

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;