@umituz/react-native-design-system 2.6.66 → 2.6.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.66",
+  "version": "2.6.67",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/picker/styles/pickerModalStyles.ts

@@ -0,0 +1,36 @@
+/**
+ * Picker Modal Styles
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export const getModalOverlayStyles = (): ViewStyle => ({
+  flex: 1,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  justifyContent: 'flex-end',
+});
+
+export const getModalContainerStyles = (tokens: DesignTokens, bottomInset: number): ViewStyle => ({
+  backgroundColor: tokens.colors.surface,
+  borderTopLeftRadius: tokens.borders.radius.lg,
+  borderTopRightRadius: tokens.borders.radius.lg,
+  maxHeight: '80%',
+  paddingBottom: bottomInset,
+});
+
+export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  paddingHorizontal: tokens.spacing.md,
+  paddingVertical: tokens.spacing.md,
+  borderBottomWidth: 1,
+  borderBottomColor: tokens.colors.outline,
+});
+
+export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
+  fontSize: tokens.typography.titleLarge.responsiveFontSize,
+  fontWeight: '600',
+  color: tokens.colors.onSurface,
+});

package/src/atoms/picker/styles/pickerOptionStyles.ts

@@ -0,0 +1,32 @@
+/**
+ * Picker Option Styles
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export const getOptionContainerStyles = (
+  tokens: DesignTokens,
+  selected: boolean,
+  disabled: boolean
+): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingHorizontal: tokens.spacing.md,
+  paddingVertical: tokens.spacing.md,
+  gap: tokens.spacing.md,
+  backgroundColor: selected ? tokens.colors.surfaceVariant : 'transparent',
+  opacity: disabled ? tokens.opacity.disabled : 1,
+});
+
+export const getOptionTextStyles = (tokens: DesignTokens, selected: boolean): TextStyle => ({
+  fontSize: tokens.typography.bodyLarge.responsiveFontSize,
+  color: selected ? tokens.colors.primary : tokens.colors.onSurface,
+  fontWeight: selected ? '600' : '400',
+});
+
+export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
+  fontSize: tokens.typography.bodySmall.responsiveFontSize,
+  color: tokens.colors.textSecondary,
+  marginTop: tokens.spacing.xs,
+});

package/src/atoms/picker/styles/pickerSearchStyles.ts

@@ -0,0 +1,25 @@
+/**
+ * Picker Search Styles
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceVariant,
+  borderRadius: tokens.borders.radius.md,
+  marginHorizontal: tokens.spacing.md,
+  marginVertical: tokens.spacing.sm,
+  paddingHorizontal: tokens.spacing.md,
+  paddingVertical: tokens.spacing.sm,
+  gap: tokens.spacing.sm,
+});
+
+export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
+  flex: 1,
+  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+  color: tokens.colors.onSurface,
+  paddingVertical: 0,
+});

package/src/atoms/picker/styles/pickerStateStyles.ts

@@ -0,0 +1,42 @@
+/**
+ * Picker Empty State & Chip Styles
+ */
+
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingVertical: tokens.spacing.xl,
+  gap: tokens.spacing.md,
+});
+
+export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
+  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+  color: tokens.colors.textSecondary,
+  textAlign: 'center',
+});
+
+export const getChipContainerStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: tokens.spacing.xs,
+  marginTop: tokens.spacing.sm,
+});
+
+export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceVariant,
+  borderRadius: tokens.borders.radius.full,
+  paddingHorizontal: tokens.spacing.sm,
+  paddingVertical: tokens.spacing.xs,
+  gap: tokens.spacing.xs,
+});
+
+export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
+  fontSize: tokens.typography.bodySmall.responsiveFontSize,
+  color: tokens.colors.onSurface,
+});

package/src/atoms/picker/styles/pickerStyles.ts

@@ -7,217 +7,111 @@ import type { DesignTokens } from '../../../theme';
 export type PickerSize = 'sm' | 'md' | 'lg';
 
 export interface PickerContainerStyles {
-    base: ViewStyle;
-    size: Record<PickerSize, ViewStyle>;
-    state: {
-        error: ViewStyle;
-        disabled: ViewStyle;
-    };
+  base: ViewStyle;
+  size: Record<PickerSize, ViewStyle>;
+  state: {
+    error: ViewStyle;
+    disabled: ViewStyle;
+  };
 }
 
 export interface PickerLabelStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export interface PickerValueStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export interface PickerPlaceholderStyles {
-    base: TextStyle;
-    size: Record<PickerSize, TextStyle>;
+  base: TextStyle;
+  size: Record<PickerSize, TextStyle>;
 }
 
 export const getPickerContainerStyles = (tokens: DesignTokens): PickerContainerStyles => ({
-    base: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderWidth: 1,
-        borderColor: tokens.colors.outline,
-        backgroundColor: tokens.colors.surface,
-        borderRadius: tokens.borders.radius.md,
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: tokens.colors.outline,
+    backgroundColor: tokens.colors.surface,
+    borderRadius: tokens.borders.radius.md,
+  },
+  size: {
+    sm: {
+      paddingHorizontal: tokens.spacing.sm,
+      paddingVertical: tokens.spacing.xs,
+      minHeight: 36 * tokens.spacingMultiplier,
     },
-    size: {
-        sm: {
-            paddingHorizontal: tokens.spacing.sm,
-            paddingVertical: tokens.spacing.xs,
-            minHeight: 36 * tokens.spacingMultiplier,
-        },
-        md: {
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.sm,
-            minHeight: 48 * tokens.spacingMultiplier,
-        },
-        lg: {
-            paddingHorizontal: tokens.spacing.lg,
-            paddingVertical: tokens.spacing.md,
-            minHeight: 56 * tokens.spacingMultiplier,
-        },
+    md: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      minHeight: 48 * tokens.spacingMultiplier,
     },
-    state: {
-        error: {
-            borderColor: tokens.colors.error,
-        },
-        disabled: {
-            opacity: tokens.opacity.disabled,
-        },
+    lg: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing.md,
+      minHeight: 56 * tokens.spacingMultiplier,
     },
-});
-
-export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles => ({
-    base: {
-        color: tokens.colors.textPrimary,
-        marginBottom: tokens.spacing.xs,
+  },
+  state: {
+    error: {
+      borderColor: tokens.colors.error,
     },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+    disabled: {
+      opacity: tokens.opacity.disabled,
     },
+  },
 });
 
-export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles => ({
-    base: {
-        color: tokens.colors.textPrimary,
-        flex: 1,
-    },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
-    },
-});
-
-export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlaceholderStyles => ({
-    base: {
-        color: tokens.colors.textTertiary,
-        flex: 1,
-    },
-    size: {
-        sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
-        md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
-        lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
-    },
-});
-
-export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
-    color: tokens.colors.error,
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    marginTop: tokens.spacing.xs,
-});
-
-// Modal styles
-export const getModalOverlayStyles = (): ViewStyle => ({
-    flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    justifyContent: 'flex-end',
-});
-
-export const getModalContainerStyles = (tokens: DesignTokens, bottomInset: number): ViewStyle => ({
-    backgroundColor: tokens.colors.surface,
-    borderTopLeftRadius: tokens.borders.radius.lg,
-    borderTopRightRadius: tokens.borders.radius.lg,
-    maxHeight: '80%',
-    paddingBottom: bottomInset,
-});
-
-export const getModalHeaderStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: tokens.colors.outline,
-});
-
-export const getModalTitleStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.titleLarge.responsiveFontSize,
-    fontWeight: '600',
-    color: tokens.colors.onSurface,
-});
-
-export const getSearchContainerStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.surfaceVariant,
-    borderRadius: tokens.borders.radius.md,
-    marginHorizontal: tokens.spacing.md,
-    marginVertical: tokens.spacing.sm,
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.sm,
-    gap: tokens.spacing.sm,
+export const getPickerLabelStyles = (tokens: DesignTokens): PickerLabelStyles => ({
+  base: {
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.xs,
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-export const getSearchInputStyles = (tokens: DesignTokens): TextStyle => ({
+export const getPickerValueStyles = (tokens: DesignTokens): PickerValueStyles => ({
+  base: {
+    color: tokens.colors.textPrimary,
     flex: 1,
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    color: tokens.colors.onSurface,
-    paddingVertical: 0,
-});
-
-export const getOptionContainerStyles = (
-    tokens: DesignTokens,
-    selected: boolean,
-    disabled: boolean
-): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: tokens.spacing.md,
-    paddingVertical: tokens.spacing.md,
-    gap: tokens.spacing.md,
-    backgroundColor: selected ? tokens.colors.surfaceVariant : 'transparent',
-    opacity: disabled ? tokens.opacity.disabled : 1,
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-export const getOptionTextStyles = (tokens: DesignTokens, selected: boolean): TextStyle => ({
-    fontSize: tokens.typography.bodyLarge.responsiveFontSize,
-    color: selected ? tokens.colors.primary : tokens.colors.onSurface,
-    fontWeight: selected ? '600' : '400',
-});
-
-export const getOptionDescriptionStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    color: tokens.colors.textSecondary,
-    marginTop: tokens.spacing.xs,
-});
-
-export const getEmptyStateStyles = (tokens: DesignTokens): ViewStyle => ({
+export const getPickerPlaceholderStyles = (tokens: DesignTokens): PickerPlaceholderStyles => ({
+  base: {
+    color: tokens.colors.textTertiary,
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingVertical: tokens.spacing.xl,
-    gap: tokens.spacing.md,
-});
-
-export const getEmptyStateTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    color: tokens.colors.textSecondary,
-    textAlign: 'center',
+  },
+  size: {
+    sm: { fontSize: tokens.typography.bodySmall.responsiveFontSize },
+    md: { fontSize: tokens.typography.bodyMedium.responsiveFontSize },
+    lg: { fontSize: tokens.typography.bodyLarge.responsiveFontSize },
+  },
 });
 
-// Chip styles
-export const getChipContainerStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: tokens.spacing.xs,
-    marginTop: tokens.spacing.sm,
+export const getPickerErrorStyles = (tokens: DesignTokens): TextStyle => ({
+  color: tokens.colors.error,
+  fontSize: tokens.typography.bodySmall.responsiveFontSize,
+  marginTop: tokens.spacing.xs,
 });
 
-export const getChipStyles = (tokens: DesignTokens): ViewStyle => ({
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: tokens.colors.surfaceVariant,
-    borderRadius: tokens.borders.radius.full,
-    paddingHorizontal: tokens.spacing.sm,
-    paddingVertical: tokens.spacing.xs,
-    gap: tokens.spacing.xs,
-});
+// Re-export modal, search, option, and chip styles
+export * from './pickerModalStyles';
+export * from './pickerSearchStyles';
+export * from './pickerOptionStyles';
+export * from './pickerStateStyles';
 
-export const getChipTextStyles = (tokens: DesignTokens): TextStyle => ({
-    fontSize: tokens.typography.bodySmall.responsiveFontSize,
-    color: tokens.colors.onSurface,
-});

package/src/molecules/calendar/presentation/components/AtomicCalendar.tsx

@@ -31,10 +31,13 @@
  */
 
 import React from 'react';
-import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens, AtomicText } from '../../../../index';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../../index';
 import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
 import { CalendarService } from '../../infrastructure/services/CalendarService';
+import { calendarStyles } from './calendarStyles';
+import { CalendarWeekdayHeader } from './CalendarWeekdayHeader';
+import { CalendarDayCell } from './CalendarDayCell';
 
 /**
  * AtomicCalendar Props
@@ -104,176 +107,32 @@ export const AtomicCalendar: React.FC<AtomicCalendarProps> = ({
   testID,
 }) => {
   const tokens = useAppDesignTokens();
-
-  // Get weekday names (localized)
   const weekdayNames = CalendarService.getWeekdayNames();
 
   return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.surface }, style]} testID={testID}>
-      {/* Weekday Headers */}
-      {showWeekdayHeaders && (
-        <View style={styles.weekdayHeader}>
-          {weekdayNames.map((day, index) => (
-            <View key={index} style={styles.weekdayCell}>
-              <AtomicText
-                type="bodySmall"
-                color="secondary"
-                style={styles.weekdayText}
-              >
-                {day}
-              </AtomicText>
-            </View>
-          ))}
-        </View>
-      )}
+    <View style={[calendarStyles.container, { backgroundColor: tokens.colors.surface }, style]} testID={testID}>
+      {showWeekdayHeaders && <CalendarWeekdayHeader weekdayNames={weekdayNames} />}
 
-      {/* Calendar Grid */}
-      <View style={styles.grid}>
+      <View style={calendarStyles.grid}>
         {days.map((day, index) => {
           const isSelected = CalendarService.isSameDay(day.date, selectedDate);
-          const eventCount = day.events.length;
-          const visibleEvents = day.events.slice(0, maxEventIndicators);
-          const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
 
           return (
-            <TouchableOpacity
+            <CalendarDayCell
               key={index}
-              style={[
-                styles.dayCell,
-                {
-                  backgroundColor: isSelected
-                    ? tokens.colors.primary
-                    : 'transparent',
-                  borderColor: isSelected
-                    ? tokens.colors.primary
-                    : day.isToday
-                      ? tokens.colors.primary
-                      : tokens.colors.border,
-                  borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
-                  opacity: day.isDisabled ? 0.4 : 1,
-                },
-                dayStyle,
-              ]}
-              onPress={() => !day.isDisabled && onDateSelect(day.date)}
-              disabled={day.isDisabled}
-              testID={testID ? `${testID}-day-${index}` : undefined}
-              accessibilityLabel={`${day.date.toLocaleDateString()}, ${eventCount} events`}
-              accessibilityRole="button"
-              accessibilityState={{ disabled: day.isDisabled, selected: isSelected }}
-            >
-              {/* Day Number */}
-              <AtomicText
-                type="bodyMedium"
-                color={
-                  isSelected
-                    ? 'inverse'
-                    : day.isCurrentMonth
-                      ? 'primary'
-                      : 'secondary'
-                }
-                style={[
-                  styles.dayText,
-                  day.isToday && !isSelected && { fontWeight: 'bold' },
-                ]}
-              >
-                {day.date.getDate()}
-              </AtomicText>
-
-              {/* Event Indicators */}
-              <View style={styles.eventIndicators}>
-                {/* Today indicator (if today and has no events) */}
-                {day.isToday && eventCount === 0 && (
-                  <View
-                    style={[
-                      styles.eventDot,
-                      { backgroundColor: tokens.colors.success },
-                    ]}
-                  />
-                )}
-
-                {/* Event dots */}
-                {visibleEvents.map((event, eventIndex) => (
-                  <View
-                    key={eventIndex}
-                    style={[
-                      styles.eventDot,
-                      {
-                        backgroundColor: event.color
-                          ? event.color
-                          : event.isCompleted
-                            ? tokens.colors.success
-                            : tokens.colors.primary,
-                      },
-                    ]}
-                  />
-                ))}
-
-                {/* More events count */}
-                {showEventCount && hiddenEventCount > 0 && (
-                  <AtomicText
-                    type="bodySmall"
-                    color="secondary"
-                    style={styles.moreEventsText}
-                  >
-                    +{hiddenEventCount}
-                  </AtomicText>
-                )}
-              </View>
-            </TouchableOpacity>
+              day={day}
+              index={index}
+              isSelected={isSelected}
+              selectedDate={selectedDate}
+              onDateSelect={onDateSelect}
+              maxEventIndicators={maxEventIndicators}
+              showEventCount={showEventCount}
+              dayStyle={dayStyle}
+              testID={testID}
+            />
           );
         })}
       </View>
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-    padding: 16,
-  },
-  weekdayHeader: {
-    flexDirection: 'row',
-    marginBottom: 12,
-  },
-  weekdayCell: {
-    flex: 1,
-    alignItems: 'center',
-  },
-  weekdayText: {
-    textAlign: 'center',
-  },
-  grid: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-  },
-  dayCell: {
-    width: `${100 / 7}%`,
-    aspectRatio: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 8,
-    marginBottom: 4,
-    padding: 4,
-  },
-  dayText: {
-    textAlign: 'center',
-  },
-  eventIndicators: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginTop: 4,
-    gap: 2,
-    flexWrap: 'wrap',
-  },
-  eventDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-  },
-  moreEventsText: {
-    fontSize: 8,
-    marginLeft: 2,
-  },
-});

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -0,0 +1,101 @@
+/**
+ * Calendar Day Cell Component
+ */
+
+import React from 'react';
+import { TouchableOpacity, View, StyleProp, ViewStyle } from 'react-native';
+import { AtomicText, useAppDesignTokens } from '../../../../index';
+import type { CalendarDay } from '../../domain/entities/CalendarDay.entity';
+import { CalendarService } from '../../infrastructure/services/CalendarService';
+import { calendarStyles } from './calendarStyles';
+
+interface CalendarDayCellProps {
+  day: CalendarDay;
+  index: number;
+  isSelected: boolean;
+  selectedDate: Date;
+  onDateSelect: (date: Date) => void;
+  maxEventIndicators: number;
+  showEventCount: boolean;
+  dayStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const CalendarDayCell: React.FC<CalendarDayCellProps> = ({
+  day,
+  index,
+  isSelected,
+  selectedDate,
+  onDateSelect,
+  maxEventIndicators,
+  showEventCount,
+  dayStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const eventCount = day.events.length;
+  const visibleEvents = day.events.slice(0, maxEventIndicators);
+  const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
+
+  return (
+    <TouchableOpacity
+      key={index}
+      style={[
+        calendarStyles.dayCell,
+        {
+          backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+          borderColor: isSelected
+            ? tokens.colors.primary
+            : day.isToday
+              ? tokens.colors.primary
+              : tokens.colors.border,
+          borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
+          opacity: day.isDisabled ? 0.4 : 1,
+        },
+        dayStyle,
+      ]}
+      onPress={() => !day.isDisabled && onDateSelect(day.date)}
+      disabled={day.isDisabled}
+      testID={testID ? `${testID}-day-${index}` : undefined}
+      accessibilityLabel={`${day.date.toLocaleDateString()}, ${eventCount} events`}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: day.isDisabled, selected: isSelected }}
+    >
+      <AtomicText
+        type="bodyMedium"
+        color={isSelected ? 'inverse' : day.isCurrentMonth ? 'primary' : 'secondary'}
+        style={[calendarStyles.dayText, day.isToday && !isSelected && { fontWeight: 'bold' }]}
+      >
+        {day.date.getDate()}
+      </AtomicText>
+
+      <View style={calendarStyles.eventIndicators}>
+        {day.isToday && eventCount === 0 && (
+          <View style={[calendarStyles.eventDot, { backgroundColor: tokens.colors.success }]} />
+        )}
+
+        {visibleEvents.map((event, eventIndex) => (
+          <View
+            key={eventIndex}
+            style={[
+              calendarStyles.eventDot,
+              {
+                backgroundColor: event.color
+                  ? event.color
+                  : event.isCompleted
+                    ? tokens.colors.success
+                    : tokens.colors.primary,
+              },
+            ]}
+          />
+        ))}
+
+        {showEventCount && hiddenEventCount > 0 && (
+          <AtomicText type="bodySmall" color="secondary" style={calendarStyles.moreEventsText}>
+            +{hiddenEventCount}
+          </AtomicText>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/molecules/calendar/presentation/components/CalendarWeekdayHeader.tsx

@@ -0,0 +1,28 @@
+/**
+ * Calendar Weekday Header Component
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicText } from '../../../../index';
+import { calendarStyles } from './calendarStyles';
+
+interface CalendarWeekdayHeaderProps {
+  weekdayNames: string[];
+}
+
+export const CalendarWeekdayHeader: React.FC<CalendarWeekdayHeaderProps> = ({
+  weekdayNames,
+}) => {
+  return (
+    <View style={calendarStyles.weekdayHeader}>
+      {weekdayNames.map((day, index) => (
+        <View key={index} style={calendarStyles.weekdayCell}>
+          <AtomicText type="bodySmall" color="secondary" style={calendarStyles.weekdayText}>
+            {day}
+          </AtomicText>
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/molecules/calendar/presentation/components/calendarStyles.ts

@@ -0,0 +1,56 @@
+/**
+ * Calendar Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const calendarStyles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    padding: 16,
+  },
+  weekdayHeader: {
+    flexDirection: 'row',
+    marginBottom: 12,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  weekdayText: {
+    textAlign: 'center',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: `${100 / 7}%`,
+    aspectRatio: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    marginBottom: 4,
+    padding: 4,
+  },
+  dayText: {
+    textAlign: 'center',
+  },
+  eventIndicators: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 4,
+    gap: 2,
+    flexWrap: 'wrap',
+  },
+  eventDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  moreEventsText: {
+    fontSize: 8,
+    marginLeft: 2,
+  },
+});

package/src/theme/hooks/commonStyles/formStyles.ts

@@ -0,0 +1,17 @@
+/**
+ * Form Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createFormStyles = (tokens: DesignTokens) => ({
+  form: {
+    width: '100%',
+  } as ViewStyle,
+
+  formHeader: {
+    alignItems: 'center',
+    marginBottom: tokens.spacing.xl,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/layoutStyles.ts

@@ -0,0 +1,38 @@
+/**
+ * Layout Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createLayoutStyles = (tokens: DesignTokens) => ({
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  centerContainerPadded: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: tokens.spacing.xl,
+  } as ViewStyle,
+
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+
+  rowBetween: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  } as ViewStyle,
+
+  rowCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/paddingStyles.ts

@@ -0,0 +1,20 @@
+/**
+ * Padding Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createPaddingStyles = (tokens: DesignTokens) => ({
+  paddedHorizontal: {
+    paddingHorizontal: tokens.spacing.lg,
+  } as ViewStyle,
+
+  paddedVertical: {
+    paddingVertical: tokens.spacing.lg,
+  } as ViewStyle,
+
+  padded: {
+    padding: tokens.spacing.lg,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/screenContainerStyles.ts

@@ -0,0 +1,22 @@
+/**
+ * Screen Container Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createScreenContainerStyles = (tokens: DesignTokens) => ({
+  screenContainer: {
+    flex: 1,
+    backgroundColor: tokens.colors.backgroundPrimary,
+  } as ViewStyle,
+
+  flexContainer: {
+    flex: 1,
+  } as ViewStyle,
+
+  screenContainerSecondary: {
+    flex: 1,
+    backgroundColor: tokens.colors.backgroundSecondary,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/scrollContainerStyles.ts

@@ -0,0 +1,28 @@
+/**
+ * Scroll Container Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createScrollContainerStyles = (tokens: DesignTokens) => ({
+  scrollView: {
+    flex: 1,
+  } as ViewStyle,
+
+  scrollContent: {
+    paddingHorizontal: tokens.spacing.lg,
+    paddingBottom: tokens.spacing.xl,
+  } as ViewStyle,
+
+  scrollContentGrow: {
+    flexGrow: 1,
+    padding: tokens.spacing.lg,
+  } as ViewStyle,
+
+  scrollContentCentered: {
+    flexGrow: 1,
+    padding: tokens.spacing.lg,
+    justifyContent: 'center',
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/sectionStyles.ts

@@ -0,0 +1,17 @@
+/**
+ * Section Styles
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createSectionStyles = (tokens: DesignTokens) => ({
+  section: {
+    marginBottom: tokens.spacing.xl,
+  } as ViewStyle,
+
+  sectionPadded: {
+    marginBottom: tokens.spacing.xl,
+    paddingHorizontal: tokens.spacing.lg,
+  } as ViewStyle,
+});

package/src/theme/hooks/commonStyles/textStyles.ts

@@ -0,0 +1,36 @@
+/**
+ * Text Styles
+ */
+
+import type { TextStyle } from 'react-native';
+import type { DesignTokens } from '../../types/ThemeTypes';
+
+export const createTextStyles = (tokens: DesignTokens) => ({
+  screenTitle: {
+    ...tokens.typography.headingLarge,
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.sm,
+  } as TextStyle,
+
+  sectionTitle: {
+    ...tokens.typography.headingMedium,
+    color: tokens.colors.textPrimary,
+    marginBottom: tokens.spacing.md,
+  } as TextStyle,
+
+  subtitle: {
+    ...tokens.typography.bodyMedium,
+    color: tokens.colors.textSecondary,
+    textAlign: 'center',
+  } as TextStyle,
+
+  bodyText: {
+    ...tokens.typography.bodyMedium,
+    color: tokens.colors.textPrimary,
+  } as TextStyle,
+
+  secondaryText: {
+    ...tokens.typography.bodySmall,
+    color: tokens.colors.textSecondary,
+  } as TextStyle,
+});

package/src/theme/hooks/useCommonStyles.ts

@@ -16,8 +16,14 @@
  */
 
 import { useMemo } from 'react';
-import type { ViewStyle, TextStyle } from 'react-native';
 import { useAppDesignTokens } from './useAppDesignTokens';
+import { createScreenContainerStyles } from './commonStyles/screenContainerStyles';
+import { createScrollContainerStyles } from './commonStyles/scrollContainerStyles';
+import { createLayoutStyles } from './commonStyles/layoutStyles';
+import { createPaddingStyles } from './commonStyles/paddingStyles';
+import { createSectionStyles } from './commonStyles/sectionStyles';
+import { createTextStyles } from './commonStyles/textStyles';
+import { createFormStyles } from './commonStyles/formStyles';
 
 /**
  * Hook to get common styles with dynamic theme support
@@ -25,224 +31,14 @@ import { useAppDesignTokens } from './useAppDesignTokens';
  */
 export const useCommonStyles = () => {
   const tokens = useAppDesignTokens();
-  
+
   return useMemo(() => ({
-    // ========================================================================
-    // SCREEN CONTAINERS
-    // ========================================================================
-    /**
-     * Standard full-screen container
-     * Most common pattern: flex: 1 with background color
-     */
-    screenContainer: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundPrimary,
-    } as ViewStyle,
-    
-    /**
-     * Basic flex container without background
-     * Use when background is set elsewhere or not needed
-     */
-    flexContainer: {
-      flex: 1,
-    } as ViewStyle,
-    
-    /**
-     * Screen container with secondary background
-     */
-    screenContainerSecondary: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundSecondary,
-    } as ViewStyle,
-    
-    // ========================================================================
-    // SCROLL CONTAINERS
-    // ========================================================================
-    /**
-     * Standard ScrollView wrapper
-     */
-    scrollView: {
-      flex: 1,
-    } as ViewStyle,
-    
-    /**
-     * ScrollView content container with standard padding
-     */
-    scrollContent: {
-      paddingHorizontal: tokens.spacing.lg,
-      paddingBottom: tokens.spacing.xl,
-    } as ViewStyle,
-    
-    /**
-     * ScrollView content that grows to fill available space
-     */
-    scrollContentGrow: {
-      flexGrow: 1,
-      padding: tokens.spacing.lg,
-    } as ViewStyle,
-    
-    /**
-     * Centered scroll content (for forms, onboarding screens)
-     */
-    scrollContentCentered: {
-      flexGrow: 1,
-      padding: tokens.spacing.lg,
-      justifyContent: 'center',
-    } as ViewStyle,
-    
-    // ========================================================================
-    // LAYOUT UTILITIES
-    // ========================================================================
-    /**
-     * Centered container - both horizontal and vertical
-     * Perfect for empty states, splash screens
-     */
-    centerContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    } as ViewStyle,
-    
-    /**
-     * Centered container with padding
-     */
-    centerContainerPadded: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingHorizontal: tokens.spacing.xl,
-    } as ViewStyle,
-    
-    /**
-     * Horizontal row layout
-     */
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    } as ViewStyle,
-    
-    /**
-     * Horizontal row with space between
-     */
-    rowBetween: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    } as ViewStyle,
-    
-    /**
-     * Horizontal row centered
-     */
-    rowCenter: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    } as ViewStyle,
-    
-    // ========================================================================
-    // PADDING UTILITIES
-    // ========================================================================
-    /**
-     * Standard horizontal padding
-     */
-    paddedHorizontal: {
-      paddingHorizontal: tokens.spacing.lg,
-    } as ViewStyle,
-    
-    /**
-     * Standard vertical padding
-     */
-    paddedVertical: {
-      paddingVertical: tokens.spacing.lg,
-    } as ViewStyle,
-    
-    /**
-     * Standard padding all sides
-     */
-    padded: {
-      padding: tokens.spacing.lg,
-    } as ViewStyle,
-    
-    // ========================================================================
-    // SECTION STYLES
-    // ========================================================================
-    /**
-     * Standard section container
-     */
-    section: {
-      marginBottom: tokens.spacing.xl,
-    } as ViewStyle,
-    
-    /**
-     * Section with padding
-     */
-    sectionPadded: {
-      marginBottom: tokens.spacing.xl,
-      paddingHorizontal: tokens.spacing.lg,
-    } as ViewStyle,
-    
-    // ========================================================================
-    // TEXT STYLES
-    // ========================================================================
-    /**
-     * Screen title - primary heading
-     */
-    screenTitle: {
-      ...tokens.typography.headingLarge,
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.sm,
-    } as TextStyle,
-    
-    /**
-     * Section title
-     */
-    sectionTitle: {
-      ...tokens.typography.headingMedium,
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.md,
-    } as TextStyle,
-    
-    /**
-     * Subtitle/description text
-     */
-    subtitle: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textSecondary,
-      textAlign: 'center',
-    } as TextStyle,
-    
-    /**
-     * Body text
-     */
-    bodyText: {
-      ...tokens.typography.bodyMedium,
-      color: tokens.colors.textPrimary,
-    } as TextStyle,
-    
-    /**
-     * Secondary text (muted)
-     */
-    secondaryText: {
-      ...tokens.typography.bodySmall,
-      color: tokens.colors.textSecondary,
-    } as TextStyle,
-    
-    // ========================================================================
-    // FORM STYLES
-    // ========================================================================
-    /**
-     * Form container
-     */
-    form: {
-      width: '100%',
-    } as ViewStyle,
-    
-    /**
-     * Form header section
-     */
-    formHeader: {
-      alignItems: 'center',
-      marginBottom: tokens.spacing.xl,
-    } as ViewStyle,
+    ...createScreenContainerStyles(tokens),
+    ...createScrollContainerStyles(tokens),
+    ...createLayoutStyles(tokens),
+    ...createPaddingStyles(tokens),
+    ...createSectionStyles(tokens),
+    ...createTextStyles(tokens),
+    ...createFormStyles(tokens),
   }), [tokens]);
 };