@oxy.so/services 3.1.0 → 4.0.1

package/src/ui/screens/UserListScreen.tsx

@@ -5,14 +5,13 @@ import {
   StyleSheet,
   ActivityIndicator,
   FlatList,
-  TouchableOpacity,
   RefreshControl,
 } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxy.so/bloom/theme';
 import { H6, Text } from '@oxy.so/bloom/typography';
 import { Button } from '@oxy.so/bloom/button';
-import { Avatar } from '@oxy.so/bloom/avatar';
+import { ContactRow } from '@oxy.so/bloom/chat-people';
 import FollowButton from '../components/FollowButton';
 import Ionicons from '../icons/Ionicons';
 import { useI18n } from '../hooks/useI18n';
@@ -36,7 +35,6 @@ interface UserListScreenProps extends BaseScreenProps {
 }
 
 const PAGE_SIZE = 20;
-const AVATAR_SIZE = 48;
 const EMPTY_ICON_SIZE = 64;
 const ERROR_ICON_SIZE = 48;
 
@@ -161,42 +159,21 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
       const handle = getAccountFallbackHandle(item);
 
       return (
-        <TouchableOpacity
-          style={styles.userItem}
-          className="px-screen-margin py-space-12 gap-space-12"
-          onPress={() => handleUserPress(item)}
-          activeOpacity={0.7}
-          accessibilityRole="button"
-          accessibilityLabel={displayName}
-        >
-          <Avatar
-            source={
-              item.avatar
-                ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb')
-                : undefined
-            }
-            name={displayName}
-            size={AVATAR_SIZE}
-          />
-          <View style={styles.userInfo}>
-            <Text className="text-text font-medium text-base" numberOfLines={1}>
-              {displayName}
-            </Text>
-            {handle ? (
-              <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
+        <View className="px-screen-margin flex-row items-center gap-space-12">
+          <ContactRow id={itemUserId || displayName} name={displayName}
+            subtitle={handle ? (item.username ? `@${handle}` : handle) : undefined}
+            avatar={item.avatar ? oxyServices.getFileDownloadUrl(item.avatar, 'thumb') : undefined}
+            horizontalInset={0} style={{ flex: 1 }}
+            onPress={() => handleUserPress(item)}
+            identitySlot={<View style={styles.userInfo}>
+              <Text variant="body-medium" numberOfLines={1}>{displayName}</Text>
+              {handle ? <Text className="text-text-secondary text-sm mt-space-2" numberOfLines={1}>
                 {item.username ? `@${handle}` : handle}
-              </Text>
-            ) : null}
-            {description ? (
-              <Text className="text-text-secondary text-sm mt-space-4" numberOfLines={2}>
-                {description}
-              </Text>
-            ) : null}
-          </View>
-          {!isCurrentUser && itemUserId ? (
-            <FollowButton userId={itemUserId} size="small" />
-          ) : null}
-        </TouchableOpacity>
+              </Text> : null}
+              {description ? <Text className="text-text-secondary text-sm mt-space-4" numberOfLines={2}>{description}</Text> : null}
+            </View>} />
+          {!isCurrentUser && itemUserId ? <FollowButton userId={itemUserId} size="small" /> : null}
+        </View>
       );
     },
     [handleUserPress, currentUserId, oxyServices]
@@ -257,7 +234,7 @@ const UserListScreen: React.FC<UserListScreenProps> = ({
         <View style={styles.center} className="px-space-32 gap-space-16">
           <Ionicons name="alert-circle" size={ERROR_ICON_SIZE} color={bloomTheme.colors.error} />
           <Text className="text-text-secondary text-base text-center">{error}</Text>
-          <Button variant="primary" onPress={() => fetchUsers(0)}>
+          <Button appearance="solid" tone="accent" onPress={() => fetchUsers(0)}>
             {t('common.retry') || 'Retry'}
           </Button>
         </View>
@@ -304,17 +281,13 @@ const styles = StyleSheet.create({
   listContent: {
     flexGrow: 1,
   },
-  userItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
   userInfo: {
     flex: 1,
   },
   // Inset the hairline separator to align with the start of the user's text
   // content (avatar width + screen margin + gap).
   separator: {
-    marginLeft: 76,
+    marginLeft: 72,
   },
   emptyContainer: {
     flex: 1,

package/src/ui/screens/WelcomeNewUserScreen.tsx

@@ -182,10 +182,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (currentStep === totalSteps - 1) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={finish} size="small">
+                    <Button appearance="solid" tone="accent" onPress={finish} size="small">
                         {t('welcomeNew.actions.enter') || 'Enter'}
                     </Button>
                 </View>
@@ -195,11 +195,11 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
                     {avatarStepIndex > 0 && (
-                        <Button variant="secondary" onPress={skipToAvatar} size="small">
+                        <Button appearance="subtle" tone="neutral" onPress={skipToAvatar} size="small">
                             {t('welcomeNew.actions.skip') || 'Skip'}
                         </Button>
                     )}
-                    <Button variant="primary" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                         {t('welcomeNew.actions.next') || 'Next'}
                     </Button>
                 </View>
@@ -208,10 +208,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (nameStepIndex >= 0 && currentStep === nameStepIndex) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
+                    <Button appearance="solid" tone="accent" onPress={submitName} size="small" disabled={!firstName.trim() || savingName} loading={savingName}>
                         {t('welcomeNew.actions.continue') || 'Continue'}
                     </Button>
                 </View>
@@ -220,10 +220,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         if (step.showAvatar) {
             return (
                 <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                    <Button variant="secondary" onPress={prevStep} size="small">
+                    <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                         {t('welcomeNew.actions.back') || 'Back'}
                     </Button>
-                    <Button variant="primary" onPress={nextStep} size="small">
+                    <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                         {avatarUri ? (t('welcomeNew.actions.continue') || 'Continue') : (t('welcomeNew.actions.skip') || 'Skip')}
                     </Button>
                 </View>
@@ -231,10 +231,10 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
         }
         return (
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button variant="secondary" onPress={prevStep} size="small">
+                <Button appearance="subtle" tone="neutral" onPress={prevStep} size="small">
                     {t('welcomeNew.actions.back') || 'Back'}
                 </Button>
-                <Button variant="primary" onPress={nextStep} size="small">
+                <Button appearance="solid" tone="accent" onPress={nextStep} size="small">
                     {t('welcomeNew.actions.next') || 'Next'}
                 </Button>
             </View>
@@ -296,7 +296,7 @@ const WelcomeNewUserScreen: React.FC<BaseScreenProps & { newUser?: User }> = ({
                                 placeholderColor={`${colors.primary}20`}
                                 style={styles.avatar}
                             />
-                            <Button variant="primary" size="small" onPress={openAvatarPicker}>
+                            <Button appearance="solid" tone="accent" size="small" onPress={openAvatarPicker}>
                                 {avatarUri ? (t('welcomeNew.avatar.change') || 'Change Avatar') : (t('welcomeNew.avatar.add') || 'Add Avatar')}
                             </Button>
                         </View>

package/src/ui/screens/fileManagement/FileLibraryError.tsx

@@ -1,5 +1,7 @@
 import type React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 
 export interface FileLibraryErrorProps {
@@ -11,8 +13,6 @@ export interface FileLibraryErrorProps {
     iconColor: string;
     titleColor: string;
     descriptionColor: string;
-    /** Retry button background (button label/icon are always white). */
-    buttonColor: string;
 }
 
 /**
@@ -30,7 +30,6 @@ const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
     iconColor,
     titleColor,
     descriptionColor,
-    buttonColor,
 }) => (
     <View className="items-center py-[40px] px-[24px]">
         <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
@@ -40,16 +39,9 @@ const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
         <Text className="text-[16px] text-center leading-[24px] mb-[32px]" style={{ color: descriptionColor }}>
             {description}
         </Text>
-        <TouchableOpacity
-            className="flex-row items-center px-[24px] py-[12px] rounded-[24px] gap-[8px]"
-            style={{ backgroundColor: buttonColor }}
-            onPress={onRetry}
-            accessibilityRole="button"
-            accessibilityLabel={retryLabel}
-        >
-            <Ionicons name="refresh" size={20} color="#FFFFFF" />
-            <Text className="text-white text-[16px] font-semibold">{retryLabel}</Text>
-        </TouchableOpacity>
+        <Button onPress={onRetry} accessibilityLabel={retryLabel}>
+            {retryLabel}
+        </Button>
     </View>
 );
 

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -1,12 +1,7 @@
 import type React from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    ScrollView,
-    RefreshControl,
-    ActivityIndicator,
-} from 'react-native';
+import { View, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 import type { FileMetadata } from '@oxy.so/core';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
@@ -88,14 +83,7 @@ const FileListSection: React.FC<FileListSectionProps> = ({
                     <Text className="text-[16px] text-center leading-[24px] mb-space-32" style={{ color: colors.textSecondary }}>
                         {t('fileManagement.noResults.description', { query: searchQuery })}
                     </Text>
-                    <TouchableOpacity
-                        className="flex-row items-center px-space-24 py-space-12 rounded-[24px] gap-space-8"
-                        style={{ backgroundColor: colors.primary }}
-                        onPress={onClearSearch}
-                    >
-                        <Ionicons name="refresh" size={20} color="#FFFFFF" />
-                        <Text className="text-white text-[16px] font-semibold">{t('fileManagement.clearSearch')}</Text>
-                    </TouchableOpacity>
+                    <Button onPress={onClearSearch}>{t('fileManagement.clearSearch')}</Button>
                 </View>
             ) : filteredFiles.length === 0 ? renderEmptyState() : (
                 <>

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -1,16 +1,6 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    ActivityIndicator,
-    RefreshControl,
-    FlatList,
-    Platform,
-    Animated,
-    useWindowDimensions,
-    type LayoutChangeEvent,
-} from 'react-native';
+import { View, TouchableOpacity, ActivityIndicator, RefreshControl, FlatList, Platform, Animated, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { Image as ExpoImage } from 'expo-image';
 import Ionicons from '../../icons/Ionicons';
 import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
@@ -535,7 +525,6 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                             iconColor="#FF6B6B"
                             titleColor="#FFFFFF"
                             descriptionColor="rgba(255,255,255,0.7)"
-                            buttonColor={primaryColor}
                         />
                     </View>
                 ) : isEmpty && loading ? (

package/src/ui/screens/fileManagement/UploadBar.tsx

@@ -1,69 +1,30 @@
 import type React from 'react';
-import { View, Text, ActivityIndicator, StyleSheet, Platform, type ViewStyle } from 'react-native';
-import Ionicons from '../../icons/Ionicons';
+import { View } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
+import { Card } from '@oxy.so/bloom/card';
+import { Loading } from '@oxy.so/bloom/loading';
+import { Meter } from '@oxy.so/bloom/stat-bar';
 
 export interface UploadBarProps {
-    /** Aggregate upload progress, or null when indeterminate. */
     uploadProgress: { current: number; total: number } | null;
-    /** Bloom dark-mode flag (drives banner + track colors). */
-    isDark: boolean;
-    /** Theme colors used by the banner. */
-    colors: { primary: string; text: string; border: string };
     t: (key: string, vars?: Record<string, string | number>) => string;
 }
 
-// The banner drop-shadow has no Bloom/Tailwind token equivalent, so it stays an
-// inline style. `boxShadow` on web (RN-Web deprecated the `shadow*` props);
-// RN `shadow*`/`elevation` on native.
-const shadowStyle = StyleSheet.create({
-    banner: Platform.select({
-        web: { boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)' },
-        default: {
-            shadowColor: '#000',
-            shadowOpacity: 0.1,
-            shadowRadius: 6,
-            shadowOffset: { width: 0, height: 2 },
-            elevation: 2,
-        },
-    }) as ViewStyle,
-});
-
-/**
- * The non-blocking "Uploading…" banner overlay shown at the bottom of the file
- * manager while uploads are in flight. Purely presentational — the orchestrator
- * gates rendering on `!selectMode && uploading`.
- */
-const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, isDark, colors, t }) => (
-    <View
-        className="absolute top-[72px] left-0 right-0 items-center z-50"
-        style={{ pointerEvents: 'none' }}
-    >
-        <View
-            className="flex-row items-center px-3.5 py-2.5 rounded-[24px] gap-2.5 border min-w-[200px]"
-            style={[shadowStyle.banner, { backgroundColor: isDark ? '#222831EE' : '#FFFFFFEE', borderColor: colors.border }]}
-        >
-            <Ionicons name="cloud-upload" size={18} color={colors.primary} />
+/** Upload state is app-owned; surface, spinner and determinate meter are Bloom. */
+const UploadBar: React.FC<UploadBarProps> = ({ uploadProgress, t }) => (
+    <View pointerEvents="none" className="absolute top-[72px] left-0 right-0 items-center z-50">
+        <Card appearance="solid" elevation="s" radius="radius-max" className="flex-row items-center px-3.5 py-2.5 gap-2.5 min-w-[200px]">
             <View className="flex-1 gap-1.5">
-                <Text className="text-[13px] font-medium" style={{ color: colors.text }}>
-                    {t('fileManagement.uploading')}{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '...'}
+                <Text variant="caption-1-medium">
+                    {t('fileManagement.uploading')}{uploadProgress ? ` ${uploadProgress.current}/${uploadProgress.total}` : '…'}
                 </Text>
-                {uploadProgress && uploadProgress.total > 0 && (
-                    <View
-                        className="h-[3px] rounded-[2px] overflow-hidden"
-                        style={{ backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)' }}
-                    >
-                        <View
-                            className="h-full rounded-[2px]"
-                            style={{
-                                width: `${(uploadProgress.current / uploadProgress.total) * 100}%`,
-                                backgroundColor: colors.primary,
-                            }}
-                        />
-                    </View>
-                )}
+                {uploadProgress && uploadProgress.total > 0 ? (
+                    <Meter value={uploadProgress.current} max={uploadProgress.total} height={3}
+                        accessibilityLabel={t('fileManagement.uploading')} />
+                ) : null}
             </View>
-            <ActivityIndicator size="small" color={colors.primary} />
-        </View>
+            <Loading size="small" />
+        </Card>
     </View>
 );
 

package/src/ui/screens/trust/TrustLeaderboardScreen.tsx

@@ -146,7 +146,7 @@ const TrustLeaderboardScreen: React.FC<BaseScreenProps> = ({ navigate }) => {
                     <Text className="text-text-secondary text-base text-center">
                         {error || t('trust.leaderboard.error') || 'Failed to load leaderboard'}
                     </Text>
-                    <Button variant="primary" onPress={loadLeaderboard}>
+                    <Button appearance="solid" tone="accent" onPress={loadLeaderboard}>
                         {t('common.retry') || 'Retry'}
                     </Button>
                 </View>

package/src/ui/screens/trust/TrustRulesScreen.tsx

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { Text } from '@oxy.so/bloom/typography';
 import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Chip } from '@oxy.so/bloom/chip';
 import { useTheme } from '@oxy.so/bloom/theme';

package/lib/commonjs/ui/components/fileManagement/AnimatedButton.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AnimatedButton = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _MaterialCommunityIcons = _interopRequireDefault(require("../../icons/MaterialCommunityIcons.js"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Animated button component for smooth selection transitions
- * Used in file management views for view mode toggles
- */
-const AnimatedButton = ({
-  isSelected,
-  onPress,
-  icon,
-  primaryColor,
-  textColor,
-  style,
-  accessibilityLabel
-}) => {
-  const animatedValue = (0, _react.useRef)(new _reactNative.Animated.Value(isSelected ? 1 : 0)).current;
-  (0, _react.useEffect)(() => {
-    _reactNative.Animated.timing(animatedValue, {
-      toValue: isSelected ? 1 : 0,
-      duration: 200,
-      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
-      useNativeDriver: false
-    }).start();
-  }, [isSelected, animatedValue]);
-  const backgroundColor = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', primaryColor]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    onPress: onPress,
-    activeOpacity: 0.7,
-    accessibilityRole: "button",
-    accessibilityLabel: accessibilityLabel,
-    accessibilityState: {
-      selected: isSelected
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: [style, {
-        backgroundColor
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MaterialCommunityIcons.default, {
-          name: icon,
-          size: 16,
-          color: isSelected ? '#FFFFFF' : textColor
-        })
-      })
-    })
-  });
-};
-exports.AnimatedButton = AnimatedButton;
-//# sourceMappingURL=AnimatedButton.js.map

package/lib/commonjs/ui/components/fileManagement/AnimatedButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_MaterialCommunityIcons","_interopRequireDefault","_jsxRuntime","e","__esModule","default","AnimatedButton","isSelected","onPress","icon","primaryColor","textColor","style","accessibilityLabel","animatedValue","useRef","Animated","Value","current","useEffect","timing","toValue","duration","easing","Easing","out","ease","useNativeDriver","start","backgroundColor","interpolate","inputRange","outputRange","jsx","TouchableOpacity","activeOpacity","accessibilityRole","accessibilityState","selected","children","View","name","size","color","exports"],"sourceRoot":"../../../../../src","sources":["ui/components/fileManagement/AnimatedButton.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAAwE,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAG,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYxE;AACA;AACA;AACA;AACO,MAAMG,cAA6C,GAAGA,CAAC;EAC5DC,UAAU;EACVC,OAAO;EACPC,IAAI;EACJC,YAAY;EACZC,SAAS;EACTC,KAAK;EACLC;AACF,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAG,IAAAC,aAAM,EAAC,IAAIC,qBAAQ,CAACC,KAAK,CAACV,UAAU,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAACW,OAAO;EAE5E,IAAAC,gBAAS,EAAC,MAAM;IACdH,qBAAQ,CAACI,MAAM,CAACN,aAAa,EAAE;MAC7BO,OAAO,EAAEd,UAAU,GAAG,CAAC,GAAG,CAAC;MAC3Be,QAAQ,EAAE,GAAG;MACbC,MAAM,EAAEC,mBAAM,CAACC,GAAG,CAACD,mBAAM,CAACE,IAAI,CAAC;MAC/BC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ,CAAC,EAAE,CAACrB,UAAU,EAAEO,aAAa,CAAC,CAAC;EAE/B,MAAMe,eAAe,GAAGf,aAAa,CAACgB,WAAW,CAAC;IAChDC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAE,CAAC,aAAa,EAAEtB,YAAY;EAC3C,CAAC,CAAC;EAEF,oBACE,IAAAR,WAAA,CAAA+B,GAAA,EAAClC,YAAA,CAAAmC,gBAAgB;IACf1B,OAAO,EAAEA,OAAQ;IACjB2B,aAAa,EAAE,GAAI;IACnBC,iBAAiB,EAAC,QAAQ;IAC1BvB,kBAAkB,EAAEA,kBAAmB;IACvCwB,kBAAkB,EAAE;MAAEC,QAAQ,EAAE/B;IAAW,CAAE;IAAAgC,QAAA,eAE7C,IAAArC,WAAA,CAAA+B,GAAA,EAAClC,YAAA,CAAAiB,QAAQ,CAACwB,IAAI;MAAC5B,KAAK,EAAE,CAACA,KAAK,EAAE;QAAEiB;MAAgB,CAAC,CAAE;MAAAU,QAAA,eACjD,IAAArC,WAAA,CAAA+B,GAAA,EAAClC,YAAA,CAAAiB,QAAQ,CAACwB,IAAI;QAAAD,QAAA,eACZ,IAAArC,WAAA,CAAA+B,GAAA,EAACjC,uBAAA,CAAAK,OAAsB;UACrBoC,IAAI,EAAEhC,IAAoE;UAC1EiC,IAAI,EAAE,EAAG;UACTC,KAAK,EAAEpC,UAAU,GAAG,SAAS,GAAGI;QAAU,CAC3C;MAAC,CACW;IAAC,CACH;EAAC,CACA,CAAC;AAEvB,CAAC;AAACiC,OAAA,CAAAtC,cAAA,GAAAA,cAAA","ignoreList":[]}

package/lib/commonjs/ui/components/internal/PinInput.js

@@ -1,118 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _theme = require("@oxy.so/bloom/theme");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const PinInput = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  onChange,
-  length = 6,
-  disabled,
-  autoFocus,
-  colors
-}, ref) => {
-  const theme = (0, _theme.useTheme)();
-  const inputs = (0, _react.useRef)([]);
-  (0, _react.useImperativeHandle)(ref, () => ({
-    focus: () => {
-      inputs.current[0]?.focus();
-    }
-  }), []);
-  const handleChange = (text, idx) => {
-    if (!/^[0-9]*$/.test(text)) return;
-    let newValue = value.split('');
-    if (text.length > 1) {
-      // Paste or autofill
-      newValue = text.split('').slice(0, length);
-      onChange(newValue.join(''));
-      if (newValue.length < length) {
-        inputs.current[newValue.length]?.focus();
-      }
-      return;
-    }
-    newValue[idx] = text;
-    const joined = newValue.join('').slice(0, length);
-    onChange(joined);
-    if (text && idx < length - 1) {
-      inputs.current[idx + 1]?.focus();
-    }
-  };
-  const handleKeyPress = (e, idx) => {
-    if (e.nativeEvent.key === 'Backspace' && !value[idx] && idx > 0) {
-      inputs.current[idx - 1]?.focus();
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.pinContainer,
-    children: Array.from({
-      length
-    }).map((_, idx) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput
-    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-position PIN cells, order never changes
-    , {
-      ref: ref => {
-        inputs.current[idx] = ref;
-      },
-      style: [styles.pinInput, {
-        borderColor: colors.primary,
-        color: colors.text,
-        backgroundColor: colors.inputBackground || theme.colors.backgroundSecondary
-      }, value[idx] ? {
-        borderWidth: 2
-      } : {
-        borderWidth: 1
-      }],
-      value: value[idx] || '',
-      onChangeText: text => handleChange(text, idx),
-      onKeyPress: e => handleKeyPress(e, idx),
-      keyboardType: _reactNative.Platform.OS === 'ios' ? 'number-pad' : 'numeric',
-      maxLength: 1,
-      editable: !disabled,
-      autoFocus: autoFocus && idx === 0,
-      textAlign: "center",
-      selectionColor: colors.primary,
-      returnKeyType: "done"
-    }, `pin-input-${idx}`))
-  });
-});
-const styles = _reactNative.StyleSheet.create({
-  pinContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: 12,
-    marginBottom: 0,
-    marginTop: 0
-  },
-  pinInput: {
-    width: 44,
-    height: 54,
-    borderRadius: 12,
-    borderWidth: 1,
-    fontSize: 28,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginHorizontal: 2,
-    ..._reactNative.Platform.select({
-      web: {
-        boxShadow: '0 1px 4px rgba(0,0,0,0.04)'
-      },
-      default: {
-        shadowColor: '#000',
-        shadowOpacity: 0.04,
-        shadowOffset: {
-          width: 0,
-          height: 1
-        },
-        shadowRadius: 4,
-        elevation: 1
-      }
-    })
-  }
-});
-var _default = exports.default = PinInput;
-//# sourceMappingURL=PinInput.js.map

package/lib/commonjs/ui/components/internal/PinInput.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_theme","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","PinInput","forwardRef","value","onChange","length","disabled","autoFocus","colors","ref","theme","useTheme","inputs","useRef","useImperativeHandle","focus","current","handleChange","text","idx","test","newValue","split","slice","join","joined","handleKeyPress","nativeEvent","key","jsx","View","style","styles","pinContainer","children","Array","from","map","_","TextInput","pinInput","borderColor","primary","color","backgroundColor","inputBackground","backgroundSecondary","borderWidth","onChangeText","onKeyPress","keyboardType","Platform","OS","maxLength","editable","textAlign","selectionColor","returnKeyType","StyleSheet","create","flexDirection","justifyContent","gap","marginBottom","marginTop","width","height","borderRadius","fontSize","fontWeight","marginHorizontal","select","web","boxShadow","shadowColor","shadowOpacity","shadowOffset","shadowRadius","elevation","_default","exports"],"sourceRoot":"../../../../../src","sources":["ui/components/internal/PinInput.tsx"],"mappings":"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","ignoreList":[]}