@idealyst/navigation 1.0.54 → 1.0.57

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.54",
+  "version": "1.0.57",
   "description": "Cross-platform navigation library for React and React Native",
+  "readme": "README.md",
   "main": "src/index.ts",
   "module": "src/index.ts",
   "types": "src/index.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/idealyst-framework.git",
+    "url": "https://github.com/IdealystIO/idealyst-framework.git",
     "directory": "packages/navigation"
   },
   "author": "Nicholas Mercier <nicho.mercier@gmail.com>",
@@ -37,8 +38,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.54",
-    "@idealyst/theme": "^1.0.54",
+    "@idealyst/components": "^1.0.57",
+    "@idealyst/theme": "^1.0.57",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",

package/src/examples/ExampleTabRouter.tsx

@@ -37,15 +37,26 @@ const HomeTabScreen = () => {
                     TabBar Navigation Demo
                 </Text>
                 <Text size="medium">
-                    This demonstrates native tab navigation with screen options
+                    This demonstrates native tab navigation with custom headers
                 </Text>
                 
+                <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(0,150,255,0.1)', borderRadius: 8 }}>
+                    <Text size="small" weight="semibold">📋 Header Features Demonstrated:</Text>
+                    <Text size="small">• headerTitle: Custom title component with icon</Text>
+                    <Text size="small">• headerLeft: Menu button (appears before title)</Text>
+                    <Text size="small">• headerRight: Multiple action buttons</Text>
+                    <Text size="small">• Cross-platform: Works on both mobile and web</Text>
+                </View>
+                
                 <View spacing="md" style={{ marginTop: 24 }}>
                     <Text size="medium" weight="semibold">Navigation Tabs</Text>
                     <Text size="small">
-                        The tabs below use native React Navigation with screen options for icons and labels.
-                        On mobile, tabs appear at the bottom. On web, they may adapt based on the platform.
+                        Each tab demonstrates different header configurations:
                     </Text>
+                    <Text size="small">• Home: Custom headerTitle, headerLeft menu, headerRight actions</Text>
+                    <Text size="small">• Components: Simple headerLeft back button, headerRight refresh</Text>
+                    <Text size="small">• Settings: String headerTitle override, help + menu buttons</Text>
+                    <Text size="small">• Theme: Component headerTitle with icon, save button</Text>
                     
                     <View spacing="sm">
                         <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/components', vars: {} })}>
@@ -97,7 +108,14 @@ const ComponentsTabScreen = () => (
     <Screen>
         <View spacing="lg">
             <Text size="large" weight="bold">Components</Text>
-            <Text>Explore UI components with native tab navigation</Text>
+            <Text>Explore UI components with custom header navigation</Text>
+            
+            <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(100,200,100,0.1)', borderRadius: 8 }}>
+                <Text size="small" weight="semibold">🔧 This tab demonstrates:</Text>
+                <Text size="small">• headerLeft: Back arrow button</Text>
+                <Text size="small">• headerRight: Refresh action button</Text>
+                <Text size="small">• Default title: Uses 'Components' from screenOptions</Text>
+            </View>
             
             <View spacing="md">
                 <Text size="medium" weight="semibold">Button Examples</Text>
@@ -131,14 +149,24 @@ const SettingsTabScreen = () => {
                 <Text size="large" weight="bold">Settings</Text>
                 <Text>Configure the TabBar demo settings</Text>
                 
+                <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(255,150,0,0.1)', borderRadius: 8 }}>
+                    <Text size="small" weight="semibold">⚙️ This tab demonstrates:</Text>
+                    <Text size="small">• headerTitle: String override ('App Settings')</Text>
+                    <Text size="small">• headerLeft: Chevron back button</Text>
+                    <Text size="small">• headerRight: Help + menu buttons</Text>
+                    <Text size="small">• Notice: Title in header != tab title</Text>
+                </View>
+                
                 <View spacing="md">
-                    <Text size="medium" weight="semibold">Navigation Info</Text>
-                    <Text size="small">
-                        This tab uses native navigation with screen options:
+                    <Text size="medium" weight="semibold">Screen Options Used</Text>
+                    <Text size="small" style={{ fontFamily: 'monospace', backgroundColor: 'rgba(0,0,0,0.05)', padding: 8 }}>
+                        screenOptions: {{
+  title: 'Settings',{"\n"}
+  headerTitle: 'App Settings',{"\n"}
+  headerLeft: () => &lt;BackButton /&gt;,{"\n"}
+  headerRight: () => &lt;ActionButtons /&gt;
+}}
                     </Text>
-                    <Text size="small">• tabBarIcon: "cog" (Material Design Icons)</Text>
-                    <Text size="small">• tabBarLabel: "Settings"</Text>
-                    <Text size="small">• title: "Settings"</Text>
                 </View>
                 
                 <View spacing="md">
@@ -155,7 +183,14 @@ const ThemeTabScreen = () => (
     <Screen>
         <View spacing="lg">
             <Text size="large" weight="bold">Theme System</Text>
-            <Text>Explore the theme extension system</Text>
+            <Text>Explore the theme extension system with custom header</Text>
+            
+            <View spacing="sm" style={{ padding: 12, backgroundColor: 'rgba(150,0,255,0.1)', borderRadius: 8 }}>
+                <Text size="small" weight="semibold">🎨 This tab demonstrates:</Text>
+                <Text size="small">• headerTitle: React component with icon + text</Text>
+                <Text size="small">• headerRight: Styled save button</Text>
+                <Text size="small">• Custom styling: Intent colors and typography</Text>
+            </View>
             
             <ThemeExtensionExamples />
         </View>
@@ -170,6 +205,27 @@ const TabRouter: RouteParam = {
     },
     screenOptions: {
         title: 'Home',
+        headerTitle: () => (
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Icon name="home" size="md" style={{ marginRight: 8 }} />
+                <Text size="large" weight="bold">Tab Demo</Text>
+            </View>
+        ),
+        headerLeft: () => (
+            <Button variant="text" size="small">
+                <Icon name="menu" size="md" />
+            </Button>
+        ),
+        headerRight: () => (
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Button variant="text" size="small" style={{ marginRight: 8 }}>
+                    <Icon name="bell" size="md" />
+                </Button>
+                <Button variant="text" size="small">
+                    <Icon name="account" size="md" />
+                </Button>
+            </View>
+        ),
         tabBarLabel: 'Home',
         tabBarIcon: ({ focused, size }) => {
             return <Icon name="home" color={focused ? 'blue' : 'black'} size={size} />
@@ -181,6 +237,16 @@ const TabRouter: RouteParam = {
             component: ComponentsTabScreen,
             screenOptions: {
                 title: 'Components',
+                headerLeft: () => (
+                    <Button variant="text" size="small">
+                        <Icon name="arrow-left" size="md" />
+                    </Button>
+                ),
+                headerRight: () => (
+                    <Button variant="text" size="small">
+                        <Icon name="refresh" size="md" />
+                    </Button>
+                ),
                 tabBarLabel: 'Components',
                 tabBarIcon: (props) => {
                     if (props.focused) {
@@ -195,6 +261,22 @@ const TabRouter: RouteParam = {
             component: SettingsTabScreen,
             screenOptions: {
                 title: 'Settings',
+                headerTitle: 'App Settings',
+                headerLeft: () => (
+                    <Button variant="text" size="small">
+                        <Icon name="chevron-left" size="md" />
+                    </Button>
+                ),
+                headerRight: () => (
+                    <View style={{ flexDirection: 'row' }}>
+                        <Button variant="text" size="small" style={{ marginRight: 4 }}>
+                            <Icon name="help-circle" size="md" />
+                        </Button>
+                        <Button variant="text" size="small">
+                            <Icon name="dots-vertical" size="md" />
+                        </Button>
+                    </View>
+                ),
                 tabBarLabel: 'Settings', 
                 tabBarIcon: ({ focused, size }) => (
                     <Icon 
@@ -211,6 +293,17 @@ const TabRouter: RouteParam = {
             component: ThemeTabScreen,
             screenOptions: {
                 title: 'Theme',
+                headerTitle: () => (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Icon name="palette" size="sm" style={{ marginRight: 6 }} />
+                        <Text size="medium" weight="semibold">Theme System</Text>
+                    </View>
+                ),
+                headerRight: () => (
+                    <Button variant="contained" size="small" intent="primary">
+                        <Text size="small" color="white">Save</Text>
+                    </Button>
+                ),
                 tabBarLabel: 'Theme',
                 tabBarIcon: ({ focused, size }) => (
                     <Icon name="palette" color={focused ? 'blue' : 'black'} size={size} />

package/src/routing/router.native.tsx

@@ -22,7 +22,10 @@ const convertScreenOptions = (screenOptions?: ScreenOptions) => {
 
     if (screenOptions.title) {
         options.title = screenOptions.title;
-        options.headerTitle = screenOptions.title;
+        // Set default headerTitle to title, but allow headerTitle to override
+        if (!screenOptions.headerTitle) {
+            options.headerTitle = screenOptions.title;
+        }
     }
 
     if (screenOptions.tabBarLabel) {
@@ -52,6 +55,7 @@ const convertScreenOptions = (screenOptions?: ScreenOptions) => {
         options.tabBarStyle = screenOptions.tabBarVisible ? {} : { display: 'none' };
     }
 
+    // headerTitle should override the default title in the header
     if (screenOptions.headerTitle) {
         options.headerTitle = screenOptions.headerTitle;
     }
@@ -60,6 +64,10 @@ const convertScreenOptions = (screenOptions?: ScreenOptions) => {
         options.headerBackVisible = screenOptions.headerBackVisible;
     }
 
+    if (screenOptions.headerLeft) {
+        options.headerLeft = screenOptions.headerLeft;
+    }
+
     if (screenOptions.headerRight) {
         options.headerRight = screenOptions.headerRight;
     }

package/src/routing/router.web.tsx

@@ -156,14 +156,15 @@ const SimpleTabLayout: React.FC<SimpleTabLayoutProps> = ({ routeParam, webScreen
         }}>
             {/* Left side */}
             <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
-                {webScreenOptions.headerLeft ? (
-                    renderHeaderElement(webScreenOptions.headerLeft)
-                ) : (
-                    renderHeaderElement(
-                        webScreenOptions.headerTitle || 
-                        webScreenOptions.title || 
-                        'Navigation'
-                    )
+                {webScreenOptions.headerLeft && (
+                    <View style={{ marginRight: 12 }}>
+                        {renderHeaderElement(webScreenOptions.headerLeft)}
+                    </View>
+                )}
+                {renderHeaderElement(
+                    webScreenOptions.headerTitle || 
+                    webScreenOptions.title || 
+                    'Navigation'
                 )}
             </View>
             
@@ -258,6 +259,10 @@ const convertScreenOptionsForWeb = (screenOptions?: ScreenOptions) => {
         webOptions.headerBackVisible = screenOptions.headerBackVisible;
     }
 
+    if (screenOptions.headerLeft) {
+        webOptions.headerLeft = screenOptions.headerLeft;
+    }
+
     if (screenOptions.headerRight) {
         webOptions.headerRight = screenOptions.headerRight;
     }