@sudobility/building_blocks_rn 0.0.20 → 0.0.22

package/dist/src/components/empty-state/EmptyState.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text, Pressable } from 'react-native';
+import { colors as designColors } from '@sudobility/design';
 import { createThemedStyles } from '../../utils/styles';
 export function EmptyState({ message, buttonLabel, onPress }) {
     const styles = useStyles();
@@ -20,7 +21,7 @@ const useStyles = createThemedStyles(colors => ({
         marginBottom: 16,
     },
     button: {
-        backgroundColor: '#2563eb',
+        backgroundColor: designColors.raw.blue[600],
         borderRadius: 6,
         minHeight: 44,
         paddingHorizontal: 24,
@@ -29,7 +30,7 @@ const useStyles = createThemedStyles(colors => ({
         justifyContent: 'center',
     },
     buttonText: {
-        color: '#ffffff',
+        color: designColors.raw.neutral[0],
         fontSize: 14,
         fontWeight: '500',
     },

package/dist/src/components/error/ErrorBoundary.js

@@ -16,6 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { colors } from '@sudobility/design';
 export class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
@@ -47,29 +48,29 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center',
         padding: 24,
-        backgroundColor: '#f9fafb',
+        backgroundColor: colors.raw.neutral[50],
     },
     title: {
         fontSize: 24,
         fontWeight: '700',
-        color: '#111827',
+        color: colors.raw.neutral[900],
         marginBottom: 8,
     },
     message: {
         fontSize: 16,
-        color: '#4b5563',
+        color: colors.raw.neutral[600],
         textAlign: 'center',
         marginBottom: 12,
     },
     errorDetail: {
         fontSize: 13,
-        color: '#9ca3af',
+        color: colors.raw.neutral[400],
         textAlign: 'center',
         marginBottom: 24,
         paddingHorizontal: 16,
     },
     retryButton: {
-        backgroundColor: '#2563eb',
+        backgroundColor: colors.raw.blue[600],
         borderRadius: 8,
         paddingVertical: 12,
         paddingHorizontal: 24,
@@ -78,7 +79,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     retryButtonText: {
-        color: '#ffffff',
+        color: colors.raw.neutral[0],
         fontSize: 16,
         fontWeight: '600',
     },

package/dist/src/components/pages/LoginScreen.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput, Pressable, ActivityIndicator, Image, KeyboardAvoidingView, Platform, } from 'react-native';
+import { colors as designColors } from '@sudobility/design';
 import { createThemedStyles } from '../../utils/styles';
 export function LoginScreen({ appName, logo, onLogin, onSignUp, onGoogleSignIn, onAppleSignIn, showGoogleSignIn = false, showAppleSignIn = false, showSignUp = true, style, }) {
     const styles = useStyles();
@@ -60,7 +61,7 @@ export function LoginScreen({ appName, logo, onLogin, onSignUp, onGoogleSignIn,
     return (_jsx(KeyboardAvoidingView, { style: [styles.container, style], behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(View, { style: styles.card, accessibilityLabel: 'Login form', children: [logo && (_jsx(Image, { source: logo, style: styles.logo, resizeMode: 'contain', accessibilityLabel: `${appName} logo` })), _jsx(Text, { style: styles.title, accessibilityRole: 'header', accessibilityLabel: isSignUp ? `Sign up for ${appName}` : `Sign in to ${appName}`, children: isSignUp ? `Sign up for ${appName}` : `Sign in to ${appName}` }), error && (_jsx(View, { style: styles.errorBox, accessibilityRole: 'alert', accessibilityLabel: `Error: ${error}`, children: _jsx(Text, { style: styles.errorText, children: error }) })), _jsxs(View, { style: styles.form, children: [_jsx(Text, { style: styles.label, accessibilityLabel: 'Email address', children: "Email" }), _jsx(TextInput, { style: styles.input, value: email, onChangeText: setEmail, placeholder: 'you@example.com', autoCapitalize: 'none', autoCorrect: false, keyboardType: 'email-address', textContentType: 'emailAddress', editable: !loading, accessibilityLabel: 'Email address input', accessibilityHint: 'Enter your email address' }), _jsx(Text, { style: styles.label, accessibilityLabel: 'Password', children: "Password" }), _jsx(TextInput, { style: styles.input, value: password, onChangeText: setPassword, placeholder: 'Password', secureTextEntry: true, textContentType: isSignUp ? 'newPassword' : 'password', editable: !loading, onSubmitEditing: handleSubmit, accessibilityLabel: 'Password input', accessibilityHint: 'Enter your password' }), _jsx(Pressable, { style: [
                                 styles.submitButton,
                                 loading && styles.submitButtonDisabled,
-                            ], onPress: handleSubmit, disabled: loading, accessibilityRole: 'button', accessibilityLabel: isSignUp ? 'Sign Up' : 'Sign In', accessibilityState: { disabled: loading, busy: loading }, children: loading ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.submitButtonText, children: isSignUp ? 'Sign Up' : 'Sign In' })) })] }), (showGoogleSignIn || showAppleSignIn) && (_jsxs(View, { style: styles.socialSection, children: [_jsxs(View, { style: styles.divider, children: [_jsx(View, { style: styles.dividerLine }), _jsx(Text, { style: styles.dividerText, children: "or" }), _jsx(View, { style: styles.dividerLine })] }), showGoogleSignIn && onGoogleSignIn && (_jsx(Pressable, { style: styles.socialButton, onPress: () => handleSocialSignIn(onGoogleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Google', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: styles.socialButtonText, children: "Continue with Google" }) })), showAppleSignIn && onAppleSignIn && (_jsx(Pressable, { style: [styles.socialButton, styles.appleButton], onPress: () => handleSocialSignIn(onAppleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Apple', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: [styles.socialButtonText, styles.appleButtonText], children: "Continue with Apple" }) }))] })), showSignUp && onSignUp && (_jsx(Pressable, { style: styles.toggleLink, onPress: () => {
+                            ], onPress: handleSubmit, disabled: loading, accessibilityRole: 'button', accessibilityLabel: isSignUp ? 'Sign Up' : 'Sign In', accessibilityState: { disabled: loading, busy: loading }, children: loading ? (_jsx(ActivityIndicator, { color: designColors.raw.neutral[0], size: 'small' })) : (_jsx(Text, { style: styles.submitButtonText, children: isSignUp ? 'Sign Up' : 'Sign In' })) })] }), (showGoogleSignIn || showAppleSignIn) && (_jsxs(View, { style: styles.socialSection, children: [_jsxs(View, { style: styles.divider, children: [_jsx(View, { style: styles.dividerLine }), _jsx(Text, { style: styles.dividerText, children: "or" }), _jsx(View, { style: styles.dividerLine })] }), showGoogleSignIn && onGoogleSignIn && (_jsx(Pressable, { style: styles.socialButton, onPress: () => handleSocialSignIn(onGoogleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Google', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: styles.socialButtonText, children: "Continue with Google" }) })), showAppleSignIn && onAppleSignIn && (_jsx(Pressable, { style: [styles.socialButton, styles.appleButton], onPress: () => handleSocialSignIn(onAppleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Apple', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: [styles.socialButtonText, styles.appleButtonText], children: "Continue with Apple" }) }))] })), showSignUp && onSignUp && (_jsx(Pressable, { style: styles.toggleLink, onPress: () => {
                         setIsSignUp(!isSignUp);
                         setError(null);
                     }, accessibilityRole: 'button', accessibilityLabel: isSignUp
@@ -144,7 +145,7 @@ const useStyles = createThemedStyles(colors => ({
         opacity: 0.6,
     },
     submitButtonText: {
-        color: '#ffffff',
+        color: designColors.raw.neutral[0],
         fontSize: 16,
         fontWeight: '600',
     },

package/dist/src/components/toast/ToastProvider.js

@@ -25,6 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import { View, Text, Animated, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { colors as designColors } from '@sudobility/design';
 import { useTheme } from '../../theme/ThemeContext';
 import { createThemedStyles } from '../../utils/styles';
 const ToastContext = createContext(null);
@@ -125,7 +126,7 @@ const useToastStyles = createThemedStyles(_colors => ({
         justifyContent: 'center',
     },
     toastText: {
-        color: '#ffffff',
+        color: designColors.raw.neutral[0],
         fontSize: 15,
         fontWeight: '500',
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,7 +43,8 @@
     "@react-navigation/native-stack": ">=7.0.0",
     "i18next": "^23.0.0 || ^24.0.0 || ^25.0.0",
     "react-i18next": "^14.0.0 || ^15.0.0 || ^16.0.0",
-    "@react-native-async-storage/async-storage": ">=1.0.0"
+    "@react-native-async-storage/async-storage": ">=1.0.0",
+    "@sudobility/design": "^1.1.27"
   },
   "peerDependenciesMeta": {
     "firebase": {