@beyondcorp/beyond-ui-native 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.js +130 -113
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +130 -113
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/accordion/accordion.tsx +5 -5
  7. package/src/components/bottom-sheet/bottom-sheet.tsx +4 -4
  8. package/src/components/data-table/data-table.tsx +12 -13
  9. package/src/components/select/select.tsx +30 -28
  10. package/src/providers/BeyondUIProvider.tsx +23 -4
  11. package/src/templates/auth/ForgotPasswordTemplate.tsx +4 -4
  12. package/src/templates/auth/SignInTemplate.tsx +9 -9
  13. package/src/templates/auth/SignUpTemplate.tsx +7 -7
  14. package/src/templates/dashboard/DashboardTemplate.tsx +13 -14
  15. package/src/templates/settings/SettingsTemplate.tsx +25 -25
package/src/templates/dashboard/DashboardTemplate.tsx CHANGED
@@ -69,22 +69,22 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
69
69
  <ScrollView
70
70
  {...props}
71
71
  style={[{ flex: 1 }, (props as any).style]}
72
- className={cn("flex-1 bg-background", className)}
72
+ className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
73
73
  contentContainerStyle={{ paddingBottom: 40 }}
74
74
  showsVerticalScrollIndicator={false}
75
75
  >
76
76
  {/* Top Greeting Header */}
77
- <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-border/40">
77
+ <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-neutral-200 dark:border-neutral-800">
78
78
  <View className="flex-row items-center gap-3">
79
79
  <Avatar size="lg">
80
80
  {userAvatarUrl && <AvatarImage source={{ uri: userAvatarUrl }} />}
81
81
  <AvatarFallback text={userName.slice(0, 2).toUpperCase()} />
82
82
  </Avatar>
83
83
  <View>
84
- <Text className="text-xs text-muted font-medium uppercase tracking-wider">
84
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wider">
85
85
  {userRole}
86
86
  </Text>
87
- <Heading level={3} className="text-xl font-bold text-foreground">
87
+ <Heading level={3} className="text-xl font-bold text-neutral-900 dark:text-neutral-50">
88
88
  Hello, {userName} 👋
89
89
  </Heading>
90
90
  </View>
@@ -93,9 +93,9 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
93
93
  {onNotificationPress && (
94
94
  <Pressable
95
95
  onPress={onNotificationPress}
96
- className="w-10 h-10 rounded-full border border-border bg-card items-center justify-center relative active:opacity-70"
96
+ className="w-10 h-10 rounded-full border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 items-center justify-center relative active:opacity-70"
97
97
  >
98
- <Text className="text-base text-foreground">🔔</Text>
98
+ <Text className="text-base text-neutral-900 dark:text-neutral-100">🔔</Text>
99
99
  {unreadNotificationsCount > 0 && (
100
100
  <View className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-danger items-center justify-center">
101
101
  <Text className="text-[10px] font-bold text-white">
@@ -111,7 +111,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
111
111
  {/* Quick Actions */}
112
112
  {quickActions && quickActions.length > 0 && (
113
113
  <View className="gap-2">
114
- <Text className="text-xs font-bold text-muted uppercase tracking-wider">
114
+ <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
115
115
  Quick Actions
116
116
  </Text>
117
117
  <ScrollView
@@ -126,7 +126,6 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
126
126
  variant="outline"
127
127
  size="sm"
128
128
  onPress={action.onPress}
129
- className="bg-card shadow-sm"
130
129
  >
131
130
  {action.icon ? `${action.icon} ${action.label}` : action.label}
132
131
  </Button>
@@ -138,7 +137,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
138
137
 
139
138
  {/* Metrics Grid */}
140
139
  <View className="gap-3">
141
- <Text className="text-xs font-bold text-muted uppercase tracking-wider">
140
+ <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
142
141
  Overview Performance
143
142
  </Text>
144
143
  <View className="gap-3">
@@ -155,7 +154,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
155
154
  <CardTitle className="text-base font-bold">Recent Activity</CardTitle>
156
155
  {onViewAllActivities && (
157
156
  <Pressable onPress={onViewAllActivities}>
158
- <Text className="text-xs font-semibold text-primary">View all</Text>
157
+ <Text className="text-xs font-semibold text-primary-600 dark:text-primary-400">View all</Text>
159
158
  </Pressable>
160
159
  )}
161
160
  </CardHeader>
@@ -163,7 +162,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
163
162
  {recentActivities.map((act) => (
164
163
  <View
165
164
  key={act.id}
166
- className="flex-row items-center justify-between py-2 border-b border-border/40 last:border-b-0"
165
+ className="flex-row items-center justify-between py-2 border-b border-neutral-200 dark:border-neutral-800 last:border-b-0"
167
166
  >
168
167
  <View className="flex-row items-center gap-3 flex-1 pr-2">
169
168
  <Avatar size="sm">
@@ -173,10 +172,10 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
173
172
  />
174
173
  </Avatar>
175
174
  <View className="flex-1">
176
- <Text className="text-sm font-semibold text-foreground" numberOfLines={1}>
175
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100" numberOfLines={1}>
177
176
  {act.title}
178
177
  </Text>
179
- <Text className="text-xs text-muted" numberOfLines={1}>
178
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400" numberOfLines={1}>
180
179
  {act.subtitle} • {act.timestamp}
181
180
  </Text>
182
181
  </View>
@@ -184,7 +183,7 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
184
183
 
185
184
  <View className="items-end gap-1">
186
185
  {act.amount && (
187
- <Text className="text-sm font-bold text-foreground">
186
+ <Text className="text-sm font-bold text-neutral-900 dark:text-neutral-100">
188
187
  {act.amount}
189
188
  </Text>
190
189
  )}
package/src/templates/settings/SettingsTemplate.tsx CHANGED
@@ -62,12 +62,12 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
62
62
  <ScrollView
63
63
  {...props}
64
64
  style={[{ flex: 1 }, (props as any).style]}
65
- className={cn("flex-1 bg-background", className)}
65
+ className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
66
66
  contentContainerStyle={{ paddingBottom: 40 }}
67
67
  showsVerticalScrollIndicator={false}
68
68
  >
69
69
  <View className="px-6 pt-6 gap-6">
70
- <Heading level={2} className="text-2xl font-bold text-foreground">
70
+ <Heading level={2} className="text-2xl font-bold text-neutral-900 dark:text-neutral-50">
71
71
  Settings & Profile
72
72
  </Heading>
73
73
 
@@ -79,14 +79,14 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
79
79
  </Avatar>
80
80
  <View className="flex-1">
81
81
  <View className="flex-row items-center gap-2">
82
- <Text className="text-base font-bold text-foreground">{user.name}</Text>
82
+ <Text className="text-base font-bold text-neutral-900 dark:text-neutral-100">{user.name}</Text>
83
83
  {user.plan && (
84
84
  <Badge variant="primary" size="sm">
85
85
  {user.plan}
86
86
  </Badge>
87
87
  )}
88
88
  </View>
89
- <Text className="text-xs text-muted">{user.email}</Text>
89
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400">{user.email}</Text>
90
90
  </View>
91
91
  {onEditProfile && (
92
92
  <Button variant="outline" size="sm" onPress={onEditProfile}>
@@ -97,16 +97,16 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
97
97
 
98
98
  {/* Preferences Section */}
99
99
  <View className="gap-2">
100
- <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
100
+ <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
101
101
  Preferences
102
102
  </Text>
103
- <Card className="divide-y divide-border/50">
103
+ <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
104
104
  <View className="p-4 flex-row items-center justify-between">
105
105
  <View className="pr-4 flex-1">
106
- <Text className="text-sm font-semibold text-foreground">
106
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
107
107
  Push Notifications
108
108
  </Text>
109
- <Text className="text-xs text-muted">
109
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400">
110
110
  Receive real-time alerts on your mobile device
111
111
  </Text>
112
112
  </View>
@@ -118,10 +118,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
118
118
 
119
119
  <View className="p-4 flex-row items-center justify-between">
120
120
  <View className="pr-4 flex-1">
121
- <Text className="text-sm font-semibold text-foreground">
121
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
122
122
  Email Notifications
123
123
  </Text>
124
- <Text className="text-xs text-muted">
124
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400">
125
125
  Weekly digests and activity summaries
126
126
  </Text>
127
127
  </View>
@@ -133,8 +133,8 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
133
133
 
134
134
  <View className="p-4 flex-row items-center justify-between">
135
135
  <View className="pr-4 flex-1">
136
- <Text className="text-sm font-semibold text-foreground">Dark Theme</Text>
137
- <Text className="text-xs text-muted">
136
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Dark Theme</Text>
137
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400">
138
138
  Enable high contrast dark mode appearance
139
139
  </Text>
140
140
  </View>
@@ -143,10 +143,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
143
143
 
144
144
  <View className="p-4 flex-row items-center justify-between">
145
145
  <View className="pr-4 flex-1">
146
- <Text className="text-sm font-semibold text-foreground">
146
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
147
147
  Biometric Login
148
148
  </Text>
149
- <Text className="text-xs text-muted">
149
+ <Text className="text-xs text-neutral-500 dark:text-neutral-400">
150
150
  Use Face ID or fingerprint to authenticate
151
151
  </Text>
152
152
  </View>
@@ -160,43 +160,43 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
160
160
 
161
161
  {/* Security & Account Links */}
162
162
  <View className="gap-2">
163
- <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
163
+ <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
164
164
  Account & Security
165
165
  </Text>
166
- <Card className="divide-y divide-border/50">
166
+ <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
167
167
  {onChangePassword && (
168
168
  <Pressable
169
169
  onPress={onChangePassword}
170
- className="p-4 flex-row items-center justify-between active:bg-muted/10"
170
+ className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
171
171
  >
172
- <Text className="text-sm font-semibold text-foreground">
172
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
173
173
  Change Password
174
174
  </Text>
175
- <Text className="text-muted text-xs">›</Text>
175
+ <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
176
176
  </Pressable>
177
177
  )}
178
178
 
179
179
  {onViewTerms && (
180
180
  <Pressable
181
181
  onPress={onViewTerms}
182
- className="p-4 flex-row items-center justify-between active:bg-muted/10"
182
+ className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
183
183
  >
184
- <Text className="text-sm font-semibold text-foreground">
184
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
185
185
  Terms of Service
186
186
  </Text>
187
- <Text className="text-muted text-xs">›</Text>
187
+ <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
188
188
  </Pressable>
189
189
  )}
190
190
 
191
191
  {onViewPrivacy && (
192
192
  <Pressable
193
193
  onPress={onViewPrivacy}
194
- className="p-4 flex-row items-center justify-between active:bg-muted/10"
194
+ className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
195
195
  >
196
- <Text className="text-sm font-semibold text-foreground">
196
+ <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
197
197
  Privacy Policy
198
198
  </Text>
199
- <Text className="text-muted text-xs">›</Text>
199
+ <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
200
200
  </Pressable>
201
201
  )}
202
202
  </Card>