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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.1.1",
+  "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",

package/src/index.ts

@@ -176,6 +176,7 @@ export {
   BaseModal,
   ConfirmationModal,
   useConfirmationModal,
+  StepProgress,
   type BaseModalProps,
 } from './molecules';
 

package/src/molecules/StepProgress/StepProgress.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
+
+export interface StepProgressProps {
+    currentStep: number;
+    totalSteps: number;
+    style?: ViewStyle;
+}
+
+export const StepProgress: React.FC<StepProgressProps> = ({
+    currentStep,
+    totalSteps,
+    style,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const styles = useMemo(
+        () =>
+            StyleSheet.create({
+                container: {
+                    flexDirection: "row",
+                    gap: 8,
+                    paddingHorizontal: 24,
+                    paddingVertical: 16,
+                },
+                step: {
+                    flex: 1,
+                    height: 4,
+                    borderRadius: 2,
+                    backgroundColor: tokens.colors.border,
+                },
+                activeStep: {
+                    backgroundColor: tokens.colors.primary,
+                },
+            }),
+        [tokens],
+    );
+
+    return (
+        <View style={[styles.container, style]}>
+            {Array.from({ length: totalSteps }).map((_, index) => (
+                <View
+                    key={index}
+                    style={[styles.step, index < currentStep && styles.activeStep]}
+                />
+            ))}
+        </View>
+    );
+};

package/src/molecules/StepProgress/index.ts

@@ -0,0 +1 @@
+export * from "./StepProgress";

package/src/molecules/index.ts

@@ -21,3 +21,4 @@ export type {
 
 // Divider
 export * from './Divider';
+export * from "./StepProgress";

package/src/theme/hooks/useAppDesignTokens.ts

@@ -1,45 +1,27 @@
-/**
- * useAppDesignTokens Hook - Theme-Aware Design Tokens
- *
- * ✅ Automatically reads theme from global store
- * ✅ No parameters needed - fully automatic!
- * ✅ Returns tokens for current theme (light/dark)
- * ✅ Single source of truth
- *
- * @example Usage (fully automatic theme-aware)
- * ```typescript
- * import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
- *
- * const MyComponent = () => {
- *   const tokens = useAppDesignTokens(); // Automatically uses current theme!
- *   return (
- *     <View style={{
- *       backgroundColor: tokens.colors.primary,
- *       padding: tokens.spacing.md
- *     }}>
- *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
- *     </View>
- *   );
- * };
- * ```
- *
- * How it works:
- * - Reads themeMode from global store (useDesignSystemTheme)
- * - App's theme store syncs to global store automatically
- * - All components get correct tokens without prop drilling
- * - Change theme once, everything updates!
- */
-
 import { useMemo } from 'react';
-import { createDesignTokens, type DesignTokens } from '../core/TokenFactory';
 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(() => {
-    const mode = themeMode === 'dark' ? 'dark' : 'light';
-    return createDesignTokens(mode, customColors);
-  }, [themeMode, customColors]);
-};
+    const { themeMode, customColors } = useDesignSystemTheme();
 
+    return useMemo(
+        () => createDesignTokens(themeMode, customColors),
+        [themeMode, customColors]
+    );
+};