@idealyst/navigation 1.0.24 → 1.0.26

package/src/examples/index.ts

@@ -1,3 +1,3 @@
-export { default as ExampleStackRouter } from './ExampleStackRouter';
-export { default as ExampleTabRouter } from './ExampleTabRouter';
+export { default as ExampleStackRouter } from './ExampleStackRouter';
+export { default as ExampleTabRouter } from './ExampleTabRouter';
 export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';

package/src/examples/unistyles.ts

@@ -1,84 +1,84 @@
-import { breakpoints, defaultLightTheme, defaultDarkTheme } from '@idealyst/theme';
-import { highContrastThemes } from './highContrastThemes';
-import { StyleSheet } from 'react-native-unistyles';
-
-// Extend UnistylesThemes to include high contrast themes
-// This overrides the more limited declaration from the components package
-declare module 'react-native-unistyles' {
-  export interface UnistylesThemes {
-    light: typeof defaultLightTheme;
-    dark: typeof defaultDarkTheme;
-    lightHighContrast: typeof highContrastThemes.lightHighContrast;
-    darkHighContrast: typeof highContrastThemes.darkHighContrast;
-  }
-}
-
-// Configure with all themes, including high contrast variants
-// This will override any previous configuration
-StyleSheet.configure({
-  themes: {
-    light: defaultLightTheme,
-    dark: defaultDarkTheme,
-    lightHighContrast: highContrastThemes.lightHighContrast,
-    darkHighContrast: highContrastThemes.darkHighContrast,
-  },
-  settings: {
-    initialTheme: 'light',
-  },
-  breakpoints,
-});
-
-// Export theme names for easy reference
-export const availableThemes = [
-  'light',
-  'dark', 
-  'lightHighContrast',
-  'darkHighContrast'
-] as const;
-
-export type AvailableTheme = typeof availableThemes[number];
-
-// Helper function to get next theme in rotation
-export function getNextTheme(currentTheme: string): AvailableTheme {
-  const currentIndex = availableThemes.indexOf(currentTheme as AvailableTheme);
-  const nextIndex = (currentIndex + 1) % availableThemes.length;
-  return availableThemes[nextIndex];
-}
-
-// Helper function to get theme display name
-export function getThemeDisplayName(theme: string): string {
-  switch (theme) {
-    case 'light':
-      return 'Light';
-    case 'dark':
-      return 'Dark';
-    case 'lightHighContrast':
-      return 'Light High Contrast';
-    case 'darkHighContrast':
-      return 'Dark High Contrast';
-    default:
-      return theme;
-  }
-}
-
-// Helper function to check if theme is high contrast
-export function isHighContrastTheme(theme: string): boolean {
-  return theme.includes('HighContrast');
-}
-
-// Helper function to get matching theme mode
-export function getThemeMode(theme: string): 'light' | 'dark' {
-  return theme.includes('dark') ? 'dark' : 'light';
-}
-
-// Helper function to get high contrast variant of current theme
-export function getHighContrastVariant(theme: string): AvailableTheme {
-  const mode = getThemeMode(theme);
-  return mode === 'dark' ? 'darkHighContrast' : 'lightHighContrast';
-}
-
-// Helper function to get standard variant of current theme
-export function getStandardVariant(theme: string): AvailableTheme {
-  const mode = getThemeMode(theme);
-  return mode === 'dark' ? 'dark' : 'light';
+import { breakpoints, defaultLightTheme, defaultDarkTheme } from '@idealyst/theme';
+import { highContrastThemes } from './highContrastThemes';
+import { StyleSheet } from 'react-native-unistyles';
+
+// Extend UnistylesThemes to include high contrast themes
+// This overrides the more limited declaration from the components package
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes {
+    light: typeof defaultLightTheme;
+    dark: typeof defaultDarkTheme;
+    lightHighContrast: typeof highContrastThemes.lightHighContrast;
+    darkHighContrast: typeof highContrastThemes.darkHighContrast;
+  }
+}
+
+// Configure with all themes, including high contrast variants
+// This will override any previous configuration
+StyleSheet.configure({
+  themes: {
+    light: defaultLightTheme,
+    dark: defaultDarkTheme,
+    lightHighContrast: highContrastThemes.lightHighContrast,
+    darkHighContrast: highContrastThemes.darkHighContrast,
+  },
+  settings: {
+    initialTheme: 'light',
+  },
+  breakpoints,
+});
+
+// Export theme names for easy reference
+export const availableThemes = [
+  'light',
+  'dark', 
+  'lightHighContrast',
+  'darkHighContrast'
+] as const;
+
+export type AvailableTheme = typeof availableThemes[number];
+
+// Helper function to get next theme in rotation
+export function getNextTheme(currentTheme: string): AvailableTheme {
+  const currentIndex = availableThemes.indexOf(currentTheme as AvailableTheme);
+  const nextIndex = (currentIndex + 1) % availableThemes.length;
+  return availableThemes[nextIndex];
+}
+
+// Helper function to get theme display name
+export function getThemeDisplayName(theme: string): string {
+  switch (theme) {
+    case 'light':
+      return 'Light';
+    case 'dark':
+      return 'Dark';
+    case 'lightHighContrast':
+      return 'Light High Contrast';
+    case 'darkHighContrast':
+      return 'Dark High Contrast';
+    default:
+      return theme;
+  }
+}
+
+// Helper function to check if theme is high contrast
+export function isHighContrastTheme(theme: string): boolean {
+  return theme.includes('HighContrast');
+}
+
+// Helper function to get matching theme mode
+export function getThemeMode(theme: string): 'light' | 'dark' {
+  return theme.includes('dark') ? 'dark' : 'light';
+}
+
+// Helper function to get high contrast variant of current theme
+export function getHighContrastVariant(theme: string): AvailableTheme {
+  const mode = getThemeMode(theme);
+  return mode === 'dark' ? 'darkHighContrast' : 'lightHighContrast';
+}
+
+// Helper function to get standard variant of current theme
+export function getStandardVariant(theme: string): AvailableTheme {
+  const mode = getThemeMode(theme);
+  return mode === 'dark' ? 'dark' : 'light';
 }

package/src/index.ts

@@ -1,5 +1,5 @@
-// Web-specific exports
-export * from './context';
-
-// Layout components
+// Web-specific exports
+export * from './context';
+
+// Layout components
 export * from './layouts';

package/src/layouts/GeneralLayout/GeneralLayout.styles.ts

@@ -1,55 +1,55 @@
-// Simple style objects for the GeneralLayout
-export const generalLayoutStyles = {
-  container: {
-    display: 'flex',
-    width: '100%',
-    height: '100vh',
-    overflow: 'hidden',
-  } as const,
-  
-  headerContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    zIndex: 100,
-  } as const,
-  
-  bodyContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    flex: 1,
-    overflow: 'hidden',
-  } as const,
-  
-  sidebar: {
-    display: 'flex',
-    flexDirection: 'column',
-    transition: 'width 0.3s ease-in-out',
-    overflow: 'hidden',
-    zIndex: 50,
-  } as const,
-  
-  sidebarContent: {
-    flex: 1,
-    overflow: 'auto',
-  } as const,
-  
-  sidebarToggle: {
-    alignSelf: 'flex-end',
-    margin: '8px',
-    marginBottom: '16px',
-  } as const,
-  
-  mainContent: {
-    flex: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'auto',
-    order: 2,
-  } as const,
-  
-  contentArea: {
-    flex: 1,
-    overflow: 'auto',
-  } as const,
-};
+// Simple style objects for the GeneralLayout
+export const generalLayoutStyles = {
+  container: {
+    display: 'flex',
+    width: '100%',
+    height: '100vh',
+    overflow: 'hidden',
+  } as const,
+  
+  headerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    zIndex: 100,
+  } as const,
+  
+  bodyContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    flex: 1,
+    overflow: 'hidden',
+  } as const,
+  
+  sidebar: {
+    display: 'flex',
+    flexDirection: 'column',
+    transition: 'width 0.3s ease-in-out',
+    overflow: 'hidden',
+    zIndex: 50,
+  } as const,
+  
+  sidebarContent: {
+    flex: 1,
+    overflow: 'auto',
+  } as const,
+  
+  sidebarToggle: {
+    alignSelf: 'flex-end',
+    margin: '8px',
+    marginBottom: '16px',
+  } as const,
+  
+  mainContent: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'auto',
+    order: 2,
+  } as const,
+  
+  contentArea: {
+    flex: 1,
+    overflow: 'auto',
+  } as const,
+};

package/src/layouts/GeneralLayout/GeneralLayout.tsx

@@ -1,144 +1,144 @@
-import React, { useState, useCallback } from 'react';
-import { View, Button, Text } from '@idealyst/components';
-import { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';
-import { generalLayoutStyles } from './GeneralLayout.styles';
-
-const GeneralLayout: React.FC<GeneralLayoutProps> = ({
-  children,
-  sidebar = {},
-  header = {},
-  style,
-  testID,
-}) => {
-  // Default sidebar configuration
-  const sidebarConfig: Required<SidebarConfig> = {
-    enabled: true,
-    initiallyExpanded: true,
-    expandedWidth: 280,
-    collapsedWidth: 60,
-    collapsible: true,
-    position: 'left',
-    content: null,
-    style: undefined,
-    ...sidebar,
-  };
-
-  // Default header configuration
-  const headerConfig: Required<HeaderConfig> = {
-    enabled: true,
-    height: 64,
-    content: null,
-    style: undefined,
-    ...header,
-  };
-
-  // State for sidebar expansion
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState(
-    sidebarConfig.initiallyExpanded
-  );
-
-  // Toggle sidebar expansion
-  const toggleSidebar = useCallback(() => {
-    if (sidebarConfig.collapsible) {
-      setIsSidebarExpanded((prev) => !prev);
-    }
-  }, [sidebarConfig.collapsible]);
-
-  // Calculate sidebar width based on expanded state
-  const sidebarWidth = isSidebarExpanded 
-    ? sidebarConfig.expandedWidth 
-    : sidebarConfig.collapsedWidth;
-
-  // Create dynamic styles for sidebar width
-  const sidebarDynamicStyles = {
-    width: sidebarWidth,
-    minWidth: sidebarWidth,
-    maxWidth: sidebarWidth,
-    order: sidebarConfig.position === 'right' ? 3 : 1,
-  };
-
-  // Create dynamic styles for header height
-  const headerDynamicStyles = {
-    height: headerConfig.height,
-    minHeight: headerConfig.height,
-  };
-
-  return (
-    <View 
-      background="transparent"
-      style={[
-        generalLayoutStyles.container,
-        style,
-      ]}
-      testID={testID}
-    >
-      {/* Header */}
-      {headerConfig.enabled && (
-        <View 
-          background="surface"
-          border="thin"
-          spacing="md"
-          style={[
-            generalLayoutStyles.headerContainer,
-            headerDynamicStyles,
-            headerConfig.style,
-          ]}
-        >
-          {headerConfig.content}
-        </View>
-      )}
-
-      {/* Body Container */}
-      <View style={generalLayoutStyles.bodyContainer}>
-        {/* Sidebar */}
-        {sidebarConfig.enabled && (
-          <View 
-            background="surface"
-            border="thin"
-            spacing="md"
-            style={[
-              generalLayoutStyles.sidebar,
-              sidebarDynamicStyles,
-              sidebarConfig.style,
-            ]}
-          >
-            {/* Sidebar Toggle Button - Positioned within sidebar using flexbox */}
-            {sidebarConfig.collapsible && (
-              <Button
-                onPress={toggleSidebar}
-                variant="outlined"
-                size="small"
-                style={[
-                  generalLayoutStyles.sidebarToggle,
-                  // Align toggle button based on sidebar position
-                  { alignSelf: sidebarConfig.position === 'right' ? 'flex-start' : 'flex-end' }
-                ]}
-              >
-                  {sidebarConfig.position === 'right' 
-                    ? (isSidebarExpanded ? '→' : '←')
-                    : (isSidebarExpanded ? '←' : '→')
-                  }
-              </Button>
-            )}
-
-            {/* Sidebar Content */}
-            <View style={generalLayoutStyles.sidebarContent}>
-              {sidebarConfig.content}
-            </View>
-          </View>
-        )}
-
-        {/* Main Content Area */}
-        <View style={generalLayoutStyles.mainContent}>
-          <View 
-            style={generalLayoutStyles.contentArea}
-          >
-            {children}
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default GeneralLayout;
+import React, { useState, useCallback } from 'react';
+import { View, Button, Text } from '@idealyst/components';
+import { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';
+import { generalLayoutStyles } from './GeneralLayout.styles';
+
+const GeneralLayout: React.FC<GeneralLayoutProps> = ({
+  children,
+  sidebar = {},
+  header = {},
+  style,
+  testID,
+}) => {
+  // Default sidebar configuration
+  const sidebarConfig: Required<SidebarConfig> = {
+    enabled: true,
+    initiallyExpanded: true,
+    expandedWidth: 280,
+    collapsedWidth: 60,
+    collapsible: true,
+    position: 'left',
+    content: null,
+    style: undefined,
+    ...sidebar,
+  };
+
+  // Default header configuration
+  const headerConfig: Required<HeaderConfig> = {
+    enabled: true,
+    height: 64,
+    content: null,
+    style: undefined,
+    ...header,
+  };
+
+  // State for sidebar expansion
+  const [isSidebarExpanded, setIsSidebarExpanded] = useState(
+    sidebarConfig.initiallyExpanded
+  );
+
+  // Toggle sidebar expansion
+  const toggleSidebar = useCallback(() => {
+    if (sidebarConfig.collapsible) {
+      setIsSidebarExpanded((prev) => !prev);
+    }
+  }, [sidebarConfig.collapsible]);
+
+  // Calculate sidebar width based on expanded state
+  const sidebarWidth = isSidebarExpanded 
+    ? sidebarConfig.expandedWidth 
+    : sidebarConfig.collapsedWidth;
+
+  // Create dynamic styles for sidebar width
+  const sidebarDynamicStyles = {
+    width: sidebarWidth,
+    minWidth: sidebarWidth,
+    maxWidth: sidebarWidth,
+    order: sidebarConfig.position === 'right' ? 3 : 1,
+  };
+
+  // Create dynamic styles for header height
+  const headerDynamicStyles = {
+    height: headerConfig.height,
+    minHeight: headerConfig.height,
+  };
+
+  return (
+    <View 
+      background="transparent"
+      style={[
+        generalLayoutStyles.container,
+        style,
+      ]}
+      testID={testID}
+    >
+      {/* Header */}
+      {headerConfig.enabled && (
+        <View 
+          background="surface"
+          border="thin"
+          spacing="md"
+          style={[
+            generalLayoutStyles.headerContainer,
+            headerDynamicStyles,
+            headerConfig.style,
+          ]}
+        >
+          {headerConfig.content}
+        </View>
+      )}
+
+      {/* Body Container */}
+      <View style={generalLayoutStyles.bodyContainer}>
+        {/* Sidebar */}
+        {sidebarConfig.enabled && (
+          <View 
+            background="surface"
+            border="thin"
+            spacing="md"
+            style={[
+              generalLayoutStyles.sidebar,
+              sidebarDynamicStyles,
+              sidebarConfig.style,
+            ]}
+          >
+            {/* Sidebar Toggle Button - Positioned within sidebar using flexbox */}
+            {sidebarConfig.collapsible && (
+              <Button
+                onPress={toggleSidebar}
+                variant="outlined"
+                size="small"
+                style={[
+                  generalLayoutStyles.sidebarToggle,
+                  // Align toggle button based on sidebar position
+                  { alignSelf: sidebarConfig.position === 'right' ? 'flex-start' : 'flex-end' }
+                ]}
+              >
+                  {sidebarConfig.position === 'right' 
+                    ? (isSidebarExpanded ? '→' : '←')
+                    : (isSidebarExpanded ? '←' : '→')
+                  }
+              </Button>
+            )}
+
+            {/* Sidebar Content */}
+            <View style={generalLayoutStyles.sidebarContent}>
+              {sidebarConfig.content}
+            </View>
+          </View>
+        )}
+
+        {/* Main Content Area */}
+        <View style={generalLayoutStyles.mainContent}>
+          <View 
+            style={generalLayoutStyles.contentArea}
+          >
+            {children}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default GeneralLayout;

package/src/layouts/GeneralLayout/index.ts

@@ -1,2 +1,2 @@
-export { default as GeneralLayout } from './GeneralLayout';
-export type { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';
+export { default as GeneralLayout } from './GeneralLayout';
+export type { GeneralLayoutProps, SidebarConfig, HeaderConfig } from './types';