@oxyhq/services 6.9.45 → 6.10.1

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;

package/src/ui/hooks/useThemeColors.ts

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { Colors } from '../constants/theme';
-
-/**
- * Returns theme colors based on current color scheme.
- * Delegates to bloom's useTheme() and maps to the Colors shape
- * for backward compatibility with existing screens.
- */
-export const useThemeColors = () => {
-  const theme = useTheme();
-
-  return useMemo(() => {
-    const base = Colors[theme.isDark ? 'dark' : 'light'];
-    // Merge bloom colors over the local constants so bloom's
-    // dynamic colors (from scoped CSS vars) take precedence.
-    return {
-      ...base,
-      background: theme.colors.background,
-      text: theme.colors.text,
-      border: theme.colors.border,
-      tint: theme.colors.primary,
-      card: theme.colors.card,
-      primary: theme.colors.primary,
-    };
-  }, [theme]);
-};

package/src/ui/hooks/useThemeStyles.ts

@@ -1,50 +0,0 @@
-import { useMemo } from 'react';
-import { useTheme } from '@oxyhq/bloom/theme';
-import { Colors } from '../constants/theme';
-
-export interface ThemeStyles {
-    textColor: string;
-    backgroundColor: string;
-    secondaryBackgroundColor: string;
-    borderColor: string;
-    mutedTextColor: string;
-    isDarkTheme: boolean;
-    primaryColor: string;
-    dangerColor: string;
-    successColor: string;
-    colorScheme: 'light' | 'dark';
-    colors: typeof Colors.light;
-}
-
-/**
- * Returns theme styles for service screens.
- * Delegates to bloom's useTheme() for all color values.
- * The `theme` param is kept for backward compatibility but ignored —
- * bloom's resolved mode (from BloomThemeProvider) is used instead.
- */
-export const useThemeStyles = (
-    _theme?: string,
-    _colorSchemeFromHook?: string | null
-): ThemeStyles => {
-    const bloomTheme = useTheme();
-
-    return useMemo(() => {
-        const isDarkTheme = bloomTheme.isDark;
-        const colorScheme = isDarkTheme ? 'dark' : 'light';
-        const colors = Colors[colorScheme];
-
-        return {
-            textColor: bloomTheme.colors.text,
-            backgroundColor: bloomTheme.colors.background,
-            secondaryBackgroundColor: bloomTheme.colors.backgroundSecondary,
-            borderColor: bloomTheme.colors.border,
-            mutedTextColor: bloomTheme.colors.textSecondary,
-            primaryColor: bloomTheme.colors.primary,
-            dangerColor: bloomTheme.colors.error,
-            successColor: bloomTheme.colors.success,
-            isDarkTheme,
-            colorScheme,
-            colors,
-        };
-    }, [bloomTheme]);
-};

package/src/ui/styles/fonts.ts

@@ -1,77 +0,0 @@
-import { Platform, type TextStyle } from 'react-native';
-
-/**
- * Font family names for use across the app
- *
- * For web platforms, we use the CSS font name with weights
- * For native platforms, we use the specific static font file names
- */
-export const fontFamilies = {
-  // Regular weight (400)
-  inter: Platform.select({
-    web: 'Inter',  // Web projects will use standard CSS font name
-    default: 'Inter-Regular'  // Native projects use the specific weight font
-  }),
-
-  // Light weight (300)
-  interLight: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-Light'  // Native uses specific font
-  }),
-
-  // Medium weight (500)
-  interMedium: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-Medium'  // Native uses specific font
-  }),
-
-  // SemiBold weight (600)
-  interSemiBold: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-SemiBold'  // Native uses specific font
-  }),
-
-  // Bold weight (700)
-  interBold: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-Bold'  // Native uses specific font
-  }),
-
-  // ExtraBold weight (800)
-  interExtraBold: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-ExtraBold'  // Native uses specific font
-  }),
-
-  // Black weight (900)
-  interBlack: Platform.select({
-    web: 'Inter',  // Web uses CSS weight
-    default: 'Inter-Black'  // Native uses specific font
-  }),
-};
-
-/**
- * Font styles that can be reused across the app
- */
-export const fontStyles: Record<string, TextStyle> = {
-  titleLarge: {
-    fontFamily: fontFamilies.interBold,
-    fontSize: 54,
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-  },
-  titleMedium: {
-    fontFamily: fontFamilies.interBold,
-    fontSize: 24,
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-  },
-  titleSmall: {
-    fontFamily: fontFamilies.interBold,
-    fontSize: 20,
-    fontWeight: Platform.OS === 'web' ? 'bold' : undefined,  // Only apply fontWeight on web
-  },
-  buttonText: {
-    fontFamily: fontFamilies.interSemiBold,
-    fontSize: 16,
-    fontWeight: Platform.OS === 'web' ? '600' : undefined,  // Only apply fontWeight on web
-  },
-};