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

package/package.json

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

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -1,37 +1,53 @@
 /**
- * useAppDesignTokens Hook - Design Tokens Access
+ * useAppDesignTokens Hook - Theme-Aware Design Tokens
  *
- * ✅ NPM PACKAGE VERSION - Standalone, no theme dependencies
- * ✅ Returns static light theme tokens
- * ✅ Type-safe design tokens
- * ✅ Zero external dependencies
+ * ✅ Accepts optional themeMode parameter
+ * ✅ Returns tokens for specified theme (light/dark)
+ * ✅ Apps control theme, package provides tokens
+ * ✅ Single source of truth
  *
- * NOTE: This is the npm package version which returns light theme only.
- * For dynamic theme switching, apps should use @domains/theme ThemeProvider.
+ * @param themeMode - Optional theme mode ('light' | 'dark'), defaults to 'light'
  *
- * @example
+ * @example Basic usage (light theme)
  * ```typescript
  * import { useAppDesignTokens } from '@umituz/react-native-design-system';
  *
  * const MyComponent = () => {
- *   const tokens = useAppDesignTokens();
+ *   const tokens = useAppDesignTokens(); // Uses light theme by default
  *   return (
  *     <View style={{
  *       backgroundColor: tokens.colors.primary,
- *       padding: tokens.spacing.md,
- *       borderRadius: tokens.borders.radius.md
+ *       padding: tokens.spacing.md
  *     }}>
  *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
  *     </View>
  *   );
  * };
  * ```
+ *
+ * @example Theme-aware usage
+ * ```typescript
+ * import { useAppDesignTokens } from '@umituz/react-native-design-system';
+ * import { useTheme } from '@domains/theme';
+ *
+ * const MyComponent = () => {
+ *   const { themeMode } = useTheme(); // Get theme from app's theme system
+ *   const tokens = useAppDesignTokens(themeMode); // Pass theme to hook
+ *
+ *   return (
+ *     <View style={{ backgroundColor: tokens.colors.background }}>
+ *       <Text style={{ color: tokens.colors.textPrimary }}>
+ *         This text color changes with theme!
+ *       </Text>
+ *     </View>
+ *   );
+ * };
+ * ```
  */
 
-import { STATIC_DESIGN_TOKENS } from '../tokens/core/TokenFactory';
+import { useMemo } from 'react';
+import { createDesignTokens, type DesignTokens, type ThemeMode } from '../tokens/core/TokenFactory';
 
-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;
+export const useAppDesignTokens = (themeMode: ThemeMode = 'light'): DesignTokens => {
+  return useMemo(() => createDesignTokens(themeMode), [themeMode]);
 };

package/src/presentation/molecules/ListItem.tsx

@@ -16,7 +16,7 @@ export const ListItem: React.FC<ListItemProps> = ({
   const Component: React.ComponentType<any> = onPress ? TouchableOpacity : View;
 
   return (
-    <Component style={[listItemStyles.container, disabled && listItemStyles.disabled, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+    <Component style={[listItemStyles.container, disabled ? listItemStyles.disabled : undefined, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
       {leftIcon && (
         <View style={listItemStyles.iconContainer}>
           <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} />
@@ -24,11 +24,11 @@ export const ListItem: React.FC<ListItemProps> = ({
       )}
       <View style={listItemStyles.content}>
         <AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
-        {subtitle && <AtomicText type="bodySmall" color={disabled ? 'surfaceVariant' : 'surfaceVariant'} numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
+        {subtitle && <AtomicText type="bodySmall" color="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
       </View>
       {rightIcon && onPress && (
         <View style={listItemStyles.iconContainer}>
-          <AtomicIcon name={rightIcon} color={disabled ? 'surfaceVariant' : 'surfaceVariant'} />
+          <AtomicIcon name={rightIcon} color="surfaceVariant" />
         </View>
       )}
     </Component>