@umituz/react-native-design-system 2.11.2 → 2.11.4

package/src/molecules/SearchBar/SearchBar.tsx

@@ -6,7 +6,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon, useIconName } from '../../atoms';
 import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
 
@@ -26,6 +26,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     testID,
 }) => {
     const tokens = useAppDesignTokens();
+    const searchIcon = useIconName('search');
+    const closeCircleIcon = useIconName('closeCircle');
 
     const handleClear = () => {
         onChangeText('');
@@ -51,7 +53,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         >
             <View style={styles.iconContainer}>
                 <AtomicIcon
-                    name="search"
+                    name={searchIcon}
                     size="md"
                     customColor={tokens.colors.textSecondary}
                 />
@@ -99,7 +101,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                             accessibilityLabel="Clear search"
                         >
                             <AtomicIcon
-                                name="close-circle"
+                                name={closeCircleIcon}
                                 size="md"
                                 customColor={tokens.colors.textSecondary}
                             />

package/src/molecules/SearchBar/SearchHistory.tsx

@@ -5,7 +5,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { SearchHistoryProps } from './types';
 
@@ -20,6 +20,8 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
     clearLabel = 'Clear All',
 }) => {
     const tokens = useAppDesignTokens();
+    const clockIcon = useIconName('clock');
+    const closeIcon = useIconName('close');
 
     if (!history || history.length === 0) {
         return null;
@@ -58,7 +60,7 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
                 >
                     <View style={styles.itemLeft}>
                         <AtomicIcon
-                            name="time-outline"
+                            name={clockIcon}
                             size="sm"
                             customColor={tokens.colors.textSecondary}
                         />
@@ -80,7 +82,7 @@ export const SearchHistory: React.FC<SearchHistoryProps> = ({
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                     >
                         <AtomicIcon
-                            name="close"
+                            name={closeIcon}
                             size="sm"
                             customColor={tokens.colors.textSecondary}
                         />

package/src/molecules/action-footer/ActionFooter.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
 

package/src/molecules/alerts/AlertBanner.tsx

@@ -9,7 +9,7 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
-import { AtomicText, AtomicIcon } from '../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType, AlertPosition } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
@@ -24,6 +24,7 @@ export function AlertBanner({ alert }: AlertBannerProps) {
     const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
+    const closeIcon = useIconName('close');
 
     const handleDismiss = () => {
         dismissAlert(alert.id);
@@ -111,7 +112,7 @@ export function AlertBanner({ alert }: AlertBannerProps) {
                             style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
                             hitSlop={8}
                         >
-                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
                         </Pressable>
                     )}
                 </View>

package/src/molecules/alerts/AlertToast.tsx

@@ -7,7 +7,7 @@
 
 import React, { useEffect } from 'react';
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
@@ -21,6 +21,7 @@ interface AlertToastProps {
 export function AlertToast({ alert }: AlertToastProps) {
     const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
+    const closeIcon = useIconName('close');
 
     const dismiss = () => {
         dismissAlert(alert.id);
@@ -126,7 +127,7 @@ export function AlertToast({ alert }: AlertToastProps) {
                             style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
                             hitSlop={8}
                         >
-                            <AtomicIcon name="close" customSize={20} customColor={textColor} />
+                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
                         </Pressable>
                     )}
                 </View>

package/src/molecules/bottom-sheet/components/filter/FilterBottomSheet.tsx

@@ -8,7 +8,7 @@ import React, { forwardRef, useCallback } from 'react';
 import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
 import { BottomSheetModal } from '../BottomSheetModal';
 import type { BottomSheetModalRef } from '../../types/BottomSheet';
-import { AtomicText, AtomicIcon, AtomicButton } from '../../../../atoms';
+import { AtomicText, AtomicIcon, AtomicButton, useIconName } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
 import type { FilterOption, FilterCategory } from '../../types/Filter';
 import { FilterUtils } from '../../types/Filter';
@@ -33,6 +33,8 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
     defaultId = 'all'
 }, ref) => {
     const tokens = useAppDesignTokens();
+    const checkIcon = useIconName('check');
+    const closeIcon = useIconName('close');
 
     if (__DEV__) {
         console.log('[FilterBottomSheet] Component mounted/rendered', { 
@@ -120,7 +122,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
                     </AtomicText>
                 </View>
                 {isSelected && (
-                    <AtomicIcon name="checkmark" size="sm" color="primary" />
+                    <AtomicIcon name={checkIcon} size="sm" color="primary" />
                 )}
             </TouchableOpacity>
         );
@@ -167,7 +169,7 @@ export const FilterBottomSheet = forwardRef<BottomSheetModalRef, FilterBottomShe
                 <View style={styles.header}>
                     <AtomicText type="headlineSmall">{title || 'Filter'}</AtomicText>
                     <TouchableOpacity onPress={() => (ref as any).current?.dismiss()}>
-                        <AtomicIcon name="close" size="md" color="textPrimary" />
+                        <AtomicIcon name={closeIcon} size="md" color="textPrimary" />
                     </TouchableOpacity>
                 </View>
 

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../../../atoms';
 import type { useAppDesignTokens } from '../../../../../theme';
 
 interface FilterSheetHeaderProps {
@@ -9,14 +9,18 @@ interface FilterSheetHeaderProps {
     tokens: ReturnType<typeof useAppDesignTokens>;
 }
 
-export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => (
-    <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
-        <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
-        <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-            <AtomicIcon name="close" size="md" color="primary" />
-        </TouchableOpacity>
-    </View>
-);
+export const FilterSheetHeader = ({ title, onClose, tokens }: FilterSheetHeaderProps) => {
+    const closeIcon = useIconName('close');
+
+    return (
+        <View style={[styles.header, { borderBottomColor: tokens.colors.border, borderBottomWidth: tokens.borders.width.thin }]}>
+            <AtomicText type="headlineMedium" style={styles.title}>{title}</AtomicText>
+            <TouchableOpacity onPress={onClose} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+                <AtomicIcon name={closeIcon} size="md" color="primary" />
+            </TouchableOpacity>
+        </View>
+    );
+};
 
 const styles = StyleSheet.create({
     header: {

package/src/molecules/bottom-sheet/components/filter/FilterSheetComponents/FilterSheetOption.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../../../atoms';
 import type { useAppDesignTokens } from '../../../../../theme';
 import type { FilterOption } from '../../../types/Filter';
 
@@ -11,7 +11,10 @@ interface FilterSheetOptionProps {
     tokens: ReturnType<typeof useAppDesignTokens>;
 }
 
-export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => (
+export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: FilterSheetOptionProps) => {
+    const checkCircleIcon = useIconName('checkCircle');
+
+    return (
     <TouchableOpacity
         onPress={() => onPress(option.id)}
         style={[
@@ -35,9 +38,10 @@ export const FilterSheetOption = ({ option, isSelected, onPress, tokens }: Filte
                 {option.label}
             </AtomicText>
         </View>
-        {isSelected && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
+        {isSelected && <AtomicIcon name={checkCircleIcon} size="md" color="primary" />}
     </TouchableOpacity>
-);
+    );
+};
 
 const styles = StyleSheet.create({
     option: {

package/src/molecules/circular-menu/CircularMenuCloseButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../atoms";
+import { AtomicIcon, useIconName } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
 
@@ -12,6 +12,7 @@ export const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps> = (
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
+  const closeIcon = useIconName('close');
 
   return (
     <TouchableOpacity
@@ -31,7 +32,7 @@ export const CircularMenuCloseButton: React.FC<CircularMenuCloseButtonProps> = (
       accessibilityRole="button"
       accessibilityLabel="Close menu"
     >
-      <AtomicIcon name="close" size="md" color="secondary" />
+      <AtomicIcon name={closeIcon} size="md" color="secondary" />
     </TouchableOpacity>
   );
 };

package/src/molecules/countdown/components/Countdown.tsx

@@ -5,7 +5,7 @@ import { useCountdown } from '../hooks/useCountdown';
 import { CountdownHeader } from './CountdownHeader';
 import { TimeUnit } from './TimeUnit';
 import type { CountdownTarget, CountdownDisplayConfig } from '../types/CountdownTypes';
-import type { IconName } from '../../../atoms/AtomicIcon';
+import type { IconName } from '../../../atoms';
 
 export interface CountdownProps {
     target: CountdownTarget;

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon } from '../../../atoms';
+import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
-import type { IconName } from '../../../atoms/AtomicIcon';
+import type { IconName } from '../../../atoms';
 
 export interface CountdownHeaderProps {
     title: string;
@@ -20,6 +20,7 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
     onToggle,
 }) => {
     const tokens = useAppDesignTokens();
+    const swapIcon = useIconName('swap');
 
     return (
         <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
@@ -54,7 +55,7 @@ export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
                     onPress={onToggle}
                 >
                     <AtomicIcon
-                        name="swap-horizontal"
+                        name={swapIcon}
                         size="sm"
                         color="onSurface"
                     />

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../atoms/AtomicText';
-import { AtomicIcon } from '../../atoms/AtomicIcon';
+import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../../../atoms';
-import { AtomicIcon } from '../../../atoms';
+import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 
@@ -18,6 +18,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const arrowLeftIcon = useIconName('arrowLeft');
 
   const styles = StyleSheet.create({
     container: {
@@ -51,7 +52,7 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
       {onBackPress && (
         <TouchableOpacity onPress={onBackPress} style={styles.backButton}>
           <AtomicIcon
-            name="arrow-back"
+            name={arrowLeftIcon}
             size="md"
             color="textPrimary"
           />

package/src/molecules/navigation/hooks/useTabConfig.ts

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import type { ParamListBase } from "@react-navigation/native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme";
 import { useResponsive } from "../../../responsive";
 import type { TabNavigatorConfig, TabScreen } from "../types";

package/src/molecules/navigation/types.ts

@@ -4,7 +4,7 @@ import type {
   BottomTabScreenProps,
 } from "@react-navigation/bottom-tabs";
 import type { StackNavigationOptions } from "@react-navigation/stack";
-import type { IconName } from "../../atoms/AtomicIcon";
+import type { IconName } from "../../atoms";
 
 export type NavigationParams = Record<string, unknown>;
 

package/src/molecules/navigation/utils/IconRenderer.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import type { IconRendererProps } from "../types";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import type { IconName } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, type IconName } from "../../../atoms";
 
 type RenderIconFn = (
   iconName: IconName,

package/src/onboarding/presentation/components/OnboardingHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, useIconName } from "../../../atoms";
 import { AtomicText } from "../../../atoms/AtomicText";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
@@ -26,6 +26,7 @@ export const OnboardingHeader = ({
   const {
     theme: { colors },
   } = useOnboardingProvider();
+  const chevronLeftIcon = useIconName('chevronLeft');
 
   const skipText = skipButtonText || t("onboarding.skip");
 
@@ -46,7 +47,7 @@ export const OnboardingHeader = ({
           activeOpacity={0.7}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <AtomicIcon name="chevron-back" customSize={20} customColor={colors.iconColor} />
+          <AtomicIcon name={chevronLeftIcon} customSize={20} customColor={colors.iconColor} />
         </TouchableOpacity>
       ) : (
         <View style={styles.headerButton} />

package/src/onboarding/presentation/components/OnboardingResetSetting.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../atoms";
 import { useAppDesignTokens } from "../../../theme/hooks/useAppDesignTokens";
 
 export interface OnboardingResetSettingProps {

package/src/onboarding/presentation/components/OnboardingSlide.tsx

@@ -5,7 +5,7 @@
 
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import { AtomicIcon, useIconName } from "../../../atoms";
 import { AtomicText } from "../../../atoms/AtomicText";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import { BaseSlide } from "./BaseSlide";
@@ -23,6 +23,7 @@ export const OnboardingSlide = ({
   const {
     theme: { colors },
   } = useOnboardingProvider();
+  const checkCircleIcon = useIconName('checkCircle');
 
   const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';
@@ -72,7 +73,7 @@ export const OnboardingSlide = ({
               ]}
             >
               <AtomicIcon
-                name="checkmark-circle"
+                name={checkCircleIcon}
                 size="sm"
                 customColor={colors.iconColor}
               />

package/src/onboarding/presentation/components/QuestionSlideHeader.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../atoms";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { useOnboardingProvider } from "../providers/OnboardingProvider";
 

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -5,8 +5,7 @@
 
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 import type { OnboardingColors } from "../../types/OnboardingTheme";
 

package/src/onboarding/presentation/components/questions/RatingQuestion.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 

package/src/onboarding/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicIcon } from "../../../../atoms/AtomicIcon";
-import { AtomicText } from "../../../../atoms/AtomicText";
+import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 

package/src/theme/core/TokenFactory.ts

@@ -5,7 +5,7 @@ import { type DesignTokens, type ResponsiveTypography } from '../types/ThemeType
 
 /**
  * Create complete design tokens for a specific theme mode
- * 
+ *
  * ✅ Responsive by default
  * ✅ SINGLE SOURCE OF TRUTH
  *

package/src/theme/index.ts

@@ -78,7 +78,7 @@ export { useCommonStyles } from './hooks/useCommonStyles';
 export { DesignSystemProvider } from './infrastructure/providers/DesignSystemProvider';
 
 // Re-export icon types for convenience
-export type { IconRenderer, IconRenderProps } from '../atoms/IconRegistry';
+export type { IconRenderer, IconRenderProps, IconNames } from '../atoms/icon';
 
 // =============================================================================
 // THEME OBJECTS