@urbint/cl 1.0.1

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,1228 @@
+/**
+ * DatePicker Component
+ * A comprehensive date and time picker with multiple modes
+ * Supports: date only, time only, date and time selection (side by side)
+ */
+
+import React, { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
+import {
+  View,
+  ViewProps,
+  Pressable,
+  Text,
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Platform,
+  LayoutRectangle,
+} from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography } from '../../styles/tokens';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type DatePickerMode = 'date' | 'time' | 'datetime';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export type DatePickerVariant = 'outline' | 'filled';
+
+export interface DatePickerProps extends Omit<ViewProps, 'children'> {
+  /** Picker mode */
+  mode?: DatePickerMode;
+  /** Selected date/time value */
+  value?: Date;
+  /** Default date/time value */
+  defaultValue?: Date;
+  /** On change handler */
+  onChange?: (date: Date) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label text */
+  label?: string;
+  /** Helper text */
+  helperText?: string;
+  /** Error message */
+  errorMessage?: string;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is required */
+  isRequired?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Picker size */
+  size?: DatePickerSize;
+  /** Picker variant */
+  variant?: DatePickerVariant;
+  /** Date format display function */
+  formatDate?: (date: Date, mode: DatePickerMode) => string;
+  /** Use 24-hour format for time */
+  use24HourFormat?: boolean;
+  /** First day of week (0 = Sunday, 1 = Monday) */
+  firstDayOfWeek?: 0 | 1;
+  /** Show "Now" button to select current date/time */
+  showNowButton?: boolean;
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+const MONTHS = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December',
+];
+
+const MONTHS_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+];
+
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const WEEKDAYS_MONDAY_FIRST = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+const getDaysInMonth = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+const getFirstDayOfMonth = (year: number, month: number): number => {
+  return new Date(year, month, 1).getDay();
+};
+
+const isSameDay = (date1: Date, date2: Date): boolean => {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+};
+
+const isDateDisabled = (date: Date, minDate?: Date, maxDate?: Date): boolean => {
+  if (minDate) {
+    const min = new Date(minDate);
+    min.setHours(0, 0, 0, 0);
+    if (date < min) return true;
+  }
+  if (maxDate) {
+    const max = new Date(maxDate);
+    max.setHours(23, 59, 59, 999);
+    if (date > max) return true;
+  }
+  return false;
+};
+
+const defaultFormatDate = (date: Date, mode: DatePickerMode): string => {
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = (date.getMonth() + 1).toString().padStart(2, '0');
+  const year = date.getFullYear();
+  const hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const hour12 = hours % 12 || 12;
+
+  switch (mode) {
+    case 'date':
+      return `${month}/${day}/${year}`;
+    case 'time':
+      return `${hour12}:${minutes} ${ampm}`;
+    case 'datetime':
+      return `${month}/${day}/${year} ${hour12}:${minutes} ${ampm}`;
+    default:
+      return `${month}/${day}/${year}`;
+  }
+};
+
+// ============================================================================
+// Icons
+// ============================================================================
+
+const CalendarIcon = ({ color, size = 20 }: { color: string; size?: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const ClockIcon = ({ color, size = 20 }: { color: string; size?: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M12 6v6l4 2M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const ChevronLeftIcon = ({ color, size = 16 }: { color: string; size?: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M15 18l-6-6 6-6"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const ChevronRightIcon = ({ color, size = 16 }: { color: string; size?: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M9 18l6-6-6-6"
+      stroke={color}
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export const DatePicker = forwardRef<View, DatePickerProps>(
+  (
+    {
+      style,
+      mode = 'date',
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder,
+      label,
+      helperText,
+      errorMessage,
+      isInvalid = false,
+      isDisabled = false,
+      isRequired = false,
+      minDate,
+      maxDate,
+      size = 'md',
+      variant = 'outline',
+      formatDate = defaultFormatDate,
+      use24HourFormat = false,
+      firstDayOfWeek = 0,
+      showNowButton = true,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState<Date | undefined>(defaultValue);
+    const [dropdownPosition, setDropdownPosition] = useState<LayoutRectangle | null>(null);
+    const [viewDate, setViewDate] = useState(controlledValue || defaultValue || new Date());
+    const pickerRef = useRef<View>(null);
+
+    const isControlled = controlledValue !== undefined;
+    const selectedDate = isControlled ? controlledValue : internalValue;
+    const hasError = isInvalid || !!errorMessage;
+
+    const defaultPlaceholder = useMemo(() => {
+      switch (mode) {
+        case 'date':
+          return 'Select date';
+        case 'time':
+          return 'Select time';
+        case 'datetime':
+          return 'Select date & time';
+        default:
+          return 'Select';
+      }
+    }, [mode]);
+
+    const weekdays = firstDayOfWeek === 1 ? WEEKDAYS_MONDAY_FIRST : WEEKDAYS;
+
+    // Generate calendar days including previous/next month days
+    const calendarDays = useMemo(() => {
+      const year = viewDate.getFullYear();
+      const month = viewDate.getMonth();
+      const daysInMonth = getDaysInMonth(year, month);
+      const daysInPrevMonth = getDaysInMonth(year, month - 1);
+      const firstDay = getFirstDayOfMonth(year, month);
+      const adjustedFirstDay = firstDayOfWeek === 1 ? (firstDay === 0 ? 6 : firstDay - 1) : firstDay;
+
+      const days: { day: number; isCurrentMonth: boolean; isPrevMonth: boolean; isNextMonth: boolean }[] = [];
+
+      // Add days from previous month
+      for (let i = adjustedFirstDay - 1; i >= 0; i--) {
+        days.push({
+          day: daysInPrevMonth - i,
+          isCurrentMonth: false,
+          isPrevMonth: true,
+          isNextMonth: false,
+        });
+      }
+
+      // Add days of the current month
+      for (let i = 1; i <= daysInMonth; i++) {
+        days.push({
+          day: i,
+          isCurrentMonth: true,
+          isPrevMonth: false,
+          isNextMonth: false,
+        });
+      }
+
+      // Add days from next month to fill the grid (6 rows)
+      const remainingDays = 42 - days.length;
+      for (let i = 1; i <= remainingDays; i++) {
+        days.push({
+          day: i,
+          isCurrentMonth: false,
+          isPrevMonth: false,
+          isNextMonth: true,
+        });
+      }
+
+      return days;
+    }, [viewDate, firstDayOfWeek]);
+
+    // Generate hours
+    const hours = useMemo(() => {
+      if (use24HourFormat) {
+        return Array.from({ length: 24 }, (_, i) => i);
+      }
+      return Array.from({ length: 12 }, (_, i) => i === 0 ? 12 : i);
+    }, [use24HourFormat]);
+
+    // Generate minutes
+    const minutes = useMemo(() => {
+      return Array.from({ length: 60 }, (_, i) => i);
+    }, []);
+
+    const handleOpen = useCallback(() => {
+      if (isDisabled) return;
+
+      pickerRef.current?.measureInWindow((x, y, width, height) => {
+        setDropdownPosition({ x, y, width, height });
+        setIsOpen(true);
+        if (selectedDate) {
+          setViewDate(selectedDate);
+        }
+      });
+    }, [isDisabled, selectedDate]);
+
+    const handleClose = () => {
+      setIsOpen(false);
+    };
+
+    const updateValue = (newDate: Date) => {
+      if (!isControlled) {
+        setInternalValue(newDate);
+      }
+      onChange?.(newDate);
+    };
+
+    const handleDateSelect = (day: number, isPrevMonth: boolean, isNextMonth: boolean) => {
+      let newDate = new Date(viewDate);
+      
+      if (isPrevMonth) {
+        newDate.setMonth(newDate.getMonth() - 1);
+      } else if (isNextMonth) {
+        newDate.setMonth(newDate.getMonth() + 1);
+      }
+      
+      newDate.setDate(day);
+
+      if (selectedDate) {
+        newDate.setHours(selectedDate.getHours());
+        newDate.setMinutes(selectedDate.getMinutes());
+      } else {
+        const now = new Date();
+        newDate.setHours(now.getHours());
+        newDate.setMinutes(now.getMinutes());
+      }
+
+      if (isDateDisabled(newDate, minDate, maxDate)) return;
+
+      updateValue(newDate);
+      
+      // Update view if clicked on prev/next month
+      if (isPrevMonth || isNextMonth) {
+        setViewDate(newDate);
+      }
+
+      if (mode === 'date') {
+        setIsOpen(false);
+      }
+    };
+
+    const handleTimeSelect = (hour: number, minute: number, isPM?: boolean) => {
+      const newDate = selectedDate ? new Date(selectedDate) : new Date();
+
+      let adjustedHour = hour;
+      if (!use24HourFormat) {
+        if (isPM && hour !== 12) {
+          adjustedHour = hour + 12;
+        } else if (!isPM && hour === 12) {
+          adjustedHour = 0;
+        }
+      }
+
+      newDate.setHours(adjustedHour);
+      newDate.setMinutes(minute);
+
+      updateValue(newDate);
+    };
+
+    const handleMonthChange = (direction: -1 | 1) => {
+      const newDate = new Date(viewDate);
+      newDate.setMonth(newDate.getMonth() + direction);
+      setViewDate(newDate);
+    };
+
+    const handleYearChange = (direction: -1 | 1) => {
+      const newDate = new Date(viewDate);
+      newDate.setFullYear(newDate.getFullYear() + direction);
+      setViewDate(newDate);
+    };
+
+    const handleNowPress = () => {
+      const now = new Date();
+      updateValue(now);
+      setViewDate(now);
+    };
+
+    const handleOkPress = () => {
+      setIsOpen(false);
+    };
+
+    const getIcon = () => {
+      const iconColor = isDisabled ? colors.text.disabled : colors.text.secondary;
+      if (mode === 'time') {
+        return <ClockIcon color={iconColor} />;
+      }
+      return <CalendarIcon color={iconColor} />;
+    };
+
+    const currentHour = selectedDate?.getHours() ?? new Date().getHours();
+    const currentMinute = selectedDate?.getMinutes() ?? 0;
+    const currentIsPM = currentHour >= 12;
+    const displayHour = use24HourFormat ? currentHour : (currentHour % 12 || 12);
+
+    // Calculate dropdown width based on mode
+    const getDropdownMinWidth = () => {
+      if (mode === 'datetime') return 420;
+      if (mode === 'time') return 200;
+      return 260;
+    };
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        {label && (
+          <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+            {label}
+            {isRequired && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+
+        <Pressable
+          ref={pickerRef}
+          onPress={handleOpen}
+          style={({ hovered }: any) => [
+            styles.picker,
+            styles[variant],
+            styles[size],
+            hasError && styles.error,
+            isDisabled && styles.disabled,
+            isOpen && styles.pickerOpen,
+            Platform.OS === 'web' && hovered && !isDisabled && styles.pickerHovered,
+          ]}
+        >
+          <Text
+            style={[
+              styles.pickerText,
+              !selectedDate && styles.placeholder,
+              isDisabled && styles.disabledText,
+            ]}
+            numberOfLines={1}
+          >
+            {selectedDate ? formatDate(selectedDate, mode) : (placeholder || defaultPlaceholder)}
+          </Text>
+          {getIcon()}
+        </Pressable>
+
+        {(helperText || errorMessage) && (
+          <Text style={[styles.helperText, hasError && styles.errorText]}>
+            {errorMessage || helperText}
+          </Text>
+        )}
+
+        <Modal
+          visible={isOpen}
+          transparent
+          animationType="fade"
+          onRequestClose={handleClose}
+        >
+          <Pressable style={styles.modalOverlay} onPress={handleClose}>
+            <View
+              style={[
+                styles.dropdown,
+                dropdownPosition && {
+                  position: 'absolute',
+                  top: dropdownPosition.y + dropdownPosition.height + 4,
+                  left: dropdownPosition.x,
+                  minWidth: getDropdownMinWidth(),
+                },
+              ]}
+              onStartShouldSetResponder={() => true}
+            >
+              {/* DateTime Mode - Side by Side Layout */}
+              {mode === 'datetime' && (
+                <View style={styles.datetimeContainer}>
+                  {/* Calendar Section */}
+                  <View style={styles.calendarSection}>
+                    {/* Month/Year Header */}
+                    <View style={styles.calendarHeader}>
+                      <Pressable
+                        onPress={() => handleYearChange(-1)}
+                        style={({ hovered }: any) => [
+                          styles.navButton,
+                          Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                        ]}
+                      >
+                        <Text style={styles.navButtonText}>«</Text>
+                      </Pressable>
+                      <Pressable
+                        onPress={() => handleMonthChange(-1)}
+                        style={({ hovered }: any) => [
+                          styles.navButton,
+                          Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                        ]}
+                      >
+                        <Text style={styles.navButtonText}>‹</Text>
+                      </Pressable>
+                      <Text style={styles.calendarTitle}>
+                        {MONTHS_SHORT[viewDate.getMonth()]} {viewDate.getFullYear()}
+                      </Text>
+                      <Pressable
+                        onPress={() => handleMonthChange(1)}
+                        style={({ hovered }: any) => [
+                          styles.navButton,
+                          Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                        ]}
+                      >
+                        <Text style={styles.navButtonText}>›</Text>
+                      </Pressable>
+                      <Pressable
+                        onPress={() => handleYearChange(1)}
+                        style={({ hovered }: any) => [
+                          styles.navButton,
+                          Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                        ]}
+                      >
+                        <Text style={styles.navButtonText}>»</Text>
+                      </Pressable>
+                    </View>
+
+                    {/* Weekday Headers */}
+                    <View style={styles.weekdaysRow}>
+                      {weekdays.map((day) => (
+                        <View key={day} style={styles.weekdayCell}>
+                          <Text style={styles.weekdayText}>{day}</Text>
+                        </View>
+                      ))}
+                    </View>
+
+                    {/* Calendar Grid */}
+                    <View style={styles.calendarGrid}>
+                      {calendarDays.map((dayInfo, index) => {
+                        const { day, isCurrentMonth, isPrevMonth, isNextMonth } = dayInfo;
+                        
+                        let dateToCheck: Date;
+                        if (isPrevMonth) {
+                          dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, day);
+                        } else if (isNextMonth) {
+                          dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, day);
+                        } else {
+                          dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
+                        }
+
+                        const isSelected = selectedDate && isSameDay(dateToCheck, selectedDate);
+                        const isToday = isSameDay(dateToCheck, new Date());
+                        const isDisabledDay = isDateDisabled(dateToCheck, minDate, maxDate);
+
+                        return (
+                          <Pressable
+                            key={`${isPrevMonth ? 'prev' : isNextMonth ? 'next' : 'curr'}-${day}-${index}`}
+                            onPress={() => !isDisabledDay && handleDateSelect(day, isPrevMonth, isNextMonth)}
+                            style={({ hovered }: any) => [
+                              styles.dayCell,
+                              isSelected && styles.dayCellSelected,
+                              isToday && !isSelected && styles.dayCellToday,
+                              isDisabledDay && styles.dayCellDisabled,
+                              Platform.OS === 'web' && hovered && !isDisabledDay && !isSelected && styles.dayCellHovered,
+                            ]}
+                          >
+                            <Text
+                              style={[
+                                styles.dayText,
+                                !isCurrentMonth && styles.dayTextOtherMonth,
+                                isSelected && styles.dayTextSelected,
+                                isToday && !isSelected && styles.dayTextToday,
+                                isDisabledDay && styles.dayTextDisabled,
+                              ]}
+                            >
+                              {day}
+                            </Text>
+                          </Pressable>
+                        );
+                      })}
+                    </View>
+                  </View>
+
+                  {/* Divider */}
+                  <View style={styles.verticalDivider} />
+
+                  {/* Time Section */}
+                  <View style={styles.timeSection}>
+                    <View style={styles.timeSectionColumns}>
+                      {/* Hours */}
+                      <View style={styles.timeColumnCompact}>
+                        <ScrollView 
+                          style={styles.timeScrollCompact} 
+                          showsVerticalScrollIndicator={false}
+                          contentContainerStyle={styles.timeScrollContent}
+                        >
+                          {hours.map((hour) => {
+                            const isSelected = hour === displayHour;
+                            return (
+                              <Pressable
+                                key={hour}
+                                onPress={() => handleTimeSelect(hour, currentMinute, currentIsPM)}
+                                style={({ hovered }: any) => [
+                                  styles.timeItemCompact,
+                                  isSelected && styles.timeItemCompactSelected,
+                                  Platform.OS === 'web' && hovered && !isSelected && styles.timeItemHovered,
+                                ]}
+                              >
+                                <Text style={[styles.timeItemTextCompact, isSelected && styles.timeItemTextSelected]}>
+                                  {hour.toString().padStart(2, '0')}
+                                </Text>
+                              </Pressable>
+                            );
+                          })}
+                        </ScrollView>
+                      </View>
+
+                      {/* Minutes */}
+                      <View style={styles.timeColumnCompact}>
+                        <ScrollView 
+                          style={styles.timeScrollCompact} 
+                          showsVerticalScrollIndicator={false}
+                          contentContainerStyle={styles.timeScrollContent}
+                        >
+                          {minutes.map((minute) => {
+                            const isSelected = minute === currentMinute;
+                            return (
+                              <Pressable
+                                key={minute}
+                                onPress={() => handleTimeSelect(displayHour, minute, currentIsPM)}
+                                style={({ hovered }: any) => [
+                                  styles.timeItemCompact,
+                                  isSelected && styles.timeItemCompactSelected,
+                                  Platform.OS === 'web' && hovered && !isSelected && styles.timeItemHovered,
+                                ]}
+                              >
+                                <Text style={[styles.timeItemTextCompact, isSelected && styles.timeItemTextSelected]}>
+                                  {minute.toString().padStart(2, '0')}
+                                </Text>
+                              </Pressable>
+                            );
+                          })}
+                        </ScrollView>
+                      </View>
+
+                      {/* AM/PM */}
+                      {!use24HourFormat && (
+                        <View style={styles.timeColumnCompact}>
+                          <View style={styles.ampmContainerCompact}>
+                            <Pressable
+                              onPress={() => handleTimeSelect(displayHour, currentMinute, false)}
+                              style={({ hovered }: any) => [
+                                styles.timeItemCompact,
+                                !currentIsPM && styles.timeItemCompactSelected,
+                                Platform.OS === 'web' && hovered && currentIsPM && styles.timeItemHovered,
+                              ]}
+                            >
+                              <Text style={[styles.timeItemTextCompact, !currentIsPM && styles.timeItemTextSelected]}>
+                                AM
+                              </Text>
+                            </Pressable>
+                            <Pressable
+                              onPress={() => handleTimeSelect(displayHour, currentMinute, true)}
+                              style={({ hovered }: any) => [
+                                styles.timeItemCompact,
+                                currentIsPM && styles.timeItemCompactSelected,
+                                Platform.OS === 'web' && hovered && !currentIsPM && styles.timeItemHovered,
+                              ]}
+                            >
+                              <Text style={[styles.timeItemTextCompact, currentIsPM && styles.timeItemTextSelected]}>
+                                PM
+                              </Text>
+                            </Pressable>
+                          </View>
+                        </View>
+                      )}
+                    </View>
+                  </View>
+                </View>
+              )}
+
+              {/* Date Only Mode */}
+              {mode === 'date' && (
+                <View style={styles.calendarContainer}>
+                  {/* Month/Year Header */}
+                  <View style={styles.calendarHeader}>
+                    <Pressable
+                      onPress={() => handleYearChange(-1)}
+                      style={({ hovered }: any) => [
+                        styles.navButton,
+                        Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                      ]}
+                    >
+                      <Text style={styles.navButtonText}>«</Text>
+                    </Pressable>
+                    <Pressable
+                      onPress={() => handleMonthChange(-1)}
+                      style={({ hovered }: any) => [
+                        styles.navButton,
+                        Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                      ]}
+                    >
+                      <Text style={styles.navButtonText}>‹</Text>
+                    </Pressable>
+                    <Text style={styles.calendarTitle}>
+                      {MONTHS_SHORT[viewDate.getMonth()]} {viewDate.getFullYear()}
+                    </Text>
+                    <Pressable
+                      onPress={() => handleMonthChange(1)}
+                      style={({ hovered }: any) => [
+                        styles.navButton,
+                        Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                      ]}
+                    >
+                      <Text style={styles.navButtonText}>›</Text>
+                    </Pressable>
+                    <Pressable
+                      onPress={() => handleYearChange(1)}
+                      style={({ hovered }: any) => [
+                        styles.navButton,
+                        Platform.OS === 'web' && hovered && styles.navButtonHovered,
+                      ]}
+                    >
+                      <Text style={styles.navButtonText}>»</Text>
+                    </Pressable>
+                  </View>
+
+                  {/* Weekday Headers */}
+                  <View style={styles.weekdaysRow}>
+                    {weekdays.map((day) => (
+                      <View key={day} style={styles.weekdayCell}>
+                        <Text style={styles.weekdayText}>{day}</Text>
+                      </View>
+                    ))}
+                  </View>
+
+                  {/* Calendar Grid */}
+                  <View style={styles.calendarGrid}>
+                    {calendarDays.map((dayInfo, index) => {
+                      const { day, isCurrentMonth, isPrevMonth, isNextMonth } = dayInfo;
+                      
+                      let dateToCheck: Date;
+                      if (isPrevMonth) {
+                        dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, day);
+                      } else if (isNextMonth) {
+                        dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, day);
+                      } else {
+                        dateToCheck = new Date(viewDate.getFullYear(), viewDate.getMonth(), day);
+                      }
+
+                      const isSelected = selectedDate && isSameDay(dateToCheck, selectedDate);
+                      const isToday = isSameDay(dateToCheck, new Date());
+                      const isDisabledDay = isDateDisabled(dateToCheck, minDate, maxDate);
+
+                      return (
+                        <Pressable
+                          key={`${isPrevMonth ? 'prev' : isNextMonth ? 'next' : 'curr'}-${day}-${index}`}
+                          onPress={() => !isDisabledDay && handleDateSelect(day, isPrevMonth, isNextMonth)}
+                          style={({ hovered }: any) => [
+                            styles.dayCell,
+                            isSelected && styles.dayCellSelected,
+                            isToday && !isSelected && styles.dayCellToday,
+                            isDisabledDay && styles.dayCellDisabled,
+                            Platform.OS === 'web' && hovered && !isDisabledDay && !isSelected && styles.dayCellHovered,
+                          ]}
+                        >
+                          <Text
+                            style={[
+                              styles.dayText,
+                              !isCurrentMonth && styles.dayTextOtherMonth,
+                              isSelected && styles.dayTextSelected,
+                              isToday && !isSelected && styles.dayTextToday,
+                              isDisabledDay && styles.dayTextDisabled,
+                            ]}
+                          >
+                            {day}
+                          </Text>
+                        </Pressable>
+                      );
+                    })}
+                  </View>
+                </View>
+              )}
+
+              {/* Time Only Mode */}
+              {mode === 'time' && (
+                <View style={styles.timeContainer}>
+                  <View style={styles.timeColumns}>
+                    {/* Hours */}
+                    <View style={styles.timeColumn}>
+                      <ScrollView style={styles.timeScroll} showsVerticalScrollIndicator={false}>
+                        {hours.map((hour) => {
+                          const isSelected = hour === displayHour;
+                          return (
+                            <Pressable
+                              key={hour}
+                              onPress={() => handleTimeSelect(hour, currentMinute, currentIsPM)}
+                              style={({ hovered }: any) => [
+                                styles.timeItem,
+                                isSelected && styles.timeItemSelected,
+                                Platform.OS === 'web' && hovered && !isSelected && styles.timeItemHovered,
+                              ]}
+                            >
+                              <Text style={[styles.timeItemText, isSelected && styles.timeItemTextSelected]}>
+                                {hour.toString().padStart(2, '0')}
+                              </Text>
+                            </Pressable>
+                          );
+                        })}
+                      </ScrollView>
+                    </View>
+
+                    {/* Minutes */}
+                    <View style={styles.timeColumn}>
+                      <ScrollView style={styles.timeScroll} showsVerticalScrollIndicator={false}>
+                        {minutes.map((minute) => {
+                          const isSelected = minute === currentMinute;
+                          return (
+                            <Pressable
+                              key={minute}
+                              onPress={() => handleTimeSelect(displayHour, minute, currentIsPM)}
+                              style={({ hovered }: any) => [
+                                styles.timeItem,
+                                isSelected && styles.timeItemSelected,
+                                Platform.OS === 'web' && hovered && !isSelected && styles.timeItemHovered,
+                              ]}
+                            >
+                              <Text style={[styles.timeItemText, isSelected && styles.timeItemTextSelected]}>
+                                {minute.toString().padStart(2, '0')}
+                              </Text>
+                            </Pressable>
+                          );
+                        })}
+                      </ScrollView>
+                    </View>
+
+                    {/* AM/PM */}
+                    {!use24HourFormat && (
+                      <View style={styles.timeColumn}>
+                        <View style={styles.ampmContainer}>
+                          <Pressable
+                            onPress={() => handleTimeSelect(displayHour, currentMinute, false)}
+                            style={({ hovered }: any) => [
+                              styles.timeItem,
+                              !currentIsPM && styles.timeItemSelected,
+                              Platform.OS === 'web' && hovered && currentIsPM && styles.timeItemHovered,
+                            ]}
+                          >
+                            <Text style={[styles.timeItemText, !currentIsPM && styles.timeItemTextSelected]}>
+                              AM
+                            </Text>
+                          </Pressable>
+                          <Pressable
+                            onPress={() => handleTimeSelect(displayHour, currentMinute, true)}
+                            style={({ hovered }: any) => [
+                              styles.timeItem,
+                              currentIsPM && styles.timeItemSelected,
+                              Platform.OS === 'web' && hovered && !currentIsPM && styles.timeItemHovered,
+                            ]}
+                          >
+                            <Text style={[styles.timeItemText, currentIsPM && styles.timeItemTextSelected]}>
+                              PM
+                            </Text>
+                          </Pressable>
+                        </View>
+                      </View>
+                    )}
+                  </View>
+                </View>
+              )}
+
+              {/* Footer with Now and OK buttons */}
+              {(mode === 'datetime' || mode === 'time') && (
+                <View style={styles.footer}>
+                  {showNowButton && (
+                    <Pressable
+                      onPress={handleNowPress}
+                      style={({ hovered }: any) => [
+                        styles.footerButton,
+                        Platform.OS === 'web' && hovered && styles.footerButtonHovered,
+                      ]}
+                    >
+                      <Text style={styles.footerButtonText}>Now</Text>
+                    </Pressable>
+                  )}
+                  <View style={styles.footerSpacer} />
+                  <Pressable
+                    onPress={handleOkPress}
+                    style={({ hovered }: any) => [
+                      styles.okButton,
+                      Platform.OS === 'web' && hovered && styles.okButtonHovered,
+                    ]}
+                  >
+                    <Text style={styles.okButtonText}>OK</Text>
+                  </Pressable>
+                </View>
+              )}
+            </View>
+          </Pressable>
+        </Modal>
+      </View>
+    );
+  }
+);
+
+DatePicker.displayName = 'DatePicker';
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing.base,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  required: {
+    color: colors.feedback.error.content,
+  },
+  picker: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: borderRadius.md,
+  },
+  pickerOpen: {
+    borderColor: colors.brand.blue,
+  },
+  pickerHovered: {
+    borderColor: colors.brand.blue,
+    backgroundColor: colors.background.hover,
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    backgroundColor: colors.background.default,
+  },
+  filled: {
+    backgroundColor: colors.background.secondary,
+  },
+  sm: {
+    height: 32,
+    paddingHorizontal: spacing['2x'],
+  },
+  md: {
+    height: 40,
+    paddingHorizontal: spacing['3x'],
+  },
+  lg: {
+    height: 48,
+    paddingHorizontal: spacing['4x'],
+  },
+  error: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  pickerText: {
+    flex: 1,
+    color: colors.text.default,
+    fontSize: typography.fontSize.body,
+  },
+  placeholder: {
+    color: colors.text.disabled,
+  },
+  disabledText: {
+    color: colors.text.disabled,
+  },
+  helperText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    marginTop: spacing.base,
+  },
+  errorText: {
+    color: colors.feedback.error.content,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  dropdown: {
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    ...Platform.select({
+      ios: {
+        shadowColor: colors.black,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+      web: {
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      } as any,
+    }),
+  },
+
+  // DateTime Side-by-Side Layout
+  datetimeContainer: {
+    flexDirection: 'row',
+  },
+  calendarSection: {
+    flex: 1,
+    padding: spacing['2x'],
+  },
+  verticalDivider: {
+    width: 1,
+    backgroundColor: colors.border.disabled,
+  },
+  timeSection: {
+    width: 120,
+    padding: spacing['2x'],
+  },
+  timeSectionColumns: {
+    flexDirection: 'row',
+    height: 220,
+  },
+  timeColumnCompact: {
+    flex: 1,
+  },
+  timeScrollCompact: {
+    flex: 1,
+  },
+  timeScrollContent: {
+    paddingVertical: spacing.base,
+  },
+  ampmContainerCompact: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    paddingTop: spacing.base,
+  },
+  timeItemCompact: {
+    paddingVertical: spacing.base,
+    paddingHorizontal: spacing.base,
+    alignItems: 'center',
+    borderRadius: borderRadius.sm,
+    marginVertical: 1,
+  },
+  timeItemCompactSelected: {
+    backgroundColor: colors.brand.blue,
+  },
+  timeItemTextCompact: {
+    fontSize: typography.fontSize.componentLabel,
+    color: colors.text.default,
+  },
+
+  // Calendar
+  calendarContainer: {
+    padding: spacing['2x'],
+  },
+  calendarHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: spacing['2x'],
+    gap: 2,
+  },
+  calendarTitle: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.text.default,
+    minWidth: 80,
+    textAlign: 'center',
+  },
+  navButton: {
+    padding: spacing.base,
+    borderRadius: borderRadius.sm,
+  },
+  navButtonHovered: {
+    backgroundColor: colors.background.hover,
+  },
+  navButtonText: {
+    fontSize: typography.fontSize.componentLabel,
+    color: colors.text.secondary,
+    fontWeight: typography.fontWeight.medium,
+  },
+  weekdaysRow: {
+    flexDirection: 'row',
+    marginBottom: spacing.base,
+  },
+  weekdayCell: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 2,
+  },
+  weekdayText: {
+    fontSize: typography.fontSize.small,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.text.secondary,
+  },
+  calendarGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  dayCell: {
+    width: '14.28%',
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: borderRadius.sm,
+  },
+  dayCellSelected: {
+    backgroundColor: colors.brand.blue,
+  },
+  dayCellToday: {
+    borderWidth: 1,
+    borderColor: colors.brand.blue,
+  },
+  dayCellHovered: {
+    backgroundColor: colors.background.hover,
+  },
+  dayCellDisabled: {
+    opacity: 0.4,
+  },
+  dayText: {
+    fontSize: typography.fontSize.componentLabel,
+    color: colors.text.default,
+  },
+  dayTextOtherMonth: {
+    color: colors.text.disabled,
+  },
+  dayTextSelected: {
+    color: colors.white,
+    fontWeight: typography.fontWeight.medium,
+  },
+  dayTextToday: {
+    color: colors.brand.blue,
+    fontWeight: typography.fontWeight.medium,
+  },
+  dayTextDisabled: {
+    color: colors.text.disabled,
+  },
+
+  // Time Picker (standalone)
+  timeContainer: {
+    padding: spacing['3x'],
+  },
+  timeColumns: {
+    flexDirection: 'row',
+    gap: spacing['2x'],
+    height: 200,
+  },
+  timeColumn: {
+    flex: 1,
+  },
+  timeScroll: {
+    flex: 1,
+  },
+  ampmContainer: {
+    gap: spacing['2x'],
+  },
+  timeItem: {
+    paddingVertical: spacing['2x'],
+    paddingHorizontal: spacing['3x'],
+    alignItems: 'center',
+    borderRadius: borderRadius.md,
+    marginBottom: spacing.base,
+  },
+  timeItemSelected: {
+    backgroundColor: colors.brand.blue,
+  },
+  timeItemHovered: {
+    backgroundColor: colors.background.hover,
+  },
+  timeItemText: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.default,
+  },
+  timeItemTextSelected: {
+    color: colors.white,
+    fontWeight: typography.fontWeight.medium,
+  },
+
+  // Footer
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: spacing['2x'],
+    paddingVertical: spacing['2x'],
+    borderTopWidth: 1,
+    borderTopColor: colors.border.disabled,
+  },
+  footerSpacer: {
+    flex: 1,
+  },
+  footerButton: {
+    paddingVertical: spacing.base,
+    paddingHorizontal: spacing['2x'],
+    borderRadius: borderRadius.md,
+  },
+  footerButtonHovered: {
+    backgroundColor: colors.background.hover,
+  },
+  footerButtonText: {
+    fontSize: typography.fontSize.componentLabel,
+    color: colors.text.secondary,
+  },
+  okButton: {
+    paddingVertical: spacing.base,
+    paddingHorizontal: spacing['3x'],
+    borderRadius: borderRadius.md,
+    backgroundColor: colors.background.secondary,
+  },
+  okButtonHovered: {
+    backgroundColor: colors.background.tertiary,
+  },
+  okButtonText: {
+    fontSize: typography.fontSize.componentLabel,
+    color: colors.text.secondary,
+    fontWeight: typography.fontWeight.medium,
+  },
+});