@umituz/react-native-design-system 2.11.1 → 2.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicFab.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { useResponsive } from '../responsive';
-import { AtomicIcon } from './AtomicIcon';
+import { AtomicIcon } from './icon';
 import { AtomicFabProps } from './fab/types';
 import {
   FAB_SIZES,

package/src/atoms/EmptyState.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
-import { AtomicIcon } from './AtomicIcon';
+import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
 import { useAppDesignTokens, STATIC_TOKENS } from '../theme';
 

package/src/atoms/{AtomicBadge.tsx → badge/AtomicBadge.tsx}

@@ -5,9 +5,9 @@
 
 import React from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
-import { AtomicText } from "./AtomicText";
-import { AtomicIcon, type IconName } from "./AtomicIcon";
-import { useAppDesignTokens } from '../theme';
+import { AtomicText } from "../AtomicText";
+import { AtomicIcon, type IconName } from "../icon";
+import { useAppDesignTokens } from '../../theme';
 
 export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "error" | "info";
 export type BadgeSize = "sm" | "md" | "lg";

package/src/atoms/badge/index.ts

@@ -0,0 +1,6 @@
+export {
+  AtomicBadge,
+  type AtomicBadgeProps,
+  type BadgeVariant,
+  type BadgeSize,
+} from './AtomicBadge';

package/src/atoms/button/AtomicButton.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { StyleProp, ViewStyle, TextStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../AtomicText';
-import { AtomicIcon } from '../AtomicIcon';
+import { AtomicIcon } from '../icon';
 import { AtomicSpinner } from '../AtomicSpinner';
 import { useAppDesignTokens } from '../../theme';
 import { getButtonSizeConfig } from './configs/buttonSizeConfig';

package/src/atoms/button/styles/buttonVariantStyles.ts

@@ -14,10 +14,6 @@ export const getVariantStyles = (
     borderWidth: 0,
   };
 
-  const baseTextStyle = {
-    color: tokens.colors.textInverse,
-  };
-
   switch (variant) {
     case 'primary':
       return {
@@ -26,8 +22,7 @@ export const getVariantStyles = (
           backgroundColor: tokens.colors.primary,
         },
         text: {
-          ...baseTextStyle,
-          color: tokens.colors.textInverse,
+          color: tokens.colors.onPrimary,
         },
       };
 
@@ -38,7 +33,6 @@ export const getVariantStyles = (
           backgroundColor: tokens.colors.surfaceSecondary,
         },
         text: {
-          ...baseTextStyle,
           color: tokens.colors.textPrimary,
         },
       };
@@ -51,7 +45,6 @@ export const getVariantStyles = (
           borderColor: tokens.colors.border,
         },
         text: {
-          ...baseTextStyle,
           color: tokens.colors.textPrimary,
         },
       };
@@ -62,7 +55,6 @@ export const getVariantStyles = (
           backgroundColor: undefined,
         },
         text: {
-          ...baseTextStyle,
           color: tokens.colors.primary,
         },
       };
@@ -74,15 +66,16 @@ export const getVariantStyles = (
           backgroundColor: tokens.colors.error,
         },
         text: {
-          ...baseTextStyle,
-          color: tokens.colors.textInverse,
+          color: tokens.colors.onError,
         },
       };
 
     default:
       return {
         container: baseStyle,
-        text: baseTextStyle,
+        text: {
+          color: tokens.colors.onPrimary,
+        },
       };
   }
 };

package/src/atoms/button/types/index.ts

@@ -4,7 +4,7 @@
 
 import type { StyleProp } from 'react-native';
 import type { TextStyle, ViewStyle } from 'react-native';
-import type { IconName } from '../../AtomicIcon';
+import type { IconName } from '../../icon';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';

package/src/atoms/card/AtomicCard.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { AtomicImage } from '../image/AtomicImage';
 import { AtomicText } from '../AtomicText';
-import { AtomicIcon } from '../AtomicIcon';
+import { AtomicIcon, useIconName } from '../icon';
 import { useAppDesignTokens } from '../../theme';
 import { getCardVariantStyles, cardStyles } from './styles/cardStyles';
 import { getCardPadding } from './configs/cardPaddingConfig';
@@ -43,6 +43,7 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const checkCircleIcon = useIconName('checkCircle');
   
   const variantStyles = useMemo(() => {
     const base = getCardVariantStyles(variant, tokens);
@@ -98,7 +99,7 @@ const AtomicCardComponent: React.FC<AtomicCardProps> = ({
       {/* Selected Indicator */}
       {selected && (
         <View style={cardStyles.selectedOverlay}>
-          <AtomicIcon name="checkmark-circle" color="primary" size="md" />
+          <AtomicIcon name={checkCircleIcon} color="primary" size="md" />
         </View>
       )}
 

package/src/atoms/chip/AtomicChip.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { View, ViewStyle, TouchableOpacity } from 'react-native';
 import { AtomicText } from '../AtomicText';
-import { AtomicIcon } from '../AtomicIcon';
+import { AtomicIcon } from '../icon';
 import { useAppDesignTokens } from '../../theme';
 import { getChipSizeConfig } from './configs/chipSizeConfig';
 import { getChipColorConfig } from './configs/chipColorConfig';

package/src/atoms/chip/types/index.ts

@@ -3,7 +3,7 @@
  */
 
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { IconSize } from '../../AtomicIcon';
+import type { IconSize } from '../../icon';
 
 export type ChipVariant = 'filled' | 'outlined' | 'soft';
 export type ChipSize = 'sm' | 'md' | 'lg';

package/src/atoms/datepicker/components/DatePickerButton.tsx

@@ -12,7 +12,7 @@ import {
   StyleSheet,
 } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
-import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicIcon, useIconName } from '../../icon';
 import { AtomicText } from '../../AtomicText';
 
 interface DatePickerButtonProps {
@@ -33,6 +33,7 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const calendarIcon = useIconName('calendar');
 
   const buttonStyles = StyleSheet.create({
     container: {
@@ -102,7 +103,7 @@ export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
 
       <View style={buttonStyles.iconContainer}>
         <AtomicIcon
-          name="Calendar"
+          name={calendarIcon}
           size="md"
           color={disabled ? 'surfaceVariant' : 'secondary'}
         />

package/src/atoms/{AtomicIcon.tsx → icon/AtomicIcon.tsx}

@@ -23,8 +23,8 @@
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import Svg, { Path } from "react-native-svg";
-import { useAppDesignTokens } from "../theme";
-import { useIconRenderer, type IconRenderProps } from "./IconRegistry";
+import { useAppDesignTokens } from "../../theme";
+import { useIconRenderer, type IconRenderProps } from "./iconStore";
 import {
   type IconSize as BaseIconSize,
   type IconColor,

package/src/atoms/icon/iconStore.ts

@@ -0,0 +1,119 @@
+/**
+ * Icon Store - Zustand-based icon configuration
+ *
+ * No defaults - all icon names come from the app.
+ * App sets iconNames and iconRenderer via DesignSystemProvider.
+ */
+
+import { create } from 'zustand';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Required icon names - app MUST provide all of these
+ */
+export interface IconNames {
+  close: string;
+  check: string;
+  checkCircle: string;
+  chevronLeft: string;
+  chevronRight: string;
+  chevronUp: string;
+  chevronDown: string;
+  arrowLeft: string;
+  arrowRight: string;
+  search: string;
+  closeCircle: string;
+  clock: string;
+  refresh: string;
+  alertCircle: string;
+  star: string;
+  starOutline: string;
+  wifiOff: string;
+  info: string;
+  trash: string;
+  calendar: string;
+  swap: string;
+  colorFilter: string;
+}
+
+export const REQUIRED_ICON_KEYS: (keyof IconNames)[] = [
+  'close', 'check', 'checkCircle', 'chevronLeft', 'chevronRight',
+  'chevronUp', 'chevronDown', 'arrowLeft', 'arrowRight', 'search',
+  'closeCircle', 'clock', 'refresh', 'alertCircle', 'star',
+  'starOutline', 'wifiOff', 'info', 'trash', 'calendar', 'swap', 'colorFilter',
+];
+
+/**
+ * Props passed to the icon renderer function
+ */
+export interface IconRenderProps {
+  name: string;
+  size: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  accessibilityLabel?: string;
+}
+
+export type IconRenderer = (props: IconRenderProps) => ReactNode;
+
+interface IconStore {
+  iconNames: IconNames | null;
+  iconRenderer: IconRenderer | null;
+  isConfigured: boolean;
+  setConfig: (iconNames: IconNames, iconRenderer: IconRenderer) => void;
+  reset: () => void;
+}
+
+export const useIconStore = create<IconStore>((set) => ({
+  iconNames: null,
+  iconRenderer: null,
+  isConfigured: false,
+
+  setConfig: (iconNames, iconRenderer) => {
+    if (__DEV__) {
+      const missingKeys = REQUIRED_ICON_KEYS.filter(key => !iconNames[key]);
+      if (missingKeys.length > 0) {
+        console.error(
+          `[DesignSystem] Missing icon names: ${missingKeys.join(', ')}`
+        );
+      }
+    }
+    set({ iconNames, iconRenderer, isConfigured: true });
+  },
+
+  reset: () => set({ iconNames: null, iconRenderer: null, isConfigured: false }),
+}));
+
+/**
+ * Get icon renderer
+ */
+export const useIconRenderer = (): IconRenderer | null => {
+  return useIconStore((state) => state.iconRenderer);
+};
+
+/**
+ * Get specific icon name from app config
+ */
+export const useIconName = (key: keyof IconNames): string => {
+  const iconNames = useIconStore((state) => state.iconNames);
+
+  if (!iconNames) {
+    if (__DEV__) {
+      console.warn(
+        `[DesignSystem] useIconName("${key}") - iconNames not configured.`
+      );
+    }
+    return '';
+  }
+
+  return iconNames[key] || '';
+};
+
+/**
+ * Check if icon system is configured
+ */
+export const useHasIconConfig = (): boolean => {
+  return useIconStore((state) => state.isConfigured);
+};

package/src/atoms/icon/index.ts

@@ -0,0 +1,35 @@
+/**
+ * Icon Module
+ *
+ * Zustand-based icon system.
+ * App provides iconNames and iconRenderer via DesignSystemProvider.
+ */
+
+// Main Component
+export {
+  AtomicIcon,
+  type AtomicIconProps,
+  type IconSize,
+  type IconName,
+  type IconColor,
+} from './AtomicIcon';
+
+// Icon Store
+export {
+  useIconStore,
+  useIconRenderer,
+  useIconName,
+  useHasIconConfig,
+  type IconNames,
+  type IconRenderer,
+  type IconRenderProps,
+  REQUIRED_ICON_KEYS,
+} from './iconStore';
+
+// Type utilities
+export {
+  type IconSizePreset,
+  ICON_SIZES,
+  getIconSize,
+  isIconSizePreset,
+} from './AtomicIcon.types';

package/src/atoms/index.ts

@@ -33,7 +33,7 @@ export type {
     AtomicInputSize,
 } from './input/types';
 
-// Icon
+// Icon (Zustand-based icon system)
 export {
     AtomicIcon,
     type AtomicIconProps,
@@ -41,15 +41,20 @@ export {
     type IconColor,
     type IconName,
     type IconRenderProps,
-} from './AtomicIcon';
-
-// Icon Registry (for custom icon renderers)
-export {
-    IconProvider,
+    // Icon Store
+    useIconStore,
     useIconRenderer,
-    useHasCustomIconRenderer,
+    useIconName,
+    useHasIconConfig,
     type IconRenderer,
-} from './IconRegistry';
+    type IconNames,
+    REQUIRED_ICON_KEYS,
+    // Type utilities
+    type IconSizePreset,
+    ICON_SIZES,
+    getIconSize,
+    isIconSizePreset,
+} from './icon';
 
 
 // Avatar
@@ -96,7 +101,7 @@ export {
     type AtomicBadgeProps,
     type BadgeVariant,
     type BadgeSize,
-} from './AtomicBadge';
+} from './badge';
 
 // Spinner
 export {

package/src/atoms/input/components/InputIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pressable } from 'react-native';
-import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicIcon } from '../../icon';
 
 interface InputIconProps {
   name: string;

package/src/atoms/input/types.ts

@@ -1,6 +1,6 @@
 import type { StyleProp, TextInputProps } from 'react-native';
 import type { TextStyle, ViewStyle } from 'react-native';
-import type { IconName } from '../AtomicIcon';
+import type { IconName } from '../icon';
 
 export type AtomicInputVariant = 'outlined' | 'filled' | 'flat';
 export type AtomicInputState = 'default' | 'error' | 'success' | 'disabled';

package/src/atoms/picker/components/PickerChips.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { View, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
-import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicIcon, useIconName } from '../../icon';
 import { AtomicText } from '../../AtomicText';
 import {
   getChipContainerStyles,
@@ -28,6 +28,7 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
   onRemoveChip,
 }) => {
   const tokens = useAppDesignTokens();
+  const closeIcon = useIconName('close');
 
   const chipContainerStyles = getChipContainerStyles(tokens);
   const chipStyles = getChipStyles(tokens);
@@ -47,7 +48,7 @@ export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
             }}
             hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }}
           >
-            <AtomicIcon name="X" size="sm" color="primary" />
+            <AtomicIcon name={closeIcon} size="sm" color="primary" />
           </TouchableOpacity>
         </View>
       ))}

package/src/atoms/picker/components/PickerIcons.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
-import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicIcon, useIconName } from '../../icon';
 
 
 interface PickerIconsProps {
@@ -29,6 +29,9 @@ export const PickerIcons: React.FC<PickerIconsProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
+  const closeIcon = useIconName('close');
+  const chevronUpIcon = useIconName('chevronUp');
+  const chevronDownIcon = useIconName('chevronDown');
 
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
@@ -41,13 +44,13 @@ export const PickerIcons: React.FC<PickerIconsProps> = ({
           accessibilityLabel={clearAccessibilityLabel}
           testID={`${testID}-clear`}
         >
-          <AtomicIcon name="X" size="sm" color="secondary" />
+          <AtomicIcon name={closeIcon} size="sm" color="secondary" />
         </TouchableOpacity>
       )}
 
       {/* Dropdown Icon */}
       <AtomicIcon
-        name={modalVisible ? 'ChevronUp' : 'ChevronDown'}
+        name={modalVisible ? chevronUpIcon : chevronDownIcon}
         size="sm"
         color={disabled ? 'surfaceVariant' : 'secondary'}
       />

package/src/atoms/picker/components/PickerModal.tsx

@@ -14,7 +14,7 @@ import {
 import { useSafeAreaInsets } from '../../../safe-area';
 import { useAppDesignTokens } from '../../../theme';
 import { PickerOption } from '../types';
-import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicIcon, useIconName } from '../../icon';
 import { AtomicText } from '../../AtomicText';
 import {
   getModalOverlayStyles,
@@ -65,6 +65,10 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
+  const checkCircleIcon = useIconName('checkCircle');
+  const searchIcon = useIconName('search');
+  const closeIcon = useIconName('close');
+  const infoIcon = useIconName('info');
 
   const modalOverlayStyles = getModalOverlayStyles();
   const modalContainerStyles = getModalContainerStyles(tokens, 0);
@@ -121,7 +125,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
 
         {/* Selected Indicator */}
         {selected && (
-          <AtomicIcon name="CircleCheck" size="md" color="primary" />
+          <AtomicIcon name={checkCircleIcon} size="md" color="primary" />
         )}
       </TouchableOpacity>
     );
@@ -157,14 +161,14 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
               accessibilityLabel={closeAccessibilityLabel}
               testID={`${testID}-close`}
             >
-              <AtomicIcon name="X" size="md" color="primary" />
+              <AtomicIcon name={closeIcon} size="md" color="primary" />
             </TouchableOpacity>
           </View>
 
           {/* Search Bar */}
           {searchable && (
             <View style={searchContainerStyles}>
-              <AtomicIcon name="Search" size="sm" color="secondary" />
+              <AtomicIcon name={searchIcon} size="sm" color="secondary" />
               <TextInput
                 value={searchQuery}
                 onChangeText={onSearchChange}
@@ -175,7 +179,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
               />
               {searchQuery.length > 0 && (
                 <TouchableOpacity onPress={() => onSearchChange('')}>
-                  <AtomicIcon name="X" size="sm" color="secondary" />
+                  <AtomicIcon name={closeIcon} size="sm" color="secondary" />
                 </TouchableOpacity>
               )}
             </View>
@@ -192,7 +196,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
             />
           ) : (
             <View style={emptyStateStyles}>
-              <AtomicIcon name="Info" size="xl" color="secondary" />
+              <AtomicIcon name={infoIcon} size="xl" color="secondary" />
               <AtomicText style={emptyStateTextStyles}>
                 {emptyMessage}
               </AtomicText>

package/src/atoms/picker/types/index.ts

@@ -1,5 +1,5 @@
 import { ViewStyle, TextStyle } from 'react-native';
-import { IconColor } from '../../AtomicIcon';
+import { IconColor } from '../../icon';
 
 /**
  * Picker option item

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -10,6 +10,7 @@ import { View, StyleSheet, TouchableOpacity } from "react-native";
 import {
   AtomicIcon,
   AtomicText,
+  useIconName,
 } from "../../../atoms";
 import {
   useAppDesignTokens,
@@ -31,7 +32,7 @@ export interface ExceptionErrorStateProps {
 }
 
 export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
-  icon = "alert-circle-outline",
+  icon,
   title,
   description,
   actionLabel,
@@ -39,6 +40,9 @@ export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
   illustration,
 }) => {
   const tokens = useAppDesignTokens();
+  const alertCircleIcon = useIconName('alertCircle');
+  const refreshIcon = useIconName('refresh');
+  const displayIcon = icon || alertCircleIcon;
 
   const styles = React.useMemo(
     () =>
@@ -87,7 +91,7 @@ export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
         <View
           style={[styles.iconContainer, { backgroundColor: tokens.colors.surface }]}
         >
-          <AtomicIcon name={icon as never} size="xxl" color="secondary" />
+          <AtomicIcon name={displayIcon as never} size="xxl" color="secondary" />
         </View>
       )}
 
@@ -107,7 +111,7 @@ export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
           onPress={onAction}
           activeOpacity={0.8}
         >
-          <AtomicIcon name="refresh-outline" size="sm" color="onPrimary" />
+          <AtomicIcon name={refreshIcon} size="sm" color="onPrimary" />
           <AtomicText type="labelLarge" color="onPrimary">
             {actionLabel}
           </AtomicText>

package/src/exports/atoms.ts

@@ -70,10 +70,13 @@ export {
   type GlassViewProps,
   AtomicImage,
   type AtomicImageProps,
-  // Icon Registry (for custom icon renderers)
-  IconProvider,
+  // Icon Store
+  useIconStore,
   useIconRenderer,
-  useHasCustomIconRenderer,
+  useIconName,
+  useHasIconConfig,
   type IconRenderProps,
   type IconRenderer,
+  type IconNames,
+  REQUIRED_ICON_KEYS,
 } from '../atoms';

package/src/image/presentation/components/editor/FilterPickerSheet.tsx

@@ -7,7 +7,7 @@ import { View, TouchableOpacity, ScrollView } from 'react-native';
 import { BottomSheetModal } from '../../../../molecules/bottom-sheet/components/BottomSheetModal';
 import type { BottomSheetModalRef } from '../../../../molecules/bottom-sheet/types/BottomSheet';
 import { AtomicText } from '../../../../atoms/AtomicText';
-import { AtomicIcon } from '../../../../atoms/AtomicIcon';
+import { AtomicIcon, useIconName } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
 import { FilterProcessor, type FilterPreset } from '../../../infrastructure/utils/FilterProcessor';
 
@@ -23,6 +23,7 @@ export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerShe
   ({ onSelectFilter, onDismiss, activeFilterId, snapPoints = ['50%'], title = 'Filters' }, ref) => {
     const tokens = useAppDesignTokens();
     const presets = FilterProcessor.getPresets();
+    const colorFilterIcon = useIconName('colorFilter');
 
     return (
       <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
@@ -48,10 +49,10 @@ export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerShe
                     borderColor: activeFilterId === preset.id ? tokens.colors.primary : 'transparent',
                   }}
                 >
-                  <AtomicIcon 
-                    name="color-filter" 
-                    size={32} 
-                    color={activeFilterId === preset.id ? 'primary' : 'secondary'} 
+                  <AtomicIcon
+                    name={colorFilterIcon}
+                    size={32}
+                    color={activeFilterId === preset.id ? 'primary' : 'secondary'}
                   />
                   <AtomicText style={{ 
                     ...tokens.typography.labelSmall,