@umituz/react-native-design-system 1.1.1 → 1.1.2

package/package.json

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

package/src/infrastructure/theme/globalThemeStore.ts

@@ -26,8 +26,7 @@
  */
 
 import { create } from 'zustand';
-
-export type ThemeMode = 'light' | 'dark';
+import type { ThemeMode } from '../../presentation/tokens/core/ColorPalette';
 
 interface GlobalThemeStore {
   /** Current theme mode */
@@ -47,3 +46,6 @@ export const useDesignSystemTheme = create<GlobalThemeStore>((set) => ({
   themeMode: 'light',
   setThemeMode: (mode: ThemeMode) => set({ themeMode: mode }),
 }));
+
+// Re-export ThemeMode for backward compatibility
+export type { ThemeMode };

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -7,9 +7,9 @@
  * Features:
  * - Platform-specific native pickers (iOS wheel, Android dialog)
  * - Consistent styling with design tokens
- * - Locale-aware date/time formatting (via timezone domain)
+ * - Locale-aware date/time formatting (native Date methods)
  * - Timezone-aware (respects device timezone)
- * - Automatic language integration (changes with app language)
+ * - Automatic language integration (native locale support)
  * - Optional label and error states
  * - Minimum and maximum date constraints
  * - Disabled state support
@@ -47,7 +47,6 @@ import {
 } from 'react-native';
 import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTimezone } from '@domains/timezone';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { useResponsive } from '../hooks/useResponsive';
 import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
@@ -104,7 +103,6 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
   const { height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const { isTabletDevice } = useResponsive();
-  const { formatDate: formatDateTz, formatTime } = useTimezone();
   const [show, setShow] = useState(false);
 
   /**
@@ -128,26 +126,35 @@ export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
 
   /**
    * Format date based on mode
-   * Uses timezone domain for locale-aware and timezone-aware formatting
-   * Automatically respects user's selected language and device timezone
+   * Uses native Date formatting (locale-aware)
    */
   const formatDate = (date: Date): string => {
     if (mode === 'time') {
-      // Format time only (e.g., "02:30 PM" in English, "14:30" in Turkish)
-      return formatTime(date);
+      // Format time only
+      return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
     }
     if (mode === 'datetime') {
-      // Format date + time (e.g., "January 15, 2024 02:30 PM")
-      const dateStr = formatDateTz(date, {
+      // Format date + time
+      const dateStr = date.toLocaleDateString([], {
         year: 'numeric',
         month: 'short',
         day: 'numeric',
       });
-      const timeStr = formatTime(date);
+      const timeStr = date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
       return `${dateStr} ${timeStr}`;
     }
-    // Format date only (e.g., "January 15, 2024" in English, "15 Ocak 2024" in Turkish)
-    return formatDateTz(date);
+    // Format date only
+    return date.toLocaleDateString([], {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
   };
 
   /**

package/src/presentation/atoms/AtomicIcon.tsx

@@ -1,29 +1,113 @@
 /**
  * AtomicIcon - Design System Icon Component
  *
- * Simple wrapper around Icon domain for backward compatibility.
- * All icon functionality is provided by @domains/icons.
- *
- * @deprecated Use Icon from @domains/icons directly in new code
+ * Universal icon component using Lucide icons.
+ * Provides semantic color mappings and size presets.
  */
 
 import React from 'react';
-import { Icon, type IconProps } from '@domains/icons';
+import * as LucideIcons from 'lucide-react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 
 /**
- * AtomicIcon Component (Wrapper)
- *
- * This is a simple wrapper around Icon from @domains/icons.
- * It exists for backward compatibility with existing code.
+ * Icon size presets
+ */
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+/**
+ * Semantic color tokens
+ */
+export type IconColor =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'info'
+  | 'onPrimary'
+  | 'onSurface'
+  | 'textPrimary'
+  | 'textSecondary'
+  | 'textDisabled';
+
+/**
+ * Icon component props
+ */
+export interface IconProps {
+  /** Icon name from Lucide icon set (PascalCase) */
+  name: string;
+  /** Semantic color token */
+  color?: IconColor;
+  /** Size preset */
+  size?: IconSize;
+  /** Custom size override (pixels) */
+  customSize?: number;
+  /** Custom color override (hex) */
+  customColor?: string;
+}
+
+/**
+ * Size mapping (pixels)
+ */
+const sizeMap: Record<IconSize, number> = {
+  xs: 16,
+  sm: 20,
+  md: 24,
+  lg: 28,
+  xl: 32,
+  xxl: 48,
+};
+
+/**
+ * AtomicIcon Component
  *
- * For new code, import Icon directly from @domains/icons
+ * Universal icon component with theme integration
  */
-export const AtomicIcon: React.FC<IconProps> = (props) => {
-  return <Icon {...props} />;
+export const AtomicIcon: React.FC<IconProps> = ({
+  name,
+  color = 'textPrimary',
+  size = 'md',
+  customSize,
+  customColor,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Get icon component from Lucide
+  const IconComponent = (LucideIcons as any)[name];
+
+  if (!IconComponent) {
+    console.warn(`Icon "${name}" not found in Lucide icon set`);
+    return null;
+  }
+
+  // Resolve color from semantic token
+  const resolveColor = (): string => {
+    if (customColor) return customColor;
+
+    const colorMap: Record<IconColor, string> = {
+      primary: tokens.colors.primary,
+      secondary: tokens.colors.secondary,
+      error: tokens.colors.error,
+      warning: tokens.colors.warning,
+      success: tokens.colors.success,
+      info: tokens.colors.info,
+      onPrimary: tokens.colors.onPrimary,
+      onSurface: tokens.colors.onSurface,
+      textPrimary: tokens.colors.textPrimary,
+      textSecondary: tokens.colors.textSecondary,
+      textDisabled: tokens.colors.textDisabled,
+    };
+
+    return colorMap[color];
+  };
+
+  // Resolve size
+  const iconSize = customSize || sizeMap[size];
+
+  return <IconComponent color={resolveColor()} size={iconSize} />;
 };
 
 // Re-export types for backward compatibility
-export type { IconProps as AtomicIconProps } from '@domains/icons';
-export type { IconSize as AtomicIconSize } from '@domains/icons';
-export type { IconColor as AtomicIconColor } from '@domains/icons';
-export type { IconName as AtomicIconName } from '@domains/icons';
+export type AtomicIconProps = IconProps;
+export type AtomicIconSize = IconSize;
+export type AtomicIconColor = IconColor;