@oxyhq/services 5.13.0 → 5.13.2

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,

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

@@ -267,10 +267,12 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
             : surfaceScale(0.62);
 
     // Helper function to clone React elements with updated color
+    // React 19: ref is now a regular prop, accessed via element.props.ref
     const cloneWithColor = (element: React.ReactNode, color: string): React.ReactNode => {
         if (React.isValidElement(element) && element.type) {
-            // Avoid spreading props directly to satisfy TS complaining about non-object spread sources
-            return React.cloneElement(element as any, { color });
+            // React 19: ref is now in props, so we spread all props and override color
+            const elementProps = (element as any).props || {};
+            return React.cloneElement(element as any, { ...elementProps, color });
         }
         return element;
     };
@@ -737,20 +739,19 @@ const TextField = forwardRef<TextInput, TextFieldProps>(({
                 {/* Underline for filled/standard variants */}
                 {(variant === 'filled' || variant === 'standard') && (
                     <>
-                        <View style={styles.underline} pointerEvents="none" />
+                        <View style={[styles.underline, { pointerEvents: 'none' }]} />
                         <Animated.View
                             style={[
                                 styles.underlineFocused,
-                                { transform: [{ scaleX: focusAnimation }] }
+                                { transform: [{ scaleX: focusAnimation }], pointerEvents: 'none' }
                             ]}
-                            pointerEvents="none"
                         />
                     </>
                 )}
 
                 {/* Label */}
                 {label && (
-                    <View style={styles.labelContainer} pointerEvents="none">
+                    <View style={[styles.labelContainer, { pointerEvents: 'none' }]}>
                         <Animated.Text
                             style={[
                                 styles.label,