@idealyst/navigation 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Cross-platform navigation library for React and React Native",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -33,14 +33,12 @@
     }
   },
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
     "prepublishOnly": "echo 'Publishing TypeScript source directly'",
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.23",
-    "@idealyst/theme": "^1.0.23",
+    "@idealyst/components": "^1.0.25",
+    "@idealyst/theme": "^1.0.25",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",
@@ -58,8 +56,6 @@
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "rollup": "^3.20.0",
-    "rollup-plugin-typescript2": "^0.34.0",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/context/NavigatorContext.native.tsx

@@ -1,51 +1,51 @@
-import React, { createContext, memo, useContext, useMemo } from 'react';
-import { NavigateParams, NavigatorProviderProps } from './types';
-import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import { buildRouter } from '../routing';
-import { useUnistyles } from 'react-native-unistyles';
-
-const NavigatorContext = createContext<{
-    navigate: (params: NavigateParams) => void;
-}>({
-    navigate: () => {},
-});
-
-const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
-
-    const navigation = useNavigation();
-        
-    const navigate = (params: NavigateParams) => {
-        console.log('navigate', params);
-        navigation.navigate(params.path as never);
-    };
-
-    const RouteComponent = useMemo(() => {
-        // Memoize the router to prevent unnecessary re-renders
-        return memo(buildRouter(route));
-    }, [route]);
-     
-    return (
-        <NavigatorContext.Provider value={{ navigate }}>
-            <RouteComponent />
-        </NavigatorContext.Provider>
-    )
-};
-
-const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
-    const {rt} = useUnistyles()
-    
-    const isDarkMode = rt.themeName === 'dark';
-
-    return (
-        <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
-            <UnwrappedNavigatorProvider route={route} />
-        </NavigationContainer>
-    )
-};
-
-export { NavigatorProvider };
-
-
-export const useNavigator = () => {
-  return useContext(NavigatorContext);
+import React, { createContext, memo, useContext, useMemo } from 'react';
+import { NavigateParams, NavigatorProviderProps } from './types';
+import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
+import { buildRouter } from '../routing';
+import { useUnistyles } from 'react-native-unistyles';
+
+const NavigatorContext = createContext<{
+    navigate: (params: NavigateParams) => void;
+}>({
+    navigate: () => {},
+});
+
+const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
+
+    const navigation = useNavigation();
+        
+    const navigate = (params: NavigateParams) => {
+        console.log('navigate', params);
+        navigation.navigate(params.path as never);
+    };
+
+    const RouteComponent = useMemo(() => {
+        // Memoize the router to prevent unnecessary re-renders
+        return memo(buildRouter(route));
+    }, [route]);
+     
+    return (
+        <NavigatorContext.Provider value={{ navigate }}>
+            <RouteComponent />
+        </NavigatorContext.Provider>
+    )
+};
+
+const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
+    const {rt} = useUnistyles()
+    
+    const isDarkMode = rt.themeName === 'dark';
+
+    return (
+        <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+            <UnwrappedNavigatorProvider route={route} />
+        </NavigationContainer>
+    )
+};
+
+export { NavigatorProvider };
+
+
+export const useNavigator = () => {
+  return useContext(NavigatorContext);
 };

package/src/context/NavigatorContext.web.tsx

@@ -1,37 +1,37 @@
-import React, { createContext, memo, useContext, useMemo } from 'react';
-import { NavigateParams, NavigatorProviderProps } from './types';
-import { useNavigate } from "react-router-dom";
-import { buildRouter } from '../routing';
-
-const NavigatorContext = createContext<{
-    navigate: (params: NavigateParams) => void;
-}>({
-    navigate: () => {},
-});
-
-export const NavigatorProvider = ({ 
-    route,
-}: NavigatorProviderProps) => {
-    const routerNavigate = useNavigate();
-    
-    const navigateFunction = (params: NavigateParams) => {
-        if (params.path) {
-            routerNavigate(params.path);
-        }
-    };
-    
-    const RouteComponent = useMemo(() => {
-        // Memoize the router to prevent unnecessary re-renders
-        return memo(buildRouter(route));
-    }, [route]);
-    
-    return (
-        <NavigatorContext.Provider value={{ navigate: navigateFunction }}>
-            <RouteComponent />
-        </NavigatorContext.Provider>
-    );
-};
-
-export const useNavigator = () => {
-    return useContext(NavigatorContext);
+import React, { createContext, memo, useContext, useMemo } from 'react';
+import { NavigateParams, NavigatorProviderProps } from './types';
+import { useNavigate } from "react-router-dom";
+import { buildRouter } from '../routing';
+
+const NavigatorContext = createContext<{
+    navigate: (params: NavigateParams) => void;
+}>({
+    navigate: () => {},
+});
+
+export const NavigatorProvider = ({ 
+    route,
+}: NavigatorProviderProps) => {
+    const routerNavigate = useNavigate();
+    
+    const navigateFunction = (params: NavigateParams) => {
+        if (params.path) {
+            routerNavigate(params.path);
+        }
+    };
+    
+    const RouteComponent = useMemo(() => {
+        // Memoize the router to prevent unnecessary re-renders
+        return memo(buildRouter(route));
+    }, [route]);
+    
+    return (
+        <NavigatorContext.Provider value={{ navigate: navigateFunction }}>
+            <RouteComponent />
+        </NavigatorContext.Provider>
+    );
+};
+
+export const useNavigator = () => {
+    return useContext(NavigatorContext);
 }; 

package/src/context/index.native.ts

@@ -1,2 +1,2 @@
-export * from './NavigatorContext.native';
+export * from './NavigatorContext.native';
 export * from './types'; 

package/src/context/index.ts

@@ -1,2 +1,2 @@
-export * from './NavigatorContext.web';
+export * from './NavigatorContext.web';
 export * from './types'; 

package/src/context/index.web.ts

@@ -1,2 +1,2 @@
-export * from './NavigatorContext.web';
+export * from './NavigatorContext.web';
 export * from './types'; 

package/src/context/types.ts

@@ -1,13 +1,13 @@
-import { RouteParam } from "../routing";
-
-/**
- * When navigating to a new route, specify the path and the variables to be used in the route.
- */
-export type NavigateParams = {
-    path: string;
-    vars: Record<string, string>;
-};
-
-export type NavigatorProviderProps = {
-    route: RouteParam;
+import { RouteParam } from "../routing";
+
+/**
+ * When navigating to a new route, specify the path and the variables to be used in the route.
+ */
+export type NavigateParams = {
+    path: string;
+    vars: Record<string, string>;
+};
+
+export type NavigatorProviderProps = {
+    route: RouteParam;
 };

package/src/examples/ExampleDrawerRouter.tsx

@@ -1,159 +1,159 @@
-import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
-import { Screen, Text, View, Button } from "../../../components/src";
-import { UnistylesRuntime } from 'react-native-unistyles';
-import { RouteParam } from '../routing';
-import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
-
-const HomeDrawerScreen = () => {
-    const currentTheme = UnistylesRuntime.themeName || 'light';
-    
-    const cycleTheme = () => {
-        const nextTheme = getNextTheme(currentTheme);
-        UnistylesRuntime.setTheme(nextTheme as any);
-        console.log('Theme changed to:', nextTheme);
-    };
-
-    const toggleHighContrast = () => {
-        const currentTheme = UnistylesRuntime.themeName || 'light';
-        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';
-        }
-        
-        UnistylesRuntime.setTheme(newTheme as any);
-        console.log('Theme toggled to:', newTheme);
-    };
-    
-    return (
-        <Screen>
-            <View style={{ gap: 16 }}>
-                <Text size="large" weight="bold">
-                    Welcome to the Component Library
-                </Text>
-                <Text size="medium">
-                    Use the drawer menu to explore different components
-                </Text>
-                
-                <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8, marginTop: 8 }}>
-                    <Text size="medium" weight="semibold">
-                        Theme Controls
-                    </Text>
-                    <Text size="small">
-                        Current Theme: {getThemeDisplayName(currentTheme)}
-                    </Text>
-                    
-                    <View style={{ gap: 8 }}>
-                        <Button variant="outlined" onPress={cycleTheme}>
-                            🔄 Cycle Theme (Light → Dark → Light HC → Dark HC)
-                        </Button>
-                        
-                        <Button variant="outlined" onPress={toggleHighContrast}>
-                            ♿ Toggle High Contrast
-                        </Button>
-                    </View>
-                    
-                    {isHighContrastTheme(currentTheme) && (
-                        <Text size="small" style={{ fontStyle: 'italic' }}>
-                            ♿ High contrast mode is active for better accessibility
-                        </Text>
-                    )}
-                </View>
-            </View>
-        </Screen>
-    );
-};
-
-const AvatarDrawerScreen = () => (
-    <Screen>
-        <AvatarExamples />
-    </Screen>
-);
-
-const BadgeDrawerScreen = () => (
-    <Screen>
-        <BadgeExamples />
-    </Screen>
-);
-
-const ButtonDrawerScreen = () => (
-    <Screen>
-        <ButtonExamples />
-    </Screen>
-);
-
-const CardDrawerScreen = () => (
-    <Screen>
-        <CardExamples />
-    </Screen>
-);
-
-const CheckboxDrawerScreen = () => (
-    <Screen>
-        <CheckboxExamples />
-    </Screen>
-);
-
-const DividerDrawerScreen = () => (
-    <Screen>
-        <DividerExamples />
-    </Screen>
-);
-
-const InputDrawerScreen = () => (
-    <Screen>
-        <InputExamples />
-    </Screen>
-);
-
-const TextDrawerScreen = () => (
-    <Screen>
-        <TextExamples />
-    </Screen>
-);
-
-const ViewDrawerScreen = () => (
-    <Screen>   
-        <ViewExamples />
-    </Screen>
-);
-
-const IconDrawerScreen = () => (
-    <Screen>
-        <IconExamples />
-    </Screen>
-);
-
-const ThemeExtensionDrawerScreen = () => (
-    <Screen>
-        <ThemeExtensionExamples />
-    </Screen>
-);
-
-const DrawerRouter: RouteParam = {
-    path: "/",
-    component: HomeDrawerScreen,
-    layout: {
-        type: "drawer",
-    },
-    routes: [
-        { path: "avatar", component: AvatarDrawerScreen },
-        { path: "badge", component: BadgeDrawerScreen },
-        { path: "button", component: ButtonDrawerScreen },
-        { path: "card", component: CardDrawerScreen },
-        { path: "checkbox", component: CheckboxDrawerScreen },
-        { path: "divider", component: DividerDrawerScreen },
-        { path: "input", component: InputDrawerScreen },
-        { path: "text", component: TextDrawerScreen },
-        { path: "view", component: ViewDrawerScreen },
-        { path: "icon", component: IconDrawerScreen },
-        { path: "theme-extension", component: ThemeExtensionDrawerScreen },
-    ],
-};
-
+import React from 'react';
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { Screen, Text, View, Button } from "../../../components/src";
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { RouteParam } from '../routing';
+import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
+
+const HomeDrawerScreen = () => {
+    const currentTheme = UnistylesRuntime.themeName || 'light';
+    
+    const cycleTheme = () => {
+        const nextTheme = getNextTheme(currentTheme);
+        UnistylesRuntime.setTheme(nextTheme as any);
+        console.log('Theme changed to:', nextTheme);
+    };
+
+    const toggleHighContrast = () => {
+        const currentTheme = UnistylesRuntime.themeName || 'light';
+        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';
+        }
+        
+        UnistylesRuntime.setTheme(newTheme as any);
+        console.log('Theme toggled to:', newTheme);
+    };
+    
+    return (
+        <Screen>
+            <View style={{ gap: 16 }}>
+                <Text size="large" weight="bold">
+                    Welcome to the Component Library
+                </Text>
+                <Text size="medium">
+                    Use the drawer menu to explore different components
+                </Text>
+                
+                <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8, marginTop: 8 }}>
+                    <Text size="medium" weight="semibold">
+                        Theme Controls
+                    </Text>
+                    <Text size="small">
+                        Current Theme: {getThemeDisplayName(currentTheme)}
+                    </Text>
+                    
+                    <View style={{ gap: 8 }}>
+                        <Button variant="outlined" onPress={cycleTheme}>
+                            🔄 Cycle Theme (Light → Dark → Light HC → Dark HC)
+                        </Button>
+                        
+                        <Button variant="outlined" onPress={toggleHighContrast}>
+                            ♿ Toggle High Contrast
+                        </Button>
+                    </View>
+                    
+                    {isHighContrastTheme(currentTheme) && (
+                        <Text size="small" style={{ fontStyle: 'italic' }}>
+                            ♿ High contrast mode is active for better accessibility
+                        </Text>
+                    )}
+                </View>
+            </View>
+        </Screen>
+    );
+};
+
+const AvatarDrawerScreen = () => (
+    <Screen>
+        <AvatarExamples />
+    </Screen>
+);
+
+const BadgeDrawerScreen = () => (
+    <Screen>
+        <BadgeExamples />
+    </Screen>
+);
+
+const ButtonDrawerScreen = () => (
+    <Screen>
+        <ButtonExamples />
+    </Screen>
+);
+
+const CardDrawerScreen = () => (
+    <Screen>
+        <CardExamples />
+    </Screen>
+);
+
+const CheckboxDrawerScreen = () => (
+    <Screen>
+        <CheckboxExamples />
+    </Screen>
+);
+
+const DividerDrawerScreen = () => (
+    <Screen>
+        <DividerExamples />
+    </Screen>
+);
+
+const InputDrawerScreen = () => (
+    <Screen>
+        <InputExamples />
+    </Screen>
+);
+
+const TextDrawerScreen = () => (
+    <Screen>
+        <TextExamples />
+    </Screen>
+);
+
+const ViewDrawerScreen = () => (
+    <Screen>   
+        <ViewExamples />
+    </Screen>
+);
+
+const IconDrawerScreen = () => (
+    <Screen>
+        <IconExamples />
+    </Screen>
+);
+
+const ThemeExtensionDrawerScreen = () => (
+    <Screen>
+        <ThemeExtensionExamples />
+    </Screen>
+);
+
+const DrawerRouter: RouteParam = {
+    path: "/",
+    component: HomeDrawerScreen,
+    layout: {
+        type: "drawer",
+    },
+    routes: [
+        { path: "avatar", component: AvatarDrawerScreen },
+        { path: "badge", component: BadgeDrawerScreen },
+        { path: "button", component: ButtonDrawerScreen },
+        { path: "card", component: CardDrawerScreen },
+        { path: "checkbox", component: CheckboxDrawerScreen },
+        { path: "divider", component: DividerDrawerScreen },
+        { path: "input", component: InputDrawerScreen },
+        { path: "text", component: TextDrawerScreen },
+        { path: "view", component: ViewDrawerScreen },
+        { path: "icon", component: IconDrawerScreen },
+        { path: "theme-extension", component: ThemeExtensionDrawerScreen },
+    ],
+};
+
 export default DrawerRouter;