@umituz/react-native-design-system 2.1.3 → 2.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -105,4 +105,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/organisms/ScreenLayout.tsx

@@ -25,7 +25,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { SafeAreaView, Edge } from 'react-native-safe-area-context';
+import { SafeAreaView, type Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../theme';
 
 /**

package/src/safe-area/components/SafeAreaProvider.tsx

@@ -6,7 +6,7 @@
 import React, { createContext, useContext } from 'react';
 import {
   SafeAreaProvider as NativeSafeAreaProvider,
-  SafeAreaProviderProps as NativeSafeAreaProviderProps,
+  type SafeAreaProviderProps as NativeSafeAreaProviderProps,
 } from 'react-native-safe-area-context';
 import { DEFAULT_CONFIG } from '../constants';
 
@@ -19,6 +19,7 @@ export interface SafeAreaConfig {
 }
 
 export interface SafeAreaProviderProps extends NativeSafeAreaProviderProps {
+  children?: React.ReactNode;
   config?: SafeAreaConfig;
 }
 

package/src/theme/hooks/useAppDesignTokens.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useDesignSystemTheme } from '../infrastructure/globalThemeStore';
+import { createDesignTokens, type DesignTokens } from '../core/TokenFactory';
+
+/**
+ * Hook to access current design tokens (colors, spacing, typography, etc.)
+ * 
+ * This hook is the primary way for components to access theme tokens.
+ * It automatically updates when the theme mode or custom colors change
+ * in the design system global store.
+ * 
+ * @returns {DesignTokens} The current design tokens
+ * 
+ * @example
+ * ```tsx
+ * const tokens = useAppDesignTokens();
+ * return <View style={{ backgroundColor: tokens.colors.backgroundPrimary }} />;
+ * ```
+ */
+export const useAppDesignTokens = (): DesignTokens => {
+    const { themeMode, customColors } = useDesignSystemTheme();
+
+    return useMemo(
+        () => createDesignTokens(themeMode, customColors),
+        [themeMode, customColors]
+    );
+};

package/src/theme/hooks/useThemedStyles.ts

@@ -53,16 +53,3 @@ export function useThemedStyleSheet<T extends NamedStyles<T>>(
     [theme, styleFactory],
   );
 }
-
-
-
-
-
-
-
-
-
-
-
-
-