@beyondcorp/beyond-ui-native 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyondcorp/beyond-ui-native",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Accessible, NativeWind-first React Native component library for Beyond Softwares",
   "author": "Beyond Corp",
   "license": "MIT",

package/src/components/accordion/accordion.tsx

@@ -148,7 +148,7 @@ export const AccordionItem = React.forwardRef<View, AccordionItemProps>(
       <AccordionItemContext.Provider value={{ value, isOpen }}>
         <View
           ref={ref}
-          className={cn("border-b border-border py-1", className)}
+          className={cn("border-b border-neutral-200 dark:border-neutral-800 py-1", className)}
           {...props}
         >
           {children}
@@ -200,13 +200,13 @@ export const AccordionTrigger = React.forwardRef<View, AccordionTriggerProps>(
       >
         <View className="flex-1 pr-2">
           {typeof children === "string" ? (
-            <Text className="text-base font-medium text-foreground">{children}</Text>
+            <Text className="text-base font-medium text-neutral-900 dark:text-neutral-100">{children}</Text>
           ) : (
             children
           )}
         </View>
         <Animated.View style={{ transform: [{ rotate }] }}>
-          <Text className="text-muted text-base font-semibold">▼</Text>
+          <Text className="text-neutral-500 dark:text-neutral-400 text-base font-semibold">▼</Text>
         </Animated.View>
       </Pressable>
     );
@@ -230,11 +230,11 @@ export const AccordionContent = React.forwardRef<View, AccordionContentProps>(
     return (
       <View
         ref={ref}
-        className={cn("pt-1 pb-3 px-1 text-sm text-muted", className)}
+        className={cn("pt-1 pb-3 px-1", className)}
         {...props}
       >
         {typeof children === "string" ? (
-          <Text className="text-sm text-muted leading-relaxed">{children}</Text>
+          <Text className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">{children}</Text>
         ) : (
           children
         )}

package/src/templates/auth/ForgotPasswordTemplate.tsx

@@ -50,7 +50,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -61,10 +61,10 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
       >
         <View className="w-full max-w-md mx-auto gap-6">
           <View className="items-center gap-2">
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -117,7 +117,7 @@ export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
               {onBackToSignIn && (
                 <View className="flex-row justify-center items-center gap-1.5 pt-2">
                   <Pressable onPress={onBackToSignIn}>
-                    <Text className="text-sm font-semibold text-primary">
+                    <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                       Back to Sign In
                     </Text>
                   </Pressable>

package/src/templates/auth/SignInTemplate.tsx

@@ -72,7 +72,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -85,10 +85,10 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Logo & Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -129,7 +129,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
                 error={passwordError}
                 rightElement={
                   <Pressable onPress={() => setShowPassword((p) => !p)} className="p-1">
-                    <Text className="text-xs text-muted font-semibold">
+                    <Text className="text-xs text-neutral-500 dark:text-neutral-400 font-semibold">
                       {showPassword ? "HIDE" : "SHOW"}
                     </Text>
                   </Pressable>
@@ -141,12 +141,12 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="flex-row items-center justify-between py-1">
               <View className="flex-row items-center gap-2">
                 <Checkbox checked={rememberMe} onCheckedChange={setRememberMe} />
-                <Text className="text-sm text-foreground">Remember me</Text>
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100">Remember me</Text>
               </View>
 
               {onForgotPassword && (
                 <Pressable onPress={onForgotPassword}>
-                  <Text className="text-sm font-semibold text-primary">
+                  <Text className="text-sm font-semibold text-primary-600 dark:text-primary-400">
                     Forgot password?
                   </Text>
                 </Pressable>
@@ -170,7 +170,7 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -200,9 +200,9 @@ export const SignInTemplate: React.FC<SignInTemplateProps> = ({
           {/* Switch to SignUp */}
           {onSignUpPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Don't have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Don't have an account?</Text>
               <Pressable onPress={onSignUpPress}>
-                <Text className="text-sm font-bold text-primary">Sign Up</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign Up</Text>
               </Pressable>
             </View>
           )}

package/src/templates/auth/SignUpTemplate.tsx

@@ -88,7 +88,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
     >
       <ScrollView
         style={{ flex: 1 }}
@@ -101,10 +101,10 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Header */}
           <View className="items-center gap-2">
             {logo && <View className="mb-2">{logo}</View>}
-            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+            <Heading level={2} className="text-3xl font-extrabold text-neutral-900 dark:text-neutral-50 text-center">
               {title}
             </Heading>
-            <Text className="text-muted text-center text-base">
+            <Text className="text-neutral-500 dark:text-neutral-400 text-center text-base">
               {subtitle}
             </Text>
           </View>
@@ -164,7 +164,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
                     if (termsError) setTermsError(undefined);
                   }}
                 />
-                <Text className="text-sm text-foreground flex-1">
+                <Text className="text-sm text-neutral-900 dark:text-neutral-100 flex-1">
                   I agree to the Terms of Service & Privacy Policy
                 </Text>
               </View>
@@ -190,7 +190,7 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
             <View className="gap-4">
               <View className="flex-row items-center gap-3">
                 <Separator className="flex-1" />
-                <Text className="text-xs text-muted uppercase">or continue with</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400 uppercase">or continue with</Text>
                 <Separator className="flex-1" />
               </View>
 
@@ -220,9 +220,9 @@ export const SignUpTemplate: React.FC<SignUpTemplateProps> = ({
           {/* Back to SignIn */}
           {onSignInPress && (
             <View className="flex-row justify-center items-center gap-1.5 pt-2">
-              <Text className="text-sm text-muted">Already have an account?</Text>
+              <Text className="text-sm text-neutral-500 dark:text-neutral-400">Already have an account?</Text>
               <Pressable onPress={onSignInPress}>
-                <Text className="text-sm font-bold text-primary">Sign In</Text>
+                <Text className="text-sm font-bold text-primary-600 dark:text-primary-400">Sign In</Text>
               </Pressable>
             </View>
           )}

package/src/templates/dashboard/DashboardTemplate.tsx

@@ -69,12 +69,12 @@ export const DashboardTemplate: React.FC<DashboardTemplateProps> = ({
     <ScrollView
       {...props}
       style={[{ flex: 1 }, (props as any).style]}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
       contentContainerStyle={{ paddingBottom: 40 }}
       showsVerticalScrollIndicator={false}
     >
       {/* Top Greeting Header */}
-      <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-border/40">
+      <View className="px-6 pt-6 pb-4 flex-row items-center justify-between border-b border-neutral-200 dark:border-neutral-800">
         <View className="flex-row items-center gap-3">
           <Avatar size="lg">
             {userAvatarUrl && <AvatarImage source={{ uri: userAvatarUrl }} />}

package/src/templates/settings/SettingsTemplate.tsx

@@ -62,12 +62,12 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
     <ScrollView
       {...props}
       style={[{ flex: 1 }, (props as any).style]}
-      className={cn("flex-1 bg-background", className)}
+      className={cn("flex-1 bg-neutral-50 dark:bg-neutral-950", className)}
       contentContainerStyle={{ paddingBottom: 40 }}
       showsVerticalScrollIndicator={false}
     >
       <View className="px-6 pt-6 gap-6">
-        <Heading level={2} className="text-2xl font-bold text-foreground">
+        <Heading level={2} className="text-2xl font-bold text-neutral-900 dark:text-neutral-50">
           Settings & Profile
         </Heading>
 
@@ -79,14 +79,14 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
           </Avatar>
           <View className="flex-1">
             <View className="flex-row items-center gap-2">
-              <Text className="text-base font-bold text-foreground">{user.name}</Text>
+              <Text className="text-base font-bold text-neutral-900 dark:text-neutral-100">{user.name}</Text>
               {user.plan && (
                 <Badge variant="primary" size="sm">
                   {user.plan}
                 </Badge>
               )}
             </View>
-            <Text className="text-xs text-muted">{user.email}</Text>
+            <Text className="text-xs text-neutral-500 dark:text-neutral-400">{user.email}</Text>
           </View>
           {onEditProfile && (
             <Button variant="outline" size="sm" onPress={onEditProfile}>
@@ -97,16 +97,16 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
         {/* Preferences Section */}
         <View className="gap-2">
-          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+          <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
             Preferences
           </Text>
-          <Card className="divide-y divide-border/50">
+          <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Push Notifications
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Receive real-time alerts on your mobile device
                 </Text>
               </View>
@@ -118,10 +118,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Email Notifications
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Weekly digests and activity summaries
                 </Text>
               </View>
@@ -133,8 +133,8 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">Dark Theme</Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">Dark Theme</Text>
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Enable high contrast dark mode appearance
                 </Text>
               </View>
@@ -143,10 +143,10 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
             <View className="p-4 flex-row items-center justify-between">
               <View className="pr-4 flex-1">
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Biometric Login
                 </Text>
-                <Text className="text-xs text-muted">
+                <Text className="text-xs text-neutral-500 dark:text-neutral-400">
                   Use Face ID or fingerprint to authenticate
                 </Text>
               </View>
@@ -160,43 +160,43 @@ export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
 
         {/* Security & Account Links */}
         <View className="gap-2">
-          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+          <Text className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider px-1">
             Account & Security
           </Text>
-          <Card className="divide-y divide-border/50">
+          <Card className="divide-y divide-neutral-200 dark:divide-neutral-800">
             {onChangePassword && (
               <Pressable
                 onPress={onChangePassword}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Change Password
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
 
             {onViewTerms && (
               <Pressable
                 onPress={onViewTerms}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Terms of Service
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
 
             {onViewPrivacy && (
               <Pressable
                 onPress={onViewPrivacy}
-                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+                className="p-4 flex-row items-center justify-between active:bg-neutral-100 dark:active:bg-neutral-800"
               >
-                <Text className="text-sm font-semibold text-foreground">
+                <Text className="text-sm font-semibold text-neutral-900 dark:text-neutral-100">
                   Privacy Policy
                 </Text>
-                <Text className="text-muted text-xs">›</Text>
+                <Text className="text-neutral-400 dark:text-neutral-500 text-xs">›</Text>
               </Pressable>
             )}
           </Card>