@idealyst/navigation 1.0.49 → 1.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "description": "Cross-platform navigation library for React and React Native",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -37,8 +37,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.49",
-    "@idealyst/theme": "^1.0.49",
+    "@idealyst/components": "^1.0.51",
+    "@idealyst/theme": "^1.0.51",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",

package/src/examples/ExampleTabRouter.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
-import { DataGridShowcase } from "../../../datagrid/src/examples";
-import { DatePickerExamples } from "../../../datepicker/src/examples";
-import { Screen, Text, View, Button } from "../../../components/src";
+import { ButtonExamples, CardExamples, IconExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { Screen, Text, View, Button, Icon } from "../../../components/src";
 import { UnistylesRuntime } from 'react-native-unistyles';
 import { RouteParam } from '../routing';
+import { useNavigator } from '../context';
 import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
 
 const HomeTabScreen = () => {
+    const navigator = useNavigator();
     const currentTheme = UnistylesRuntime.themeName || 'light';
     
     const cycleTheme = () => {
@@ -21,10 +21,8 @@ const HomeTabScreen = () => {
         let newTheme: string;
         
         if (isHighContrastTheme(currentTheme)) {
-            // Switch to standard variant
             newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
         } else {
-            // Switch to high contrast variant
             newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
         }
         
@@ -34,32 +32,58 @@ const HomeTabScreen = () => {
 
     return (
         <Screen>
-            <View>
+            <View spacing="lg">
                 <Text size="large" weight="bold">
-                    Welcome to the Component Library
+                    TabBar Navigation Demo
                 </Text>
                 <Text size="medium">
-                    Use the tabs above to explore different components
+                    This demonstrates native tab navigation with screen options
                 </Text>
                 
-                <View style={{ marginTop: 24, gap: 12 }}>
-                    <Text size="medium" weight="semibold">
-                        Theme Controls
-                    </Text>
+                <View spacing="md" style={{ marginTop: 24 }}>
+                    <Text size="medium" weight="semibold">Navigation Tabs</Text>
                     <Text size="small">
-                        Current Theme: {getThemeDisplayName(currentTheme)}
+                        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.
                     </Text>
                     
-                    <Button variant="outlined" onPress={cycleTheme}>
-                        Cycle Theme (Light → Dark → Light HC → Dark HC)
-                    </Button>
+                    <View spacing="sm">
+                        <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/components', vars: {} })}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <Icon name="view-dashboard" size="sm" style={{ marginRight: 8 }} />
+                                <Text>Components Tab</Text>
+                            </View>
+                        </Button>
+                        <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/settings', vars: {} })}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <Icon name="cog" size="sm" style={{ marginRight: 8 }} />
+                                <Text>Settings Tab</Text>
+                            </View>
+                        </Button>
+                        <Button size="small" variant="outlined" onPress={() => navigator.navigate({ path: '/theme', vars: {} })}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                                <Icon name="palette" size="sm" style={{ marginRight: 8 }} />
+                                <Text>Theme Tab</Text>
+                            </View>
+                        </Button>
+                    </View>
+                </View>
+                
+                <View spacing="md" style={{ marginTop: 24 }}>
+                    <Text size="medium" weight="semibold">Theme Controls</Text>
+                    <Text size="small">Current Theme: {getThemeDisplayName(currentTheme)}</Text>
                     
-                    <Button variant="outlined" onPress={toggleHighContrast}>
-                        Toggle High Contrast
-                    </Button>
+                    <View style={{ flexDirection: 'row', marginTop: 12 }}>
+                        <Button variant="outlined" onPress={cycleTheme} style={{ marginRight: 12 }}>
+                            Cycle Theme
+                        </Button>
+                        <Button variant="outlined" onPress={toggleHighContrast}>
+                            Toggle High Contrast
+                        </Button>
+                    </View>
                     
                     {isHighContrastTheme(currentTheme) && (
-                        <Text size="small" style={{ fontStyle: 'italic' }}>
+                        <Text size="small" style={{ fontStyle: 'italic', marginTop: 8 }}>
                             ♿ High contrast mode is active for better accessibility
                         </Text>
                     )}
@@ -69,93 +93,67 @@ const HomeTabScreen = () => {
     );
 };
 
-const AvatarTabScreen = () => (
-    <Screen>
-        <AvatarExamples />
-    </Screen>
-);
-
-const BadgeTabScreen = () => (
-    <Screen>
-        <BadgeExamples />
-    </Screen>
-);
-
-const ButtonTabScreen = () => (
-    <Screen>
-        <ButtonExamples />
-    </Screen>
-);
-
-const CardTabScreen = () => (
-    <Screen>
-        <CardExamples />
-    </Screen>
-);
-
-const CheckboxTabScreen = () => (
+const ComponentsTabScreen = () => (
     <Screen>
-        <CheckboxExamples />
-    </Screen>
-);
-
-const DividerTabScreen = () => (
-    <Screen>
-        <DividerExamples />
-    </Screen>
-);
-
-const InputTabScreen = () => (
-    <Screen>
-        <InputExamples />
-    </Screen>
-);
-
-const TextTabScreen = () => (
-    <Screen>
-        <TextExamples />
-    </Screen>
-);
-
-const ViewTabScreen = () => (
-    <Screen>
-        <ViewExamples />
-    </Screen>
-);
-
-const IconTabScreen = () => (
-    <Screen>
-        <IconExamples />
-    </Screen>
-);
-
-const DialogTabScreen = () => (
-    <Screen>
-        <DialogExamples />
-    </Screen>
-);
-
-const PopoverTabScreen = () => (
-    <Screen>
-        <PopoverExamples />
-    </Screen>
-);
-
-const DataGridTabScreen = () => (
-    <Screen>
-        <DataGridShowcase />
+        <View spacing="lg">
+            <Text size="large" weight="bold">Components</Text>
+            <Text>Explore UI components with native tab navigation</Text>
+            
+            <View spacing="md">
+                <Text size="medium" weight="semibold">Button Examples</Text>
+                <ButtonExamples />
+            </View>
+            
+            <View spacing="md">
+                <Text size="medium" weight="semibold">Card Examples</Text>
+                <CardExamples />
+            </View>
+            
+            <View spacing="md">
+                <Text size="medium" weight="semibold">Icon Examples</Text>
+                <IconExamples />
+            </View>
+        </View>
     </Screen>
 );
 
-const DatePickerTabScreen = () => (
-    <Screen>
-        <DatePickerExamples />
-    </Screen>
-);
+const SettingsTabScreen = () => {
+    const currentTheme = UnistylesRuntime.themeName || 'light';
+    
+    return (
+        <Screen>
+            <View spacing="lg">
+                <Text size="large" weight="bold">Settings</Text>
+                <Text>Configure the TabBar demo settings</Text>
+                
+                <View spacing="md">
+                    <Text size="medium" weight="semibold">Navigation Info</Text>
+                    <Text size="small">
+                        This tab uses native navigation with screen options:
+                    </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">
+                    <Text size="medium" weight="semibold">Current State</Text>
+                    <Text size="small">Theme: {getThemeDisplayName(currentTheme)}</Text>
+                    <Text size="small">Platform: React Navigation (Native) / React Router (Web)</Text>
+                </View>
+            </View>
+        </Screen>
+    );
+};
 
-const ThemeExtensionTabScreen = () => (
+const ThemeTabScreen = () => (
     <Screen>
-        <ThemeExtensionExamples />
+        <View spacing="lg">
+            <Text size="large" weight="bold">Theme System</Text>
+            <Text>Explore the theme extension system</Text>
+            
+            <ThemeExtensionExamples />
+        </View>
     </Screen>
 );
 
@@ -165,23 +163,56 @@ const TabRouter: RouteParam = {
     layout: {
         type: "tab",
     },
+    screenOptions: {
+        title: 'Home',
+        tabBarLabel: 'Home',
+        tabBarIcon: ({ focused, size }) => {
+            return <Icon name="home" color={focused ? 'blue' : 'black'} size={size} />
+        },
+    },
     routes: [
-        { path: "avatar", component: AvatarTabScreen },
-        { path: "badge", component: BadgeTabScreen },
-        { path: "button", component: ButtonTabScreen },
-        { path: "card", component: CardTabScreen },
-        { path: "checkbox", component: CheckboxTabScreen },
-        { path: "divider", component: DividerTabScreen },
-        { path: "input", component: InputTabScreen },
-        { path: "text", component: TextTabScreen },
-        { path: "view", component: ViewTabScreen },
-        { path: "icon", component: IconTabScreen },
-        { path: "dialog", component: DialogTabScreen },
-        { path: "popover", component: PopoverTabScreen },
-        { path: "datagrid", component: DataGridTabScreen },
-        { path: "datepicker", component: DatePickerTabScreen },
-        { path: "theme-extension", component: ThemeExtensionTabScreen },
+        { 
+            path: "components", 
+            component: ComponentsTabScreen,
+            screenOptions: {
+                title: 'Components',
+                tabBarLabel: 'Components',
+                tabBarIcon: (props) => {
+                    if (props.focused) {
+                        return <Icon name="view-dashboard" color={props.focused ? 'blue' : 'black'} size={props.size} />;
+                    }
+                    return <Icon name="view-dashboard-outline" color={props.color} size={props.size} />;
+                },
+            },
+        },
+        { 
+            path: "settings", 
+            component: SettingsTabScreen,
+            screenOptions: {
+                title: 'Settings',
+                tabBarLabel: 'Settings', 
+                tabBarIcon: ({ focused, size }) => (
+                    <Icon 
+                        name="cog" 
+                        color={focused ? 'blue' : 'black'}
+                        size={size}
+                        style={{ opacity: focused ? 1 : 0.8 }}
+                    />
+                ),
+            },
+        },
+        { 
+            path: "theme", 
+            component: ThemeTabScreen,
+            screenOptions: {
+                title: 'Theme',
+                tabBarLabel: 'Theme',
+                tabBarIcon: ({ focused, size }) => (
+                    <Icon name="palette" color={focused ? 'blue' : 'black'} size={size} />
+                ),
+            },
+        },
     ],
-}
+};
 
 export default TabRouter; 

package/src/layouts/GeneralLayout/GeneralLayout.tsx

@@ -75,7 +75,6 @@ const GeneralLayout: React.FC<GeneralLayoutProps> = ({
       {/* Header */}
       {headerConfig.enabled && (
         <View 
-          background="surface"
           border="thin"
           spacing="md"
           style={[

package/src/layouts/TabBarLayout/TabBarLayout.native.tsx

@@ -0,0 +1,283 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Button, Icon, Pressable } from '@idealyst/components';
+import { TabBarLayoutProps, TabBarConfig, TabButtonProps } from './types';
+import { tabBarLayoutStyles } from './TabBarLayout.styles';
+import { Dimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const DEFAULT_AUTO_BREAKPOINT = 768;
+
+const NativeHeader: React.FC<{
+  config: any;
+  styles: any;
+  showTabsInHeader: boolean;
+  tabBarConfig: TabBarConfig;
+  insets: any;
+}> = ({ config, styles, showTabsInHeader, tabBarConfig, insets }) => {
+  const handleBackPress = () => {
+    if (config.onBackPress) {
+      config.onBackPress();
+    }
+    // Could integrate with React Navigation here
+    // navigation.goBack();
+  };
+
+  const headerDynamicStyles = {
+    height: config.height,
+    minHeight: config.height,
+    paddingTop: config.enabled ? insets.top : 0,
+  };
+
+  return (
+    <View 
+      style={[
+        styles.headerContainer,
+        headerDynamicStyles,
+        config.style,
+      ]}
+    >
+      <View style={styles.headerContent}>
+        {/* Custom content overrides native elements */}
+        {config.content ? (
+          config.content
+        ) : (
+          <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+            {/* Back Button */}
+            {config.showBackButton && (
+              <Button
+                variant="text"
+                onPress={handleBackPress}
+                style={{ marginRight: 8, minWidth: 'auto' }}
+              >
+                <Icon name="arrow-left" size="lg" color="primary" />
+              </Button>
+            )}
+            
+            {/* Title */}
+            {config.title && (
+              <Text 
+                size="large" 
+                weight="semibold"
+                style={{ flex: 1 }}
+              >
+                {config.title}
+              </Text>
+            )}
+          </View>
+        )}
+      </View>
+      
+      <View style={styles.headerRightContent}>
+        {/* Tabs in header for wide screens */}
+        {showTabsInHeader && tabBarConfig.items.length > 0 && (
+          <TabBar config={tabBarConfig} position="header" />
+        )}
+        
+        {/* Additional right content */}
+        {config.rightContent}
+      </View>
+    </View>
+  );
+};
+
+const TabButton: React.FC<TabButtonProps> = ({ item, isActive, onPress, position }) => {
+  const styles = tabBarLayoutStyles;
+  const isHeader = position === 'header';
+  
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={item.disabled}
+      style={[
+        isHeader ? styles.tabButtonHeader : styles.tabButton,
+        isActive && styles.tabButtonActive,
+        item.disabled && styles.tabButtonDisabled,
+      ]}
+    >
+      <View style={styles.tabIconContainer}>
+        {item.icon && (
+          typeof item.icon === 'string' ? (
+            <Icon name={item.icon as any} size={isHeader ? "lg" : "md"} color={isActive ? 'primary' : 'secondary'} />
+          ) : (
+            item.icon
+          )
+        )}
+        {item.badge !== undefined && (
+          <View style={styles.tabBadge}>
+            <Text style={styles.tabBadgeText}>
+              {typeof item.badge === 'number' && item.badge > 99 ? '99+' : item.badge}
+            </Text>
+          </View>
+        )}
+      </View>
+      {(!isHeader || (isHeader && item.label)) && (
+        <Text 
+          size={isHeader ? "medium" : "small"}
+          color={isActive ? 'primary' : 'secondary'}
+          style={isHeader ? { marginLeft: 8 } : { marginTop: 2, textAlign: 'center', fontSize: 10 }}
+        >
+          {item.label}
+        </Text>
+      )}
+    </Pressable>
+  );
+};
+
+const TabBar: React.FC<{
+  config: TabBarConfig;
+  position: 'bottom' | 'header';
+}> = ({ config, position }) => {
+  const styles = tabBarLayoutStyles;
+  
+  if (config.renderTabBar) {
+    return (
+      <>
+        {config.renderTabBar({
+          items: config.items,
+          activeTab: config.activeTab,
+          onTabSelect: config.onTabSelect,
+          position,
+        })}
+      </>
+    );
+  }
+  
+  const containerStyle = position === 'header' 
+    ? styles.headerTabs 
+    : [styles.tabBarBottom, config.style];
+  
+  return (
+    <View style={containerStyle}>
+      {config.items.map((item) => {
+        if (item.renderTab) {
+          return (
+            <React.Fragment key={item.id}>
+              {item.renderTab({
+                item,
+                isActive: item.id === config.activeTab,
+                onPress: () => config.onTabSelect?.(item.id),
+                position,
+              })}
+            </React.Fragment>
+          );
+        }
+        
+        return (
+          <TabButton
+            key={item.id}
+            item={item}
+            isActive={item.id === config.activeTab}
+            onPress={() => config.onTabSelect?.(item.id)}
+            position={position}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const TabBarLayout: React.FC<TabBarLayoutProps> = ({
+  children,
+  tabBar = {},
+  header = {},
+  style,
+  testID,
+}) => {
+  const styles = tabBarLayoutStyles;
+  const insets = useSafeAreaInsets();
+  const [screenWidth, setScreenWidth] = useState(() => Dimensions.get('window').width);
+  
+  // Default tab bar configuration
+  const tabBarConfig = {
+    items: [],
+    activeTab: undefined,
+    onTabSelect: undefined,
+    position: 'auto' as const,
+    autoBreakpoint: DEFAULT_AUTO_BREAKPOINT,
+    style: undefined,
+    tabStyle: undefined,
+    showLabels: true,
+    renderTabBar: undefined,
+    ...tabBar,
+  };
+  
+  // Default header configuration
+  const headerConfig = {
+    enabled: true,
+    height: 64,
+    title: undefined,
+    showBackButton: false,
+    onBackPress: undefined,
+    content: null,
+    rightContent: null,
+    style: undefined,
+    showTabs: true,
+    native: true,
+    ...header,
+  };
+  
+  // Update screen width on orientation change
+  useEffect(() => {
+    const updateDimensions = () => {
+      setScreenWidth(Dimensions.get('window').width);
+    };
+    
+    const subscription = Dimensions.addEventListener('change', updateDimensions);
+    return () => subscription?.remove();
+  }, []);
+  
+  // Determine actual tab position - native always uses bottom for mobile
+  const actualTabPosition = (() => {
+    if (tabBarConfig.position === 'auto') {
+      return 'bottom'; // Native mobile apps typically use bottom tabs
+    }
+    return tabBarConfig.position;
+  })();
+  
+  const showTabsInHeader = actualTabPosition === 'header' && headerConfig.showTabs;
+  const showTabsAtBottom = actualTabPosition === 'bottom';
+  
+  // Create dynamic styles for bottom tab bar
+  const tabBarBottomStyles = {
+    paddingBottom: showTabsAtBottom ? insets.bottom : 0,
+  };
+  
+  return (
+    <View 
+      style={[
+        styles.container,
+        style,
+      ]}
+      testID={testID}
+    >
+      {/* Header */}
+      {headerConfig.enabled && (
+        <NativeHeader 
+          config={headerConfig}
+          styles={styles}
+          showTabsInHeader={showTabsInHeader}
+          tabBarConfig={tabBarConfig}
+          insets={insets}
+        />
+      )}
+      
+      {/* Main Content Area */}
+      <View style={styles.bodyContainer}>
+        <View style={styles.mainContent}>
+          <View style={styles.contentArea}>
+            {children}
+          </View>
+        </View>
+      </View>
+      
+      {/* Bottom Tab Bar */}
+      {showTabsAtBottom && tabBarConfig.items.length > 0 && (
+        <View style={tabBarBottomStyles}>
+          <TabBar config={tabBarConfig} position="bottom" />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default TabBarLayout;