@umituz/react-native-design-system 4.28.14 → 4.28.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.28.14",
+  "version": "4.28.16",
   "description": "Universal design system for React Native apps with safe navigation hooks - updated SKILL.md with navigation documentation",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/molecules/emoji/index.ts

@@ -166,8 +166,11 @@ export type {
 export { EmojiCategory, EmojiUtils } from './domain/entities/Emoji';
 
 // Presentation Components
-export { EmojiPicker } from './presentation/components/EmojiPicker';
-export type { EmojiPickerProps } from './presentation/components/EmojiPicker';
+// NOTE: EmojiPicker requires rn-emoji-keyboard (optional peer dependency)
+// Import it directly when needed:
+// import { EmojiPicker } from '@umituz/react-native-design-system/src/molecules/emoji/presentation/components/EmojiPicker';
+// export { EmojiPicker } from './presentation/components/EmojiPicker';
+// export type { EmojiPickerProps } from './presentation/components/EmojiPicker';
 
 // Presentation Hooks
 export { useEmojiPicker } from './presentation/hooks/useEmojiPicker';

package/src/molecules/info-grid/InfoGrid.tsx

@@ -1,6 +1,6 @@
 
 import React, { useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
@@ -19,13 +19,13 @@ export const InfoGrid: React.FC<InfoGridProps> = React.memo(({
   const tokens = useAppDesignTokens();
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const styles = useMemo(() => StyleSheet.create({
+  const styles = useMemo(() => ({
     container: {
       gap: tokens.spacing.md,
     },
     header: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
       gap: tokens.spacing.xs,
     },
     headerIcon: {
@@ -33,24 +33,24 @@ export const InfoGrid: React.FC<InfoGridProps> = React.memo(({
       height: calculateResponsiveSize(INFO_GRID_ICONS.small, spacingMultiplier),
       borderRadius: tokens.borders.radius.sm,
       backgroundColor: `${tokens.colors.primary}20`,
-      justifyContent: 'center',
-      alignItems: 'center',
+      justifyContent: 'center' as const,
+      alignItems: 'center' as const,
     },
     headerTitle: {
       ...tokens.typography.labelLarge,
-      fontWeight: '700',
+      fontWeight: '700' as const,
       color: tokens.colors.primary,
     },
     grid: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
+      flexDirection: 'row' as const,
+      flexWrap: 'wrap' as const,
       gap: tokens.spacing.sm,
     },
     item: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
       gap: tokens.spacing.sm,
-      width: `${100 / columns - 2}%`, // Basic percentage calculation
+      width: `${100 / columns - 2}%` as const, // Basic percentage calculation
       backgroundColor: tokens.colors.surfaceVariant,
       padding: tokens.spacing.md,
       borderRadius: tokens.borders.radius.md,
@@ -62,14 +62,14 @@ export const InfoGrid: React.FC<InfoGridProps> = React.memo(({
       height: calculateResponsiveSize(INFO_GRID_ICONS.large, spacingMultiplier),
       borderRadius: tokens.borders.radius.sm,
       backgroundColor: `${tokens.colors.primary}20`,
-      justifyContent: 'center',
-      alignItems: 'center',
+      justifyContent: 'center' as const,
+      alignItems: 'center' as const,
     },
     itemText: {
       flex: 1,
       ...tokens.typography.bodySmall,
       color: tokens.colors.textPrimary,
-      fontWeight: '500',
+      fontWeight: '500' as const,
     },
   }), [tokens, columns, spacingMultiplier]);
 

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
@@ -25,14 +25,14 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   const arrowLeftIcon = useIconName('arrowLeft');
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const styles = useMemo(() => StyleSheet.create({
+  const styles = useMemo(() => ({
     container: {
       paddingTop: insets.top,
       paddingHorizontal: tokens.spacing.md,
       paddingBottom: tokens.spacing.sm,
       backgroundColor: tokens.colors.backgroundPrimary,
-      flexDirection: 'row',
-      alignItems: 'center',
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
       borderBottomWidth: 1,
       borderBottomColor: tokens.colors.outlineVariant,
       zIndex: 100,
@@ -42,16 +42,16 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
       width: calculateResponsiveSize(NAVIGATION.backButton.width, spacingMultiplier),
       height: calculateResponsiveSize(NAVIGATION.backButton.height, spacingMultiplier),
       borderRadius: tokens.borders.radius.full,
-      alignItems: 'center',
-      justifyContent: 'center',
+      alignItems: 'center' as const,
+      justifyContent: 'center' as const,
       backgroundColor: tokens.colors.surfaceVariant,
     },
     title: {
       flex: 1,
-      textAlign: centerTitle ? 'center' : 'left',
+      textAlign: (centerTitle ? 'center' : 'left') as 'center' | 'left',
     },
     sideElement: {
-      width: centerTitle ? calculateResponsiveSize(40, spacingMultiplier) : 'auto',
+      width: centerTitle ? calculateResponsiveSize(40, spacingMultiplier) : 'auto' as const,
     }
   }), [tokens, insets, centerTitle, spacingMultiplier]);