@oxyhq/services 25.0.0 → 26.0.0

package/src/ui/screens/ChangeAvatarScreen.tsx

@@ -39,7 +39,7 @@ import {
 } from '@oxyhq/bloom/admonition';
 import { surfaces as bloomSurfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { getNormalizedUserHandle, logger } from '@oxyhq/core';
 import type { FileMetadata } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, View } from 'react-native';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';

package/src/ui/screens/CreateAccountScreen.tsx

@@ -3,7 +3,7 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
 import type { AccountKind, CreateAccountInput, OrganizationCategory } from '@oxyhq/core';
-import { ORGANIZATION_CATEGORIES } from '@oxyhq/core';
+import { DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName, MAX_DISPLAY_NAME_LENGTH, ORGANIZATION_CATEGORIES } from '@oxyhq/core';
 import type { BaseScreenProps } from '../types/navigation';
 import { useI18n } from '../hooks/useI18n';
 import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
@@ -13,7 +13,7 @@ import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useOxy } from '../context/OxyContext';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 
 type UsernameStatus = 'idle' | 'checking' | 'available' | 'taken' | 'invalid';
 
@@ -23,7 +23,7 @@ type CreatableAccountKind = Exclude<AccountKind, 'personal'>;
 const USERNAME_REGEX = /^[a-zA-Z0-9_-]{3,30}$/;
 const DEBOUNCE_MS = 400;
 const USERNAME_MAX = 30;
-const DISPLAY_NAME_MAX = 50;
+const DISPLAY_NAME_MAX = MAX_DISPLAY_NAME_LENGTH;
 const BIO_MAX = 160;
 
 interface KindOption {
@@ -112,6 +112,7 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
   const [organizationCategory, setOrganizationCategory] = useState<OrganizationCategory>('agency');
   const [username, setUsername] = useState('');
   const [displayName, setDisplayName] = useState('');
+  const [displayNameError, setDisplayNameError] = useState('');
   const [bio, setBio] = useState('');
   const [usernameStatus, setUsernameStatus] = useState<UsernameStatus>('idle');
   const [usernameMessage, setUsernameMessage] = useState('');
@@ -180,7 +181,28 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
     checkUsername(cleaned);
   }, [checkUsername]);
 
-  const canCreate = usernameStatus === 'available' && displayName.trim().length > 0 && !isCreating;
+  const handleDisplayNameChange = useCallback((value: string) => {
+    setDisplayName(value);
+    const trimmed = value.trim();
+    if (!trimmed) {
+      setDisplayNameError('');
+      return;
+    }
+    const nameParts = trimmed.split(/\s+/);
+    const firstName = nameParts[0] || '';
+    const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : '';
+    const invalidPart = [firstName, lastName].find((part) => part && !isValidDisplayName(part));
+    setDisplayNameError(
+      invalidPart
+        ? (t('accounts.create.displayName.invalidChars') || DISPLAY_NAME_INVALID_MESSAGE)
+        : '',
+    );
+  }, [t]);
+
+  const canCreate = usernameStatus === 'available'
+    && displayName.trim().length > 0
+    && !displayNameError
+    && !isCreating;
 
   const handleCreate = useCallback(async () => {
     if (!canCreate) return;
@@ -320,15 +342,23 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({
           </View>
 
           {/* Display Name */}
-          <TextField>
-            <TextFieldInput
-              floatingLabel
-              label={t('accounts.create.displayName.label') || 'Display name'}
-              value={displayName}
-              onChangeText={setDisplayName}
-              maxLength={DISPLAY_NAME_MAX}
-            />
-          </TextField>
+          <View className="gap-space-4">
+            <TextField isInvalid={Boolean(displayNameError)}>
+              <TextFieldInput
+                floatingLabel
+                label={t('accounts.create.displayName.label') || 'Display name'}
+                value={displayName}
+                onChangeText={handleDisplayNameChange}
+                isInvalid={Boolean(displayNameError)}
+                maxLength={DISPLAY_NAME_MAX}
+              />
+            </TextField>
+            {displayNameError ? (
+              <Text className="text-caption font-caption text-negative px-space-4">
+                {displayNameError}
+              </Text>
+            ) : null}
+          </View>
 
           {/* Bio */}
           <View className="gap-space-4">

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -19,8 +19,8 @@ import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
 import { SurfaceHeaderAction } from '../components/SurfaceHeaderAction';
 import { useOxy } from '../context/OxyContext';
 import { useProfileEditing } from '../hooks/useProfileEditing';
-import { toast } from '@oxyhq/bloom';
-import { EMAIL_REGEX, isValidDisplayName } from '@oxyhq/core';
+import { toast } from '@oxyhq/bloom/toast';
+import { EMAIL_REGEX, DISPLAY_NAME_INVALID_MESSAGE, isValidDisplayName } from '@oxyhq/core';
 import { getLinkTitle, getLinkDescription, linksToListItems } from './linkFormat';
 
 /**
@@ -202,7 +202,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                                 isValidDisplayName(value)
                                     ? undefined
                                     : (t('editProfile.items.displayName.invalidChars')
-                                        || 'Use letters and spaces only'),
+                                        || DISPLAY_NAME_INVALID_MESSAGE),
                         },
                         {
                             key: 'lastName',
@@ -212,7 +212,7 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                                 isValidDisplayName(value)
                                     ? undefined
                                     : (t('editProfile.items.displayName.invalidChars')
-                                        || 'Use letters and spaces only'),
+                                        || DISPLAY_NAME_INVALID_MESSAGE),
                         },
                     ],
                 };

package/src/ui/screens/FAQScreen.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { View, ScrollView, StyleSheet } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Search } from '@oxyhq/bloom/search';
 import { Button } from '@oxyhq/bloom/button';

package/src/ui/screens/FeedbackScreen.tsx

@@ -1,6 +1,5 @@
 import Ionicons from "@expo/vector-icons/Ionicons";
 import type MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
-import { toast } from "@oxyhq/bloom";
 import { Button } from "@oxyhq/bloom/button";
 import {
 	SettingsListGroup,
@@ -9,6 +8,7 @@ import {
 import { Switch } from "@oxyhq/bloom/switch";
 import { TextField, TextFieldInput } from "@oxyhq/bloom/text-field";
 import { useTheme } from "@oxyhq/bloom/theme";
+import { toast } from "@oxyhq/bloom/toast";
 import { H2, Text } from "@oxyhq/bloom/typography";
 import { normalizeTheme } from "@oxyhq/core";
 import { packageInfo } from "@oxyhq/core";

package/src/ui/screens/FileManagementScreen.tsx

@@ -14,7 +14,7 @@ import {
 import { useQueryClient } from '@tanstack/react-query';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import Ionicons from '@expo/vector-icons/Ionicons';

package/src/ui/screens/HelpSupportScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { View, Linking } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsIcon } from '../components/SettingsIcon';

package/src/ui/screens/HistoryViewScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
 import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { Loading } from '@oxyhq/bloom/loading';
 import { Text } from '@oxyhq/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';

package/src/ui/screens/LanguageSelectorScreen.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { Text } from '@oxyhq/bloom/typography';
 import { Search } from '@oxyhq/bloom/search';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';

package/src/ui/screens/LegalDocumentsScreen.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import { View, Linking } from 'react-native';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { logger } from '@oxyhq/core';

package/src/ui/screens/ManageAccountScreen.tsx

@@ -7,7 +7,7 @@ import {
     Platform,
 } from 'react-native';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';

package/src/ui/screens/PremiumSubscriptionScreen.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { useState, useEffect, useCallback } from 'react';
 import { View, ScrollView, ActivityIndicator } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { surfaces } from '@oxyhq/bloom/surfaces';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';

package/src/ui/screens/PrivacySettingsScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 import { Switch } from '@oxyhq/bloom/switch';
 import { Button } from '@oxyhq/bloom/button';

package/src/ui/screens/SavesCollectionsScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { View } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import {
     SegmentedControl,
     SegmentedControlItem,

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -4,7 +4,7 @@ import { View, StyleSheet, Platform, Animated } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
 import { H1, Text } from '@oxyhq/bloom/typography';

package/src/ui/screens/fileManagement/hooks/useFileUploadState.ts

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import type { AssetUploadInput, FileMetadata } from '@oxyhq/core';
 import type { useUploadFile } from '../../../hooks/mutations/useAccountMutations';
 import { queryKeys } from '../../../hooks/queries/queryKeys';