@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/styles/authStyles.js

@@ -0,0 +1,332 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAuthStyles = void 0;
+const react_native_1 = require("react-native");
+const fonts_1 = require("./fonts");
+const createAuthStyles = (colors, theme) => react_native_1.StyleSheet.create({
+    // Container and scrollContent styles removed entirely
+    // All layout is handled by BottomSheetRouter's BottomSheetScrollView
+    // StepBasedScreen and step components are pure content renderers
+    stepContainer: {
+        // Removed flex: 1 - BottomSheetScrollView handles all layout
+        // This prevents unnecessary expansion that can cause spacing issues
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+    },
+    // Header styles
+    modernHeader: {
+        alignItems: 'flex-start',
+        width: '100%',
+        marginBottom: 24,
+    },
+    modernTitle: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 62,
+        lineHeight: 74.4, // 62 * 1.2
+        marginBottom: 18,
+        textAlign: 'left',
+        letterSpacing: -1,
+    },
+    modernSubtitle: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
+        opacity: 0.8,
+    },
+    welcomeTitle: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        lineHeight: 50.4, // 42 * 1.2
+        marginBottom: 12,
+        textAlign: 'left',
+        letterSpacing: -1,
+    },
+    stepTitle: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        lineHeight: 50.4, // 42 * 1.2
+        marginBottom: 12,
+        textAlign: 'left',
+        letterSpacing: -1,
+    },
+    // Info and error cards
+    modernInfoCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 16,
+        marginBottom: 24,
+        gap: 12,
+        width: '100%',
+    },
+    modernInfoText: {
+        fontSize: 14,
+        flex: 1,
+    },
+    modernErrorCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 16,
+        marginBottom: 24,
+        gap: 12,
+        width: '100%',
+    },
+    errorText: {
+        fontSize: 14,
+        fontWeight: '500',
+        flex: 1,
+    },
+    // Input styles
+    modernInputContainer: {
+        width: '100%',
+        marginBottom: 24,
+    },
+    inputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 56,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    premiumInputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 56,
+        borderRadius: 16,
+        paddingHorizontal: 20,
+        borderWidth: 2,
+        backgroundColor: colors.inputBackground,
+    },
+    inputIcon: {
+        marginRight: 12,
+    },
+    inputContent: {
+        flex: 1,
+    },
+    modernInput: {
+        flex: 1,
+        fontSize: 16,
+        height: '100%',
+    },
+    passwordToggle: {
+        padding: 4,
+    },
+    // Validation styles
+    validationIndicator: {
+        marginLeft: 8,
+    },
+    validationSuccessCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        marginTop: 8,
+        gap: 8,
+    },
+    validationErrorCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        marginTop: 8,
+        gap: 8,
+    },
+    validationCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 12,
+        borderRadius: 12,
+        marginTop: 8,
+        gap: 8,
+    },
+    validationText: {
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    belowInputMessage: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 4,
+        marginBottom: 0,
+        gap: 6,
+    },
+    belowInputText: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    // Button styles
+    modernButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 18,
+        paddingHorizontal: 32,
+        borderRadius: 16,
+        marginVertical: 8,
+        ...react_native_1.Platform.select({
+            web: {
+                boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
+            },
+            default: {
+                shadowOffset: {
+                    width: 0,
+                    height: 4,
+                },
+                shadowOpacity: 0.3,
+                shadowRadius: 8,
+                elevation: 6,
+            }
+        }),
+        gap: 8,
+        width: '100%',
+    },
+    modernButtonText: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    buttonIcon: {
+        marginLeft: 4,
+    },
+    // Label and link styles
+    modernLabel: {
+        fontSize: 12,
+        fontWeight: '500',
+        marginBottom: 2,
+    },
+    modernLinkText: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontWeight: '600',
+        textDecorationLine: 'underline',
+    },
+    footerTextContainer: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 16,
+    },
+    footerText: {
+        fontSize: 15,
+    },
+    // User profile styles
+    modernUserProfileContainer: {
+        alignItems: 'flex-start',
+        paddingVertical: 24,
+    },
+    avatarContainer: {
+        position: 'relative',
+        marginBottom: 20,
+    },
+    modernUserAvatar: {
+        borderWidth: 4,
+        borderColor: 'rgba(209, 105, 229, 0.2)',
+    },
+    statusIndicator: {
+        position: 'absolute',
+        bottom: 4,
+        right: 4,
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 3,
+        borderColor: '#FFFFFF',
+    },
+    modernUserDisplayName: {
+        fontFamily: fonts_1.fontFamilies.interBold,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontSize: 42,
+        marginBottom: 4,
+        textAlign: 'left',
+        letterSpacing: -0.5,
+    },
+    modernUsernameSubtext: {
+        fontSize: 20,
+        textAlign: 'left',
+        marginBottom: 16,
+        opacity: 0.7,
+    },
+    welcomeBackBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 20,
+        gap: 6,
+    },
+    welcomeBackText: {
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    // Navigation styles
+    modernNavigationButtons: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: 16,
+        marginBottom: 8,
+        width: '100%',
+        gap: 8,
+    },
+    modernBackButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        borderRadius: 12,
+        borderWidth: 1,
+        gap: 8,
+    },
+    modernBackButtonText: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    // Security notice
+    securityNotice: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 20,
+        gap: 6,
+    },
+    securityText: {
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    // Welcome image container
+    welcomeImageContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginVertical: 20,
+    },
+    welcomeText: {
+        fontSize: 18,
+        lineHeight: 24,
+        textAlign: 'left',
+        opacity: 0.8,
+        marginBottom: 24,
+    },
+    // Success styles
+    successCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 16,
+        marginBottom: 24,
+        gap: 12,
+        width: '100%',
+    },
+    successText: {
+        fontSize: 14,
+        fontWeight: '500',
+        flex: 1,
+    },
+});
+exports.createAuthStyles = createAuthStyles;

package/src/ui/styles/fonts.d.ts

@@ -0,0 +1,20 @@
+import { 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 declare const fontFamilies: {
+    inter: string;
+    interLight: string;
+    interMedium: string;
+    interSemiBold: string;
+    interBold: string;
+    interExtraBold: string;
+    interBlack: string;
+};
+/**
+ * Font styles that can be reused across the app
+ */
+export declare const fontStyles: Record<string, TextStyle>;

package/src/ui/styles/fonts.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontStyles = exports.fontFamilies = void 0;
+const react_native_1 = require("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
+ */
+exports.fontFamilies = {
+    // Regular weight (400)
+    inter: react_native_1.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: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-Light' // Native uses specific font
+    }),
+    // Medium weight (500)
+    interMedium: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-Medium' // Native uses specific font
+    }),
+    // SemiBold weight (600)
+    interSemiBold: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-SemiBold' // Native uses specific font
+    }),
+    // Bold weight (700)
+    interBold: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-Bold' // Native uses specific font
+    }),
+    // ExtraBold weight (800)
+    interExtraBold: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-ExtraBold' // Native uses specific font
+    }),
+    // Black weight (900)
+    interBlack: react_native_1.Platform.select({
+        web: 'Inter', // Web uses CSS weight
+        default: 'Inter-Black' // Native uses specific font
+    }),
+};
+/**
+ * Font styles that can be reused across the app
+ */
+exports.fontStyles = {
+    titleLarge: {
+        fontFamily: exports.fontFamilies.interBold,
+        fontSize: 54,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+    },
+    titleMedium: {
+        fontFamily: exports.fontFamilies.interBold,
+        fontSize: 24,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+    },
+    titleSmall: {
+        fontFamily: exports.fontFamilies.interBold,
+        fontSize: 20,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined, // Only apply fontWeight on web
+    },
+    buttonText: {
+        fontFamily: exports.fontFamilies.interSemiBold,
+        fontSize: 16,
+        fontWeight: react_native_1.Platform.OS === 'web' ? '600' : undefined, // Only apply fontWeight on web
+    },
+};

package/src/ui/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './fonts';
+export * from './theme';
+export * from './authStyles';
+export * from './spacing';

package/src/ui/styles/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./fonts"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./authStyles"), exports);
+__exportStar(require("./spacing"), exports);

package/src/ui/styles/spacing.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Shared spacing constants for authentication screens
+ * These values ensure consistent vertical spacing across all step components
+ * All gaps between elements (illustration, title, description, textfield, buttons, etc.) use this value
+ */
+export declare const STEP_GAP = 12;
+export declare const STEP_INNER_GAP = 12;
+/**
+ * Re-export screen spacing constants from constants/spacing.ts
+ * This allows importing all spacing constants from a single location
+ */
+export { SCREEN_PADDING_HORIZONTAL, SCREEN_PADDING_VERTICAL, SECTION_GAP, SECTION_GAP_LARGE, COMPONENT_GAP, COMPONENT_GAP_SMALL, HEADER_PADDING_TOP_OVERVIEW, HEADER_PADDING_TOP_SETTINGS, } from '../constants/spacing';
+/**
+ * Reusable stylesheet for step components
+ * NOTE: Layout styles (container, sectionSpacing) removed - all layout is handled by BottomSheetRouter
+ * Step components should NOT use these for layout, only for content-specific styling
+ */
+export declare const stepStyles: {
+    container: {
+        width: "100%";
+        maxWidth: number;
+        alignSelf: "center";
+    };
+    sectionSpacing: {
+        marginBottom: number;
+    };
+    header: {
+        alignItems: "flex-start";
+        width: "100%";
+        gap: number;
+    };
+    title: {
+        textAlign: "left";
+        marginBottom: number;
+        marginTop: number;
+    };
+    subtitle: {
+        textAlign: "left";
+        maxWidth: number;
+        alignSelf: "flex-start";
+        marginBottom: number;
+        marginTop: number;
+    };
+    buttonContainer: {
+        marginTop: number;
+        marginBottom: number;
+    };
+};

package/src/ui/styles/spacing.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stepStyles = exports.HEADER_PADDING_TOP_SETTINGS = exports.HEADER_PADDING_TOP_OVERVIEW = exports.COMPONENT_GAP_SMALL = exports.COMPONENT_GAP = exports.SECTION_GAP_LARGE = exports.SECTION_GAP = exports.SCREEN_PADDING_VERTICAL = exports.SCREEN_PADDING_HORIZONTAL = exports.STEP_INNER_GAP = exports.STEP_GAP = void 0;
+const react_native_1 = require("react-native");
+/**
+ * Shared spacing constants for authentication screens
+ * These values ensure consistent vertical spacing across all step components
+ * All gaps between elements (illustration, title, description, textfield, buttons, etc.) use this value
+ */
+exports.STEP_GAP = 12; // Vertical gap between ALL elements (illustration, title, description, textfield, buttons, etc.) - must be consistent everywhere
+exports.STEP_INNER_GAP = 12; // Gap within sections (headers, cards, etc.) - must match STEP_GAP for uniformity
+/**
+ * Re-export screen spacing constants from constants/spacing.ts
+ * This allows importing all spacing constants from a single location
+ */
+var spacing_1 = require("../constants/spacing");
+Object.defineProperty(exports, "SCREEN_PADDING_HORIZONTAL", { enumerable: true, get: function () { return spacing_1.SCREEN_PADDING_HORIZONTAL; } });
+Object.defineProperty(exports, "SCREEN_PADDING_VERTICAL", { enumerable: true, get: function () { return spacing_1.SCREEN_PADDING_VERTICAL; } });
+Object.defineProperty(exports, "SECTION_GAP", { enumerable: true, get: function () { return spacing_1.SECTION_GAP; } });
+Object.defineProperty(exports, "SECTION_GAP_LARGE", { enumerable: true, get: function () { return spacing_1.SECTION_GAP_LARGE; } });
+Object.defineProperty(exports, "COMPONENT_GAP", { enumerable: true, get: function () { return spacing_1.COMPONENT_GAP; } });
+Object.defineProperty(exports, "COMPONENT_GAP_SMALL", { enumerable: true, get: function () { return spacing_1.COMPONENT_GAP_SMALL; } });
+Object.defineProperty(exports, "HEADER_PADDING_TOP_OVERVIEW", { enumerable: true, get: function () { return spacing_1.HEADER_PADDING_TOP_OVERVIEW; } });
+Object.defineProperty(exports, "HEADER_PADDING_TOP_SETTINGS", { enumerable: true, get: function () { return spacing_1.HEADER_PADDING_TOP_SETTINGS; } });
+/**
+ * Reusable stylesheet for step components
+ * NOTE: Layout styles (container, sectionSpacing) removed - all layout is handled by BottomSheetRouter
+ * Step components should NOT use these for layout, only for content-specific styling
+ */
+exports.stepStyles = react_native_1.StyleSheet.create({
+    container: {
+        // Layout removed - use only for content width constraints if needed
+        width: '100%',
+        maxWidth: 420,
+        alignSelf: 'center',
+    },
+    sectionSpacing: {
+        // Layout removed - do NOT use for spacing, use explicit marginBottom: 0
+        // This is kept for backward compatibility but should not add margins
+        marginBottom: 0,
+    },
+    header: {
+        alignItems: 'flex-start',
+        width: '100%',
+        gap: exports.STEP_INNER_GAP,
+    },
+    title: {
+        textAlign: 'left',
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    subtitle: {
+        textAlign: 'left',
+        maxWidth: 320,
+        alignSelf: 'flex-start',
+        marginBottom: 0,
+        marginTop: 0,
+    },
+    buttonContainer: {
+        marginTop: 0,
+        marginBottom: 0,
+    },
+});

package/src/ui/styles/theme.d.ts

@@ -0,0 +1,67 @@
+import { type TextStyle } from 'react-native';
+export interface ThemeColors {
+    text: string;
+    background: string;
+    inputBackground: string;
+    placeholder: string;
+    primary: string;
+    border: string;
+    error: string;
+    success: string;
+    warning: string;
+    secondaryText: string;
+}
+export interface Theme {
+    colors: ThemeColors;
+    fonts: {
+        title: TextStyle;
+        body: TextStyle;
+        button: TextStyle;
+        label: TextStyle;
+    };
+}
+export declare const getTheme: (theme: "light" | "dark") => Theme;
+export declare const useThemeColors: (theme: "light" | "dark") => ThemeColors;
+export declare const createCommonStyles: (theme: "light" | "dark") => {
+    container: {
+        backgroundColor: string;
+    };
+    scrollContainer: {
+        padding: number;
+    };
+    input: {
+        height: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        fontSize: number;
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+    };
+    button: {
+        backgroundColor: string;
+        height: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        marginTop: number;
+    };
+    buttonText: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "600";
+        color: string;
+    };
+    errorContainer: {
+        backgroundColor: string;
+        padding: number;
+        borderRadius: number;
+        marginBottom: number;
+    };
+    errorText: {
+        fontSize: number;
+        fontWeight: "500";
+        color: string;
+    };
+};