@idealyst/navigation 1.0.82 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -31,6 +31,11 @@
       "import": "./src/examples/unistyles.ts",
       "require": "./src/examples/unistyles.ts",
       "types": "./src/examples/unistyles.ts"
+    },
+    "./router": {
+      "import": "./src/router/index.ts",
+      "require": "./src/router/index.ts",
+      "types": "./src/router/index.ts"
     }
   },
   "scripts": {
@@ -38,25 +43,26 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.82",
-    "@idealyst/theme": "^1.0.82",
-    "@react-navigation/bottom-tabs": "^7.0.0",
-    "@react-navigation/drawer": "^7.0.0",
-    "@react-navigation/native": "^7.0.0",
-    "@react-navigation/native-stack": "^7.0.0",
+    "@idealyst/components": "^1.0.83",
+    "@idealyst/theme": "^1.0.83",
+    "@react-navigation/bottom-tabs": ">=7.0.0",
+    "@react-navigation/drawer": ">=7.0.0",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-gesture-handler": "*",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-screens": "*",
-    "react-native-unistyles": "^3.0.10",
-    "react-router": "^7.6.3",
-    "react-router-dom": "^7.6.3"
+    "react-native-unistyles": ">=3.0.0",
+    "react-router": ">=6.0.0",
+    "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "react-router": "7.9.1",
     "typescript": "^5.0.0"
   },
   "files": [

package/src/context/NavigatorContext.web.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useNavigate, useParams } from '../router';
 import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
 import { buildNavigator } from '../routing';
 
@@ -7,7 +7,7 @@ const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
 });
 
-export const NavigatorProvider = ({ 
+export const NavigatorProvider = ({
     route,
 }: NavigatorProviderProps) => {
     const reactRouterNavigate = useNavigate()

package/src/examples/ExampleStackRouter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SelectExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
 import { DataGridShowcase } from "../../../datagrid/src/examples";
 import { DatePickerExamples } from "../../../datepicker/src/examples";
 import { Button, Divider, Screen, Text, View } from "../../../components/src";
@@ -192,6 +192,15 @@ const HomeScreen = () => {
                     }}>
                     Popover
                 </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/select",
+                            vars: {},
+                        });
+                    }}>
+                    Select
+                </Button>
                 
                 <Divider spacing="medium" />
                 <Text size="small" weight="semibold" color="secondary">Data Components</Text>
@@ -257,6 +266,7 @@ const StackRouter: NavigatorParam = {
         { path: "svg-image", type: 'screen', component: SVGImageExamples},
         { path: "dialog", type: 'screen', component: DialogExamples},
         { path: "popover", type: 'screen', component: PopoverExamples},
+        { path: "select", type: 'screen', component: SelectExamples},
         { path: "datagrid", type: 'screen', component: DataGridShowcase},
         { path: "datepicker", type: 'screen', component: DatePickerExamples},
         { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples},

package/src/hooks/useParams.web.ts

@@ -1,4 +1,4 @@
-import { useParams as useReactRouterParams } from 'react-router';
+import { useParams as useReactRouterParams } from '../router';
 
 /**
  * Custom useParams hook that wraps React Router's useParams

package/src/index.web.ts

@@ -1,5 +1,5 @@
 // Web-specific exports
 export * from './index';
 
-// Re-export React Router components to ensure single instance
-export { Outlet } from 'react-router';
+// Direct export to fix module resolution
+export { NavigatorProvider, useNavigator } from './context/NavigatorContext.web';

package/src/layouts/DefaultStackLayout.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { View, Text } from '@idealyst/components'
 import { StackLayoutProps } from '../routing/types'
-import { Outlet } from '..'
-
+import { Outlet } from '../router'
 export interface DefaultStackLayoutProps extends StackLayoutProps {
     onNavigate: (path: string) => void
     currentPath: string

package/src/layouts/DefaultTabLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text, Button, Icon } from '@idealyst/components'
 import { TabLayoutProps } from '../routing/types'
-import { Outlet } from '..'
+import { Outlet } from '../router'
 
 export interface DefaultTabLayoutProps extends TabLayoutProps {}
 

package/src/router/index.native.ts

@@ -0,0 +1,17 @@
+// Native platforms don't use React Router
+// This is a stub to maintain cross-platform compatibility
+
+export const BrowserRouter = null;
+export const HashRouter = null;
+export const MemoryRouter = null;
+export const Router = null;
+export const useNavigate = () => null;
+export const useLocation = () => null;
+export const useParams = () => null;
+export const useSearchParams = () => null;
+export const Navigate = null;
+export const Outlet = null;
+export const Route = null;
+export const Routes = null;
+export const Link = null;
+export const NavLink = null;

package/src/router/index.ts

@@ -0,0 +1,3 @@
+// Platform-specific exports will be used
+// This file exists for TypeScript resolution
+// The actual exports come from platform-specific files

package/src/router/index.web.ts

@@ -0,0 +1,6 @@
+// Export all React Router modules from a centralized location
+// This prevents duplication issues when multiple packages need React Router
+
+// Re-export everything from react-router-dom
+// This includes all react-router exports plus the DOM-specific ones
+export * from 'react-router-dom';

package/src/routing/index.native.tsx

@@ -1,6 +1,2 @@
 export * from './router.native';
 export * from './types';
-
-// Added for consistency
-const Outlet = null
-export { Outlet };

package/src/routing/index.web.tsx

@@ -1,4 +1,2 @@
 export * from './router.web';
-export * from './types'; 
-
-export { Outlet } from 'react-router';
+export * from './types';

package/src/routing/router.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Routes, Route } from 'react-router'
+import { Routes, Route } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
 import { NavigatorParam, RouteParam } from './types'