@klyftig/mobile-ui 1.9.0 → 1.10.1

package/README.md

@@ -15,7 +15,10 @@ version history.
 `expo`, `react`, `react-native`, `@expo/vector-icons`, `expo-blur`,
 `expo-glass-effect`, `expo-linear-gradient`, `react-native-svg`,
 `react-native-safe-area-context`, `expo-store-review` (native module, needs a
-dev-client rebuild when added), and `zustand` (>= 5).
+dev-client rebuild when added), and `zustand` (>= 5). `react-native` >= 0.83;
+developed and typechecked against 0.88.1 / Expo SDK 58 (1.10.1 fixed the
+removed `StyleSheet.absoluteFillObject` and other 0.88 type changes — apps on
+RN 0.88 need >= 1.10.1).
 
 ## Review ("Rate Us") module
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "scripts": {
     "test": "jest",
     "sync": "bash scripts/sync-to-kaelo.sh",
@@ -40,14 +40,14 @@
   "devDependencies": {
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
-    "@types/react": "~19.2.0",
-    "expo": "~55.0.11",
-    "expo-store-review": "~55.0.14",
+    "@types/react": "~19.3.0",
+    "expo": "~58.0.23",
+    "expo-store-review": "~58.0.2",
     "jest": "^29.7.0",
-    "jest-expo": "~55.0.14",
-    "react": "19.2.0",
-    "react-native": "0.83.4",
-    "react-test-renderer": "^19.2.0",
+    "jest-expo": "~58.0.14",
+    "react": "19.3.0",
+    "react-native": "0.88.1",
+    "react-test-renderer": "19.3.0",
     "typescript": "^6.0.3",
     "zustand": "^5.0.15"
   },

package/src/components/CenterDialog.tsx

@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0,0,0,0.4)',
   },
   content: {

package/src/components/FAB.tsx

@@ -211,7 +211,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(0, 0, 0, 0.3)',
     zIndex: 99,
   },

package/src/components/GlassButton.tsx

@@ -13,7 +13,8 @@ interface GlassButtonProps {
   disabled?: boolean;
   icon?: string;
   fullWidth?: boolean;
-  size?: 'normal' | 'compact';
+  /** normal = 56 pt, medium = 48 pt (same text, a slimmer bar), compact = 40 pt with smaller text. */
+  size?: 'normal' | 'medium' | 'compact';
 }
 
 export const GlassButton: React.FC<GlassButtonProps> = ({
@@ -28,6 +29,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
 }) => {
   const isDisabled = disabled || loading;
   const isCompact = size === 'compact';
+  const isMedium = size === 'medium';
   const scaleAnim = useRef(new Animated.Value(1)).current;
 
   const handlePressIn = () => {
@@ -85,6 +87,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
             style={[
               styles.primaryButton,
               isDisabled && styles.primaryButtonDisabled,
+              isMedium && styles.primaryButtonMedium,
               isCompact && styles.primaryButtonCompact,
             ]}
           >
@@ -120,6 +123,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
             style={[
               styles.dangerButton,
               isDisabled && styles.primaryButtonDisabled,
+              isMedium && styles.buttonMedium,
               isCompact && styles.primaryButtonCompact,
             ]}
           >
@@ -155,6 +159,7 @@ export const GlassButton: React.FC<GlassButtonProps> = ({
           style={[
             styles.secondaryButton,
             isDisabled && styles.primaryButtonDisabled,
+            isMedium && styles.buttonMedium,
             isCompact && styles.secondaryButtonCompact,
           ]}
         >
@@ -184,6 +189,13 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(255,255,255,0.15)',
     ...shadows.lg,
   },
+  primaryButtonMedium: {
+    height: 48,
+    borderRadius: 24,
+  },
+  buttonMedium: {
+    height: 48,
+  },
   primaryButtonCompact: {
     height: 40,
     borderRadius: theme.borderRadius.control,

package/src/components/GlassFooter.tsx

@@ -103,7 +103,7 @@ const styles = StyleSheet.create({
     height: GLASS_FOOTER_FADE,
   },
   scrim: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'rgba(250,249,246,0.72)',
   },
   content: {

package/src/components/GlassInput.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, memo } from 'react';
 import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import type { NativeSyntheticEvent, StyleProp, TextInputContentSizeChangeEventData, ViewStyle } from 'react-native';
+import type { StyleProp, TextInputContentSizeChangeEvent, ViewStyle } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 import { colors } from '../theme/colors';
@@ -94,7 +94,7 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   const [contentHeight, setContentHeight] = useState(0);
   const isAutoGrow = multiline && autoGrow;
 
-  const handleContentSizeChange = useCallback((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+  const handleContentSizeChange = useCallback((e: TextInputContentSizeChangeEvent) => {
     setContentHeight(e.nativeEvent.contentSize.height);
   }, []);
 

package/src/components/WheelPicker.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ComponentRef } from 'react';
 import {
   ScrollView,
   View,
@@ -59,7 +60,7 @@ export function WheelPicker({
   loop = false,
 }: WheelPickerProps) {
   const { colors } = useTheme();
-  const scrollRef = useRef<ScrollView>(null);
+  const scrollRef = useRef<ComponentRef<typeof ScrollView>>(null);
   const containerHeight = itemHeight * visibleCount;
   const padding = (containerHeight - itemHeight) / 2;
   const lastIndexRef = useRef<number>(-1);