@oxyhq/services 5.12.11 → 5.13.1

package/src/ui/components/StepBasedScreen.tsx

@@ -13,11 +13,7 @@ import Animated, {
     useSharedValue,
     useAnimatedStyle,
     withTiming,
-    withSequence,
-    withDelay,
-    withSpring,
     runOnJS,
-    interpolate,
     type SharedValue,
 } from 'react-native-reanimated';
 import { useThemeColors, createAuthStyles } from '../styles';
@@ -51,6 +47,38 @@ interface StepBasedScreenState {
     isTransitioning: boolean;
 }
 
+// Individual animated progress dot
+const AnimatedProgressDot: React.FC<{
+    isActive: boolean;
+    colors: any;
+    styles: any;
+}> = ({ isActive, colors, styles }) => {
+    const width = useSharedValue(isActive ? 12 : 6);
+    const backgroundColor = useSharedValue(isActive ? colors.primary : colors.border);
+
+    useEffect(() => {
+        width.value = withTiming(isActive ? 12 : 6, { duration: 300 });
+        backgroundColor.value = withTiming(
+            isActive ? colors.primary : colors.border,
+            { duration: 300 }
+        );
+    }, [isActive, colors.primary, colors.border, width, backgroundColor]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: width.value,
+        backgroundColor: backgroundColor.value,
+    }));
+
+    return (
+        <Animated.View
+            style={[
+                styles.progressDot,
+                animatedStyle,
+            ]}
+        />
+    );
+};
+
 // Progress indicator component
 const ProgressIndicator: React.FC<{
     currentStep: number;
@@ -60,14 +88,11 @@ const ProgressIndicator: React.FC<{
 }> = ({ currentStep, totalSteps, colors, styles }) => (
     <View style={styles.progressContainer}>
         {Array.from({ length: totalSteps }, (_, index) => (
-            <View
+            <AnimatedProgressDot
                 key={index}
-                style={[
-                    styles.progressDot,
-                    currentStep === index
-                        ? { backgroundColor: colors.primary, width: 24 }
-                        : { backgroundColor: colors.border }
-                ]}
+                isActive={currentStep === index}
+                colors={colors}
+                styles={styles}
             />
         ))}
     </View>
@@ -183,6 +208,20 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
             fontWeight: '600' as const,
             textDecorationLine: 'underline' as const,
         },
+        progressContainer: {
+            flexDirection: 'row' as const,
+            width: '100%',
+            justifyContent: 'center' as const,
+            marginTop: 24, // Space for bottom sheet handle (~20px) + small buffer
+            marginBottom: 24, // Equal spacing below dots
+        },
+        progressDot: {
+            height: 6,
+            width: 6,
+            borderRadius: 3,
+            marginHorizontal: 3,
+            backgroundColor: colors.border,
+        },
     }), [colors, theme]);
 
     // State management
@@ -231,13 +270,6 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
 
         setState(prev => ({ ...prev, isTransitioning: true }));
 
-        // Scale down current content
-        scaleAnim.value = withSequence(
-            withTiming(0.95, { duration: 150 }),
-            withTiming(0.95, { duration: 50 })
-        );
-
-        // Define a JS function for runOnJS to avoid inline closures
         const applyStepChange = (targetStep: number, totalSteps: number) => {
             setState(prev => ({
                 ...prev,
@@ -245,33 +277,24 @@ const StepBasedScreen: React.FC<StepBasedScreenProps> = ({
                 isTransitioning: false,
             }));
             onStepChangeRef.current?.(targetStep, totalSteps);
+
+            // Prepare next step animation
+            fadeAnim.value = 0;
+            scaleAnim.value = 0.98;
+            slideAnim.value = 0;
+
+            fadeAnim.value = withTiming(1, { duration: 220 });
+            scaleAnim.value = withTiming(1, { duration: 220 });
         };
 
-        fadeAnim.value = withSequence(
-            withTiming(0, { duration: 200 }),
-            withTiming(0, { duration: 50 }, (finished) => {
-                if (finished) {
-                    // Call back to JS thread correctly
-                    runOnJS(applyStepChange)(nextStep, steps.length);
-
-                    // Reset animations with proper timing
-                    slideAnim.value = withDelay(16, withTiming(-50, { duration: 0 }));
-                    scaleAnim.value = withDelay(16, withTiming(0.95, { duration: 0 }));
-
-                    // Animate in new content
-                    fadeAnim.value = withDelay(16, withTiming(1, { duration: 300 }));
-                    slideAnim.value = withDelay(16, withSpring(0, {
-                        damping: 15,
-                        stiffness: 200,
-                    }));
-                    scaleAnim.value = withDelay(16, withSpring(1, {
-                        damping: 15,
-                        stiffness: 200,
-                    }));
-                }
-            })
-        );
-    }, [enableAnimations, steps.length]);
+        // Animate current step out
+        scaleAnim.value = withTiming(0.98, { duration: 180 });
+        fadeAnim.value = withTiming(0, { duration: 180 }, (finished) => {
+            if (finished) {
+                runOnJS(applyStepChange)(nextStep, steps.length);
+            }
+        });
+    }, [enableAnimations, steps.length, fadeAnim, scaleAnim, slideAnim]);
 
     // Navigation functions
     const nextStep = useCallback(() => {

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

@@ -33,17 +33,6 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             minWidth: 70,
             borderWidth: 1,
             flexShrink: 0,
-            ...Platform.select({
-                web: {
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                },
-                default: {
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 4,
-                    elevation: 2,
-                }
-            }),
         };
 
         // Determine border radius based on position
@@ -85,28 +74,21 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
         // Determine colors based on variant
         let backgroundColor = 'transparent';
         let borderColor = colors.border;
-        let shadowColor = colors.border;
-        let textColor = colors.text;
+        const isDisabled = button.disabled || button.loading;
 
         switch (button.variant) {
             case 'primary':
-                backgroundColor = colors.primary;
-                borderColor = colors.primary;
-                shadowColor = colors.primary;
-                textColor = '#FFFFFF';
+                backgroundColor = isDisabled ? '#CCCCCC' : colors.primary;
+                borderColor = isDisabled ? '#CCCCCC' : colors.primary;
                 break;
             case 'secondary':
-                backgroundColor = colors.secondary || colors.primary;
-                borderColor = colors.secondary || colors.primary;
-                shadowColor = colors.secondary || colors.primary;
-                textColor = '#FFFFFF';
+                backgroundColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
+                borderColor = isDisabled ? '#CCCCCC' : (colors.secondary || colors.primary);
                 break;
             case 'transparent':
             default:
                 backgroundColor = 'transparent';
-                borderColor = colors.border;
-                shadowColor = colors.border;
-                textColor = colors.text;
+                borderColor = isDisabled ? '#CCCCCC' : colors.border;
                 break;
         }
 
@@ -115,7 +97,7 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             ...borderRadius,
             backgroundColor,
             borderColor,
-            shadowColor,
+            opacity: isDisabled ? 0.6 : 1,
         };
     };
 
@@ -127,15 +109,17 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
             flexShrink: 1,
         };
 
+        const isDisabled = button.disabled || button.loading;
         let textColor = colors.text;
+        
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                textColor = '#FFFFFF';
+                textColor = isDisabled ? '#999999' : '#FFFFFF';
                 break;
             case 'transparent':
             default:
-                textColor = colors.text;
+                textColor = isDisabled ? '#999999' : colors.text;
                 break;
         }
 
@@ -147,13 +131,15 @@ const GroupedPillButtons: React.FC<GroupedPillButtonsProps> = ({
     };
 
     const getIconColor = (button: ButtonConfig, colors: any) => {
+        const isDisabled = button.disabled || button.loading;
+        
         switch (button.variant) {
             case 'primary':
             case 'secondary':
-                return '#FFFFFF';
+                return isDisabled ? '#999999' : '#FFFFFF';
             case 'transparent':
             default:
-                return colors.text;
+                return isDisabled ? '#999999' : colors.text;
         }
     };
 
@@ -252,8 +238,6 @@ const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
         justifyContent: 'flex-end',
-        marginTop: 16,
-        marginBottom: 8,
         width: '100%',
     },
 });

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

@@ -90,8 +90,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         justifyContent: 'center',
         gap: 12,
-        marginBottom: 24,
-        marginTop: 8,
+        marginBottom: 0,
+        marginTop: 0,
     },
     pinInput: {
         width: 44,