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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "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/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]
+    );
+};