@oxyhq/services 6.9.45 → 6.9.46

package/src/ui/components/GroupedItem.tsx

@@ -1,161 +0,0 @@
-import type React from 'react';
-import { memo, useMemo } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { darkenColor } from '../utils/colorUtils';
-
-
-interface GroupedItemProps {
-    icon?: string;
-    iconColor?: string;
-    title: string;
-    subtitle?: string;
-    onPress?: () => void;
-    isFirst?: boolean;
-    isLast?: boolean;
-    showChevron?: boolean;
-    disabled?: boolean;
-    customContent?: React.ReactNode;
-    customIcon?: React.ReactNode;
-    /** Accessibility label (defaults to title) */
-    accessibilityLabel?: string;
-    /** Accessibility hint for what happens on press */
-    accessibilityHint?: string;
-}
-
-const GroupedItemComponent = ({
-    icon,
-    iconColor,
-    title,
-    subtitle,
-    onPress,
-    isFirst = false,
-    isLast = false,
-    showChevron = false,
-    disabled = false,
-    customContent,
-    customIcon,
-    accessibilityLabel,
-    accessibilityHint,
-}: GroupedItemProps) => {
-    const { colors } = useTheme();
-    // Use fallback color when iconColor is not provided
-    const finalIconColor = iconColor || colors.icon;
-
-    const itemStyles = useMemo(
-        () => [
-            styles.groupedItem,
-            isFirst && styles.firstGroupedItem,
-            isLast && styles.lastGroupedItem,
-        ],
-        [isFirst, isLast],
-    );
-
-    const content = (
-        <View style={styles.groupedItemContent}>
-            {customIcon ? (
-                <View style={styles.actionIcon}>{customIcon}</View>
-            ) : icon ? (
-                <View style={[styles.iconContainer, { backgroundColor: finalIconColor }]}>
-                    <MaterialCommunityIcons name={icon} size={22} color={darkenColor(finalIconColor)} />
-                </View>
-            ) : null}
-            <View style={styles.actionTextContainer}>
-                <Text className="text-foreground" style={styles.actionButtonText}>{title}</Text>
-                {subtitle && (
-                    <Text className="text-muted-foreground" style={styles.actionButtonSubtext}>
-                        {subtitle}
-                    </Text>
-                )}
-            </View>
-            {customContent}
-            {showChevron && (
-                <Ionicons name="chevron-forward" size={20} color={colors.icon} />
-            )}
-        </View>
-    );
-
-    if (onPress && !disabled) {
-        return (
-            <TouchableOpacity
-                className="bg-card"
-                style={itemStyles}
-                onPress={onPress}
-                activeOpacity={0.7}
-                accessibilityRole="button"
-                accessibilityLabel={accessibilityLabel || title}
-                accessibilityHint={accessibilityHint || subtitle}
-                accessibilityState={{ disabled }}
-            >
-                {content}
-            </TouchableOpacity>
-        );
-    }
-
-    return (
-        <View
-            className="bg-card"
-            style={itemStyles}
-            accessibilityRole="text"
-            accessibilityLabel={accessibilityLabel || title}
-        >
-            {content}
-        </View>
-    );
-};
-
-GroupedItemComponent.displayName = 'GroupedItem';
-
-export const GroupedItem = memo(GroupedItemComponent);
-
-const styles = StyleSheet.create({
-    groupedItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        overflow: 'hidden',
-        width: '100%',
-    },
-    firstGroupedItem: {
-        borderTopLeftRadius: 18,
-        borderTopRightRadius: 18,
-    },
-    lastGroupedItem: {
-        borderBottomLeftRadius: 18,
-        borderBottomRightRadius: 18,
-    },
-    groupedItemContent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 8,
-        paddingHorizontal: 10,
-        width: '100%',
-        gap: 10,
-    },
-    actionIcon: {
-        // marginRight handled by gap
-    },
-    iconContainer: {
-        width: 36,
-        height: 36,
-        borderRadius: 18,
-        alignItems: 'center',
-        justifyContent: 'center',
-        // marginRight handled by gap
-    },
-    actionTextContainer: {
-        flex: 1,
-    },
-    actionButtonText: {
-        fontSize: 14,
-        fontWeight: '400',
-    },
-    actionButtonSubtext: {
-        fontSize: 12,
-        marginTop: 2,
-    },
-});
-
-export default GroupedItem;

package/src/ui/components/GroupedSection.tsx

@@ -1,60 +0,0 @@
-import type React from 'react';
-import { memo } from 'react';
-import { View } from 'react-native';
-import { GroupedItem } from './GroupedItem';
-import { Ionicons } from '@expo/vector-icons';
-
-interface GroupedSectionItem {
-    id: string;
-    icon?: string;
-    iconColor?: string;
-    title: string;
-    subtitle?: string;
-    onPress?: () => void;
-    onLongPress?: () => void;
-    showChevron?: boolean;
-    disabled?: boolean;
-    selected?: boolean;
-    customContent?: React.ReactNode;
-    customIcon?: React.ReactNode;
-    multiRow?: boolean;
-    dense?: boolean;
-    customContentBelow?: React.ReactNode;
-    theme?: string;
-    /** Allow additional properties for extensibility */
-    [key: string]: unknown;
-}
-
-interface GroupedSectionProps {
-    items: GroupedSectionItem[];
-}
-
-const GroupedSectionComponent = ({ items }: GroupedSectionProps) => {
-    return (
-        <View style={{ width: '100%' }}>
-            {items.map((item, index) => (
-                <View key={`${item.id}-${index}`} style={{ marginBottom: index < items.length - 1 ? 4 : 0 }}>
-                    <GroupedItem
-                        icon={item.icon}
-                        iconColor={item.iconColor}
-                        title={item.title}
-                        subtitle={item.subtitle}
-                        onPress={item.onPress}
-                        isFirst={index === 0}
-                        isLast={index === items.length - 1}
-                        showChevron={item.showChevron}
-                        disabled={item.disabled}
-                        customContent={item.customContent}
-                        customIcon={item.customIcon}
-                    />
-                </View>
-            ))}
-        </View>
-    );
-};
-
-GroupedSectionComponent.displayName = 'GroupedSection';
-
-export const GroupedSection = memo(GroupedSectionComponent);
-
-export default GroupedSection;

package/src/ui/components/Section.tsx

@@ -1,42 +0,0 @@
-import type React from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import SectionTitle from './SectionTitle';
-import { useColorScheme } from '../hooks/useColorScheme';
-import { normalizeColorScheme } from '../utils/themeUtils';
-
-interface SectionProps {
-    title?: string;
-    theme?: 'light' | 'dark';
-    children: React.ReactNode;
-    isFirst?: boolean;
-    style?: StyleProp<ViewStyle>;
-}
-
-const Section: React.FC<SectionProps> = ({
-    title,
-    theme,
-    children,
-    isFirst = false,
-    style
-}) => {
-    const colorScheme = normalizeColorScheme(useColorScheme(), theme);
-    
-    return (
-        <View style={[styles.section, isFirst && styles.firstSection, style]}>
-            {title && <SectionTitle title={title} theme={colorScheme} />}
-            {children}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    section: {
-        marginBottom: 10,
-        gap: 12,
-    },
-    firstSection: {
-        marginTop: 8,
-    },
-});
-
-export default Section;

package/src/ui/components/SectionTitle.tsx

@@ -1,27 +0,0 @@
-import type React from 'react';
-import { Text, StyleSheet, type StyleProp, type TextStyle } from 'react-native';
-import { fontFamilies } from '../styles/fonts';
-
-interface SectionTitleProps {
-    title: string;
-    theme?: 'light' | 'dark';
-    style?: StyleProp<TextStyle>;
-}
-
-const SectionTitle: React.FC<SectionTitleProps> = ({ title, theme, style }) => {
-    return (
-        <Text className="text-foreground" style={[styles.sectionTitle, style]}>
-            {title}
-        </Text>
-    );
-};
-
-const styles = StyleSheet.create({
-    sectionTitle: {
-        fontSize: 16,
-        fontWeight: '600',
-        fontFamily: fontFamilies.interSemiBold,
-    },
-});
-
-export default SectionTitle;

package/src/ui/components/SettingRow.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { View, Text, Switch, StyleSheet } from 'react-native';
-import { useTheme } from '@oxyhq/bloom/theme';
-
-export interface SettingRowProps {
-    title: string;
-    description?: string;
-    value: boolean;
-    onValueChange: (value: boolean) => void;
-    disabled?: boolean;
-    textColor?: string;
-    mutedTextColor?: string;
-    borderColor?: string;
-    /** Active color for the switch track */
-    activeColor?: string;
-    /** Inactive color for the switch track */
-    inactiveColor?: string;
-    /** Accessibility label for the switch */
-    accessibilityLabel?: string;
-}
-
-/**
- * Reusable setting row component with switch
- * Extracted from PrivacySettingsScreen for reuse across settings screens
- */
-const SettingRow: React.FC<SettingRowProps> = ({
-    title,
-    description,
-    value,
-    onValueChange,
-    disabled = false,
-    textColor,
-    mutedTextColor,
-    borderColor,
-    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]}
-            accessibilityRole="none"
-        >
-            <View style={styles.settingInfo}>
-                <Text
-                    style={[styles.settingTitle, textColor ? { color: textColor } : undefined]}
-                    accessibilityRole="text"
-                >
-                    {title}
-                </Text>
-                {description && (
-                    <Text
-                        style={[styles.settingDescription, mutedTextColor ? { color: mutedTextColor } : undefined]}
-                        accessibilityRole="text"
-                    >
-                        {description}
-                    </Text>
-                )}
-            </View>
-            <Switch
-                value={value}
-                onValueChange={onValueChange}
-                disabled={disabled}
-                trackColor={{ false: resolvedInactiveColor, true: resolvedActiveColor }}
-                thumbColor={value ? thumbOn : thumbOff}
-                accessibilityRole="switch"
-                accessibilityLabel={accessibilityLabel || title}
-                accessibilityState={{ checked: value, disabled }}
-                accessibilityHint={description}
-            />
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    settingRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 16,
-        borderBottomWidth: 1,
-    },
-    settingInfo: {
-        flex: 1,
-        marginRight: 16,
-    },
-    settingTitle: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 4,
-    },
-    settingDescription: {
-        fontSize: 14,
-        opacity: 0.7,
-    },
-});
-
-export default React.memo(SettingRow);

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

@@ -1,253 +0,0 @@
-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'];
-
-interface ButtonConfig {
-    text: string;
-    onPress: () => void;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'transparent';
-    disabled?: boolean;
-    loading?: boolean;
-    testID?: string;
-}
-
-interface GroupedPillButtonColors {
-    primary: string;
-    secondary?: string;
-    border: string;
-    text: string;
-}
-
-interface GroupedPillButtonsProps {
-    buttons: ButtonConfig[];
-    colors: GroupedPillButtonColors;
-    gap?: number;
-}
-
-const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
-    buttons,
-    colors,
-    gap = 8,
-}) => {
-    const theme = useTheme();
-
-    const getButtonStyle = (button: ButtonConfig, index: number, totalButtons: number) => {
-        const baseStyle = {
-            flexDirection: 'row' as const,
-            alignItems: 'center' as const,
-            paddingVertical: 6,
-            paddingHorizontal: 12,
-            gap: 6,
-            minWidth: 70,
-            borderWidth: 1,
-            flexShrink: 0,
-        };
-
-        // Determine border radius based on position
-        let borderRadius = {
-            borderTopLeftRadius: 35,
-            borderBottomLeftRadius: 35,
-            borderTopRightRadius: 35,
-            borderBottomRightRadius: 35,
-        };
-
-        if (totalButtons > 1) {
-            if (index === 0) {
-                // First button
-                borderRadius = {
-                    borderTopLeftRadius: 35,
-                    borderBottomLeftRadius: 35,
-                    borderTopRightRadius: 12,
-                    borderBottomRightRadius: 12,
-                };
-            } else if (index === totalButtons - 1) {
-                // Last button
-                borderRadius = {
-                    borderTopLeftRadius: 12,
-                    borderBottomLeftRadius: 12,
-                    borderTopRightRadius: 35,
-                    borderBottomRightRadius: 35,
-                };
-            } else {
-                // Middle button (if 3 buttons)
-                borderRadius = {
-                    borderTopLeftRadius: 12,
-                    borderBottomLeftRadius: 12,
-                    borderTopRightRadius: 12,
-                    borderBottomRightRadius: 12,
-                };
-            }
-        }
-
-        // Determine colors based on variant
-        let backgroundColor = 'transparent';
-        let borderColor = colors.border;
-        const isDisabled = button.disabled || button.loading;
-
-        switch (button.variant) {
-            case 'primary':
-                backgroundColor = isDisabled ? theme.colors.borderLight : colors.primary;
-                borderColor = isDisabled ? theme.colors.borderLight : colors.primary;
-                break;
-            case 'secondary':
-                backgroundColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
-                borderColor = isDisabled ? theme.colors.borderLight : (colors.secondary || colors.primary);
-                break;
-            default:
-                backgroundColor = 'transparent';
-                borderColor = isDisabled ? theme.colors.borderLight : colors.border;
-                break;
-        }
-
-        return {
-            ...baseStyle,
-            ...borderRadius,
-            backgroundColor,
-            borderColor,
-            opacity: isDisabled ? 0.6 : 1,
-        };
-    };
-
-    const getTextStyle = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
-        const baseTextStyle = {
-            fontSize: 15,
-            fontWeight: '600' as const,
-            // Avoid stretching that can cause wraps on native
-            flexShrink: 1,
-        };
-
-        const isDisabled = button.disabled || button.loading;
-        let textColor = colors.text;
-
-        switch (button.variant) {
-            case 'primary':
-            case 'secondary':
-                textColor = isDisabled ? theme.colors.textTertiary : '#FFFFFF';
-                break;
-            default:
-                textColor = isDisabled ? theme.colors.textTertiary : colors.text;
-                break;
-        }
-
-        return {
-            ...baseTextStyle,
-            color: textColor,
-            ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : null),
-        };
-    };
-
-    const getIconColor = (button: ButtonConfig, colors: GroupedPillButtonColors) => {
-        const isDisabled = button.disabled || button.loading;
-
-        switch (button.variant) {
-            case 'primary':
-            case 'secondary':
-                return isDisabled ? theme.colors.textTertiary : '#FFFFFF';
-            default:
-                return isDisabled ? theme.colors.textTertiary : colors.text;
-        }
-    };
-
-    const isBackButton = (button: ButtonConfig) => {
-        const text = typeof button.text === 'string' ? button.text.toLowerCase() : '';
-        return text.includes('back') ||
-            button.icon === 'arrow-back' ||
-            button.icon === 'chevron-back';
-    };
-
-    const renderButtonContent = (button: ButtonConfig, colors: GroupedPillButtonColors, index: number) => {
-        const iconColor = getIconColor(button, colors);
-        const isBack = isBackButton(button);
-        const isFirstButton = index === 0;
-        const isSingleButton = buttons.length === 1;
-
-        if (button.loading) {
-            return (
-                <ActivityIndicator
-                    color={iconColor}
-                    size="small"
-                />
-            );
-        }
-
-        // Auto-detect icon placement based on button order and type
-        if (isSingleButton) {
-            // Single button: icon on right
-            return (
-                <>
-                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
-                        {button.text}
-                    </Text>
-                    {button.icon && (
-                        <Ionicons
-                            name={button.icon as IoniconsName}
-                            size={16}
-                            color={iconColor}
-                        />
-                    )}
-                </>
-            );
-        }if (isFirstButton || isBack) {
-            // First button or back button: icon on left, text on right
-            return (
-                <>
-                    {button.icon && (
-                        <Ionicons
-                            name={button.icon as IoniconsName}
-                            size={16}
-                            color={iconColor}
-                        />
-                    )}
-                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
-                        {button.text}
-                    </Text>
-                </>
-            );
-        }
-            // Second button or forward/action button: text on left, icon on right
-            return (
-                <>
-                    <Text style={getTextStyle(button, colors)} numberOfLines={1} ellipsizeMode="tail">
-                        {button.text}
-                    </Text>
-                    {button.icon && (
-                        <Ionicons
-                            name={button.icon as IoniconsName}
-                            size={16}
-                            color={iconColor}
-                        />
-                    )}
-                </>
-            );
-    };
-
-    return (
-        <View style={[styles.container, { gap }]}>
-            {buttons.map((button, index) => (
-                <TouchableOpacity
-                    key={index}
-                    style={getButtonStyle(button, index, buttons.length)}
-                    onPress={button.onPress}
-                    disabled={button.disabled || button.loading}
-                    testID={button.testID}
-                >
-                    {renderButtonContent(button, colors, index)}
-                </TouchableOpacity>
-            ))}
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        width: '100%',
-    },
-});
-
-export default GroupedPillButtons;