@umituz/react-native-design-system 1.0.0 → 1.0.2

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "scripts": {
+    "version:patch": "npm version patch -m 'chore: release v%s'",
+    "version:minor": "npm version minor -m 'chore: release v%s'",
+    "version:major": "npm version major -m 'chore: release v%s'"
+  },
   "keywords": [
     "react-native",
     "design-system",
@@ -13,19 +18,20 @@
     "ddd",
     "domain-driven-design"
   ],
-  "author": "Umit Uz",
+  "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/umituz/react-native-design-system"
   },
   "peerDependencies": {
-    "react": "18.3.1",
-    "react-native": "0.76.3",
+    "react": ">=18.2.0",
+    "react-native": ">=0.74.0",
     "react-native-paper": "^5.12.5",
     "react-native-reanimated": "~3.10.1",
     "@react-native-community/datetimepicker": "8.0.1",
-    "@expo/vector-icons": "^14.0.0"
+    "@expo/vector-icons": "^14.0.0",
+    "lucide-react-native": "^0.468.0"
   },
   "peerDependenciesMeta": {
     "@react-native-community/datetimepicker": {

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,43 +1,17 @@
 /**
- * useAppDesignTokens Hook - Dynamic Theme-Aware Design Tokens
+ * useAppDesignTokens Hook - Design Tokens Access
  *
- * ✅ ZERO DUPLICATION - Uses TokenFactory (Single Source of Truth)
- * ✅ DYNAMIC theme switching (light/dark)
+ * ✅ NPM PACKAGE VERSION - Standalone, no theme dependencies
+ * ✅ Returns static light theme tokens
  * ✅ Type-safe design tokens
- * ✅ Automatic re-render on theme change
- * ✅ Graceful fallback to light theme
- * ✅ NO CIRCULAR DEPENDENCY - Relative imports break barrel export cycle
+ * ✅ Zero external dependencies
  *
- * CRITICAL: Uses RELATIVE imports to break circular dependency!
- * - Relative import for useTheme (not barrel '@domains/theme')
- * - Relative import for TokenFactory (not barrel through AppDesignTokens)
- * - NOT exported from AppDesignTokens.ts (only from design-system/index.ts)
- *
- * This architecture prevents cycle:
- * - useAppDesignTokens → useTheme (relative, not through barrel)
- * - theme → design-system (through barrel, but useAppDesignTokens not in token barrel)
- * - No cycle detected!
- *
- * @module useAppDesignTokens
- */
-
-import { useMemo } from 'react';
-import { useTheme } from '../../../theme/infrastructure/stores/themeStore';
-import { createDesignTokens, STATIC_DESIGN_TOKENS, type ThemeMode } from '../tokens/core/TokenFactory';
-
-/**
- * 🎯 DYNAMIC DESIGN TOKENS HOOK
- *
- * USE THIS HOOK in all components for theme-aware design tokens!
- *
- * ✅ Colors are DYNAMIC (update when theme changes)
- * ✅ Typography, spacing, etc. are STATIC (performance optimization)
- * ✅ Automatic re-render on theme change
- * ✅ Zero duplication (uses TokenFactory)
+ * NOTE: This is the npm package version which returns light theme only.
+ * For dynamic theme switching, apps should use @domains/theme ThemeProvider.
  *
  * @example
  * ```typescript
- * import { useAppDesignTokens } from '@domains/design-system';
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system';
  *
  * const MyComponent = () => {
  *   const tokens = useAppDesignTokens();
@@ -53,26 +27,11 @@ import { createDesignTokens, STATIC_DESIGN_TOKENS, type ThemeMode } from '../tok
  * };
  * ```
  */
-export const useAppDesignTokens = () => {
-  // ✅ Hooks must be called unconditionally at the top level
-  const { theme, themeMode: mode } = useTheme();
 
-  return useMemo(() => {
-    try {
-      // Validate theme mode
-      const themeMode: ThemeMode = mode === 'dark' ? 'dark' : 'light';
+import { STATIC_DESIGN_TOKENS } from '../tokens/core/TokenFactory';
 
-      // Validate theme colors exist
-      if (!theme?.colors || typeof theme.colors !== 'object' || !theme.colors.primary) {
-        console.warn('useAppDesignTokens: Invalid theme, using light theme fallback');
-        return STATIC_DESIGN_TOKENS; // Fallback to light theme
-      }
-
-      // ✅ Create tokens using TokenFactory (ZERO duplication!)
-      return createDesignTokens(themeMode);
-    } catch (error) {
-      console.warn('useAppDesignTokens: Error accessing theme, using fallback:', error);
-      return STATIC_DESIGN_TOKENS; // Fallback to light theme
-    }
-  }, [theme?.colors, mode]); // Re-compute when colors or mode changes
+export const useAppDesignTokens = () => {
+  // NPM package version: Always return light theme
+  // Apps using factory generator will override this with theme-aware version
+  return STATIC_DESIGN_TOKENS;
 };

package/src/presentation/tokens/core/ColorPalette.ts

@@ -41,19 +41,19 @@ export const withAlpha = (hexColor: string, alpha: number): string => {
 
 export const lightColors = {
   // =============================================================================
-  // PRIMARY BRAND COLORS (from theme template)
+  // PRIMARY BRAND COLORS
   // =============================================================================
-  primary: '{{PRIMARY_COLOR}}',
-  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
-  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+  primary: '#3B82F6',
+  primaryLight: '#60A5FA',
+  primaryDark: '#2563EB',
 
-  secondary: '{{SECONDARY_COLOR}}',
-  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
-  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+  secondary: '#8B5CF6',
+  secondaryLight: '#A78BFA',
+  secondaryDark: '#7C3AED',
 
-  accent: '{{ACCENT_COLOR}}',
-  accentLight: '{{ACCENT_LIGHT_COLOR}}',
-  accentDark: '{{ACCENT_DARK_COLOR}}',
+  accent: '#F59E0B',
+  accentLight: '#FBBF24',
+  accentDark: '#D97706',
 
   // =============================================================================
   // MATERIAL DESIGN 3 - ON COLORS (Text on colored backgrounds)
@@ -129,43 +129,43 @@ export const lightColors = {
   gray900: '#18181B',
 
   // =============================================================================
-  // BACKGROUND COLORS (from theme template)
+  // BACKGROUND COLORS
   // =============================================================================
-  backgroundPrimary: '{{BACKGROUND_COLOR}}',
-  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+  backgroundPrimary: '#FFFFFF',
+  backgroundSecondary: '#F8FAFC',
 
-  surface: '{{SURFACE_COLOR}}',
-  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
-  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surface: '#FFFFFF',
+  surfaceVariant: '#F1F5F9',
+  surfaceSecondary: '#F1F5F9', // Alias
   surfaceDisabled: '#F4F4F5',     // Disabled surface color
 
   // =============================================================================
-  // TEXT COLORS (from theme template)
+  // TEXT COLORS
   // =============================================================================
-  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
-  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
-  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
-  textDisabled: '{{TEXT_DISABLED_COLOR}}',
-  textInverse: '{{TEXT_INVERSE_COLOR}}',
+  textPrimary: '#1E293B',
+  textSecondary: '#64748B',
+  textTertiary: '#94A3B8',
+  textDisabled: '#CBD5E1',
+  textInverse: '#FFFFFF',
 
   // =============================================================================
-  // BORDER COLORS (from theme template)
+  // BORDER COLORS
   // =============================================================================
-  border: '{{BORDER_COLOR}}',
-  borderLight: '{{BORDER_LIGHT_COLOR}}',
-  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
-  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+  border: '#E2E8F0',
+  borderLight: '#F1F5F9',
+  borderMedium: '#CBD5E1',
+  borderFocus: '#3B82F6',
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS
   // =============================================================================
-  buttonPrimary: '{{PRIMARY_COLOR}}',
-  buttonSecondary: '{{SECONDARY_COLOR}}',
+  buttonPrimary: '#3B82F6',
+  buttonSecondary: '#8B5CF6',
 
-  inputBackground: '{{SURFACE_COLOR}}',
-  inputBorder: '{{BORDER_COLOR}}',
+  inputBackground: '#FFFFFF',
+  inputBorder: '#E2E8F0',
 
-  cardBackground: '{{SURFACE_COLOR}}',
+  cardBackground: '#FFFFFF',
 
   // =============================================================================
   // SPECIAL COLORS
@@ -204,7 +204,7 @@ export const lightColors = {
   // =============================================================================
   // GRADIENTS
   // =============================================================================
-  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+  gradient: ['#3B82F6', '#8B5CF6'],
 };
 
 // =============================================================================
@@ -215,17 +215,17 @@ export const darkColors = {
   // =============================================================================
   // PRIMARY BRAND COLORS (dark mode specific colors)
   // =============================================================================
-  primary: '{{PRIMARY_COLOR}}',
-  primaryLight: '{{PRIMARY_LIGHT_COLOR}}',
-  primaryDark: '{{PRIMARY_DARK_COLOR}}',
+  primary: '#3B82F6',
+  primaryLight: '#60A5FA',
+  primaryDark: '#2563EB',
 
-  secondary: '{{SECONDARY_COLOR}}',
-  secondaryLight: '{{SECONDARY_LIGHT_COLOR}}',
-  secondaryDark: '{{SECONDARY_DARK_COLOR}}',
+  secondary: '#8B5CF6',
+  secondaryLight: '#A78BFA',
+  secondaryDark: '#7C3AED',
 
-  accent: '{{ACCENT_COLOR}}',
-  accentLight: '{{ACCENT_LIGHT_COLOR}}',
-  accentDark: '{{ACCENT_DARK_COLOR}}',
+  accent: '#F59E0B',
+  accentLight: '#FBBF24',
+  accentDark: '#D97706',
 
   // =============================================================================
   // MATERIAL DESIGN 3 - ON COLORS (Same as light mode for type consistency)
@@ -303,41 +303,41 @@ export const darkColors = {
   // =============================================================================
   // BACKGROUND COLORS (dark mode specific colors)
   // =============================================================================
-  backgroundPrimary: '{{BACKGROUND_COLOR}}',
-  backgroundSecondary: '{{BACKGROUND_SECONDARY_COLOR}}',
+  backgroundPrimary: '#FFFFFF',
+  backgroundSecondary: '#F8FAFC',
 
-  surface: '{{SURFACE_COLOR}}',
-  surfaceVariant: '{{SURFACE_SECONDARY_COLOR}}',
-  surfaceSecondary: '{{SURFACE_SECONDARY_COLOR}}', // Alias
+  surface: '#FFFFFF',
+  surfaceVariant: '#F1F5F9',
+  surfaceSecondary: '#F1F5F9', // Alias
   surfaceDisabled: '#F4F4F5',     // Same as light mode for type consistency
 
   // =============================================================================
   // TEXT COLORS (same as light mode for type consistency)
   // =============================================================================
-  textPrimary: '{{TEXT_PRIMARY_COLOR}}',
-  textSecondary: '{{TEXT_SECONDARY_COLOR}}',
-  textTertiary: '{{TEXT_TERTIARY_COLOR}}',
-  textDisabled: '{{TEXT_DISABLED_COLOR}}',
-  textInverse: '{{TEXT_INVERSE_COLOR}}',
+  textPrimary: '#1E293B',
+  textSecondary: '#64748B',
+  textTertiary: '#94A3B8',
+  textDisabled: '#CBD5E1',
+  textInverse: '#FFFFFF',
 
   // =============================================================================
   // BORDER COLORS (same as light mode for type consistency)
   // =============================================================================
-  border: '{{BORDER_COLOR}}',
-  borderLight: '{{BORDER_LIGHT_COLOR}}',
-  borderMedium: '{{BORDER_MEDIUM_COLOR}}',
-  borderFocus: '{{BORDER_FOCUS_COLOR}}',
+  border: '#E2E8F0',
+  borderLight: '#F1F5F9',
+  borderMedium: '#CBD5E1',
+  borderFocus: '#3B82F6',
 
   // =============================================================================
   // COMPONENT-SPECIFIC COLORS (same as light mode for type consistency)
   // =============================================================================
-  buttonPrimary: '{{PRIMARY_COLOR}}',
-  buttonSecondary: '{{SECONDARY_COLOR}}',
+  buttonPrimary: '#3B82F6',
+  buttonSecondary: '#8B5CF6',
 
-  inputBackground: '{{SURFACE_COLOR}}',
-  inputBorder: '{{BORDER_COLOR}}',
+  inputBackground: '#FFFFFF',
+  inputBorder: '#E2E8F0',
 
-  cardBackground: '{{SURFACE_COLOR}}',
+  cardBackground: '#FFFFFF',
 
   // =============================================================================
   // SPECIAL COLORS
@@ -378,7 +378,7 @@ export const darkColors = {
   // =============================================================================
   // GRADIENTS (Same as light mode for type consistency)
   // =============================================================================
-  gradient: ['{{PRIMARY_COLOR}}', '{{SECONDARY_COLOR}}'],
+  gradient: ['#3B82F6', '#8B5CF6'],
 };
 
 // =============================================================================