kynjal-cli 2.0.6 → 3.1.0

package/dist/templates/components/ui/date-picker.tsx

@@ -1,1147 +0,0 @@
-import { BottomSheet, useBottomSheet } from '@/components/ui/bottom-sheet';
-import { Button } from '@/components/ui/button';
-import { Icon } from '@/components/ui/icon';
-import { ScrollView } from '@/components/ui/scroll-view';
-import { Text } from '@/components/ui/text';
-import { View } from '@/components/ui/view';
-import { useColor } from '@/hooks/useColor';
-import { BORDER_RADIUS, CORNERS, FONT_SIZE, HEIGHT } from '@/theme/globals';
-import {
-  Calendar,
-  CalendarClock,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Clock,
-  CalendarRange,
-  ArrowRight,
-} from 'lucide-react-native';
-import { useCallback, useMemo, useState } from 'react';
-import { TextStyle, TouchableOpacity, ViewStyle } from 'react-native';
-
-export interface DateRange {
-  startDate: Date | null;
-  endDate: Date | null;
-}
-
-// Conditional typing based on mode
-interface BaseDatePickerProps {
-  label?: string;
-  error?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  style?: ViewStyle;
-  minimumDate?: Date;
-  maximumDate?: Date;
-  timeFormat?: '12' | '24';
-  variant?: 'filled' | 'outline' | 'group';
-  labelStyle?: TextStyle;
-  errorStyle?: TextStyle;
-}
-
-interface DatePickerPropsRange extends BaseDatePickerProps {
-  mode: 'range';
-  value?: DateRange;
-  onChange?: (value: DateRange | undefined) => void;
-}
-
-interface DatePickerPropsDate extends BaseDatePickerProps {
-  mode?: 'date' | 'time' | 'datetime';
-  value?: Date;
-  onChange?: (value: Date | undefined) => void;
-}
-
-export type DatePickerProps = DatePickerPropsRange | DatePickerPropsDate;
-
-const MONTHS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
-// Generate year range (current year ± 50 years)
-const currentYear = new Date().getFullYear();
-const YEARS = Array.from({ length: 101 }, (_, i) => currentYear - 50 + i);
-
-// Type guard to check if value is DateRange
-const isDateRange = (
-  value: Date | DateRange | undefined
-): value is DateRange => {
-  return (
-    value !== undefined &&
-    typeof value === 'object' &&
-    value !== null &&
-    'startDate' in value &&
-    'endDate' in value
-  );
-};
-
-export function DatePicker(props: DatePickerProps) {
-  const {
-    label,
-    error,
-    placeholder = 'Select date',
-    disabled = false,
-    style,
-    minimumDate,
-    maximumDate,
-    timeFormat = '24',
-    variant = 'filled',
-    labelStyle,
-    errorStyle,
-  } = props;
-
-  const mode = props.mode || 'date';
-  const value = props.value;
-  const onChange = props.onChange;
-
-  const { isVisible, open, close } = useBottomSheet();
-
-  // Get the current date for navigation, prioritizing single date or range start date
-  const getCurrentDate = useCallback(() => {
-    if (mode === 'range') {
-      const rangeValue = isDateRange(value)
-        ? value
-        : { startDate: null, endDate: null };
-      return rangeValue.startDate || new Date();
-    }
-    return (value as Date) || new Date();
-  }, [value, mode]);
-
-  const [currentDate, setCurrentDate] = useState(() => getCurrentDate());
-  const [viewMode, setViewMode] = useState<'date' | 'time' | 'month' | 'year'>(
-    'date'
-  );
-  const [showMonthPicker, setShowMonthPicker] = useState(false);
-  const [showYearPicker, setShowYearPicker] = useState(false);
-
-  // Range selection state for temporary storage during selection
-  const [tempRange, setTempRange] = useState<DateRange>(() =>
-    mode === 'range' && isDateRange(value)
-      ? value
-      : { startDate: null, endDate: null }
-  );
-
-  // Theme colors
-  const cardColor = useColor('card');
-  const borderColor = useColor('border');
-  const primaryColor = useColor('primary');
-  const primaryForegroundColor = useColor('primaryForeground');
-  const mutedColor = useColor('muted');
-  const textMutedColor = useColor('textMuted');
-  const mutedForegroundColor = useColor('mutedForeground');
-  const textColor = useColor('text');
-  const errorColor = useColor('red');
-
-  const formatDisplayValue = useCallback(() => {
-    if (mode === 'range') {
-      const rangeValue = isDateRange(value)
-        ? value
-        : { startDate: null, endDate: null };
-
-      if (!rangeValue.startDate && !rangeValue.endDate) {
-        return placeholder;
-      }
-
-      const startStr = rangeValue.startDate
-        ? rangeValue.startDate.toLocaleDateString()
-        : '';
-      const endStr = rangeValue.endDate
-        ? rangeValue.endDate.toLocaleDateString()
-        : '';
-
-      if (startStr && endStr) {
-        return `${startStr} - ${endStr}`;
-      } else if (startStr) {
-        return `${startStr} - Select end date`;
-      } else if (endStr) {
-        return `Select start date - ${endStr}`;
-      }
-      return placeholder;
-    }
-
-    const dateValue = value as Date;
-    if (!dateValue) return placeholder;
-
-    switch (mode) {
-      case 'time':
-        if (timeFormat === '12') {
-          return dateValue.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: true,
-          });
-        }
-        return dateValue.toLocaleTimeString([], {
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false,
-        });
-      case 'datetime':
-        const timeStr =
-          timeFormat === '12'
-            ? dateValue.toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: true,
-              })
-            : dateValue.toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: false,
-              });
-        return `${dateValue.toLocaleDateString()} ${timeStr}`;
-      default:
-        return dateValue.toLocaleDateString();
-    }
-  }, [value, mode, placeholder, timeFormat]);
-
-  // Helper function to check if a date is disabled
-  const isDateDisabled = useCallback(
-    (date: Date) => {
-      if (minimumDate && date < minimumDate) return true;
-      if (maximumDate && date > maximumDate) return true;
-      return false;
-    },
-    [minimumDate, maximumDate]
-  );
-
-  // Helper function to check if a date is in range
-  const isDateInRange = useCallback(
-    (date: Date) => {
-      if (mode !== 'range' || !tempRange.startDate || !tempRange.endDate) {
-        return false;
-      }
-
-      // Create new date objects to avoid mutation
-      const startDate = new Date(tempRange.startDate);
-      const endDate = new Date(tempRange.endDate);
-      const checkDate = new Date(date);
-
-      // Normalize dates for comparison (remove time)
-      startDate.setHours(0, 0, 0, 0);
-      endDate.setHours(0, 0, 0, 0);
-      checkDate.setHours(0, 0, 0, 0);
-
-      return checkDate >= startDate && checkDate <= endDate;
-    },
-    [mode, tempRange]
-  );
-
-  // Helper function to check if a date is a range endpoint
-  const isRangeEndpoint = useCallback(
-    (date: Date) => {
-      if (mode !== 'range') {
-        return { isStart: false, isEnd: false };
-      }
-
-      const normalizedDate = new Date(date);
-      normalizedDate.setHours(0, 0, 0, 0);
-
-      const isStart =
-        tempRange.startDate &&
-        new Date(tempRange.startDate).setHours(0, 0, 0, 0) ===
-          normalizedDate.getTime();
-      const isEnd =
-        tempRange.endDate &&
-        new Date(tempRange.endDate).setHours(0, 0, 0, 0) ===
-          normalizedDate.getTime();
-
-      return { isStart: !!isStart, isEnd: !!isEnd };
-    },
-    [mode, tempRange]
-  );
-
-  // Memoized calendar calculations
-  const calendarData = useMemo(() => {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-
-    // Get first day of month and number of days
-    const firstDay = new Date(year, month, 1).getDay();
-    const daysInMonth = new Date(year, month + 1, 0).getDate();
-
-    // Create calendar grid with proper positioning
-    const weeks: (number | null)[][] = [];
-    let currentWeek: (number | null)[] = [];
-
-    // Fill empty cells for days before month starts
-    for (let i = 0; i < firstDay; i++) {
-      currentWeek.push(null);
-    }
-
-    // Add days of the month
-    for (let day = 1; day <= daysInMonth; day++) {
-      currentWeek.push(day);
-
-      // If week is complete (7 days) or it's the last day, start a new week
-      if (currentWeek.length === 7) {
-        weeks.push([...currentWeek]);
-        currentWeek = [];
-      }
-    }
-
-    // Add the last incomplete week if it exists
-    if (currentWeek.length > 0) {
-      // Fill remaining cells with null
-      while (currentWeek.length < 7) {
-        currentWeek.push(null);
-      }
-      weeks.push(currentWeek);
-    }
-
-    return { weeks, year, month, daysInMonth };
-  }, [currentDate]);
-
-  const handleRangeSelect = (day: number) => {
-    const selectedDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth(),
-      day
-    );
-
-    // Check if date is disabled
-    if (isDateDisabled(selectedDate)) return;
-
-    // If no start date or both dates are selected, start fresh
-    if (!tempRange.startDate || (tempRange.startDate && tempRange.endDate)) {
-      setTempRange({
-        startDate: selectedDate,
-        endDate: null,
-      });
-    } else {
-      // We have a start date but no end date
-      const startDate = tempRange.startDate;
-
-      if (selectedDate < startDate) {
-        // If selected date is before start date, make it the new start date
-        setTempRange({
-          startDate: selectedDate,
-          endDate: null,
-        });
-      } else {
-        // Selected date is after start date, make it the end date
-        setTempRange({
-          startDate: startDate,
-          endDate: selectedDate,
-        });
-      }
-    }
-  };
-
-  const handleDateSelect = (day: number) => {
-    if (mode === 'range') {
-      handleRangeSelect(day);
-      return;
-    }
-
-    const newDate = new Date(
-      currentDate.getFullYear(),
-      currentDate.getMonth(),
-      day
-    );
-
-    // Check if date is disabled
-    if (isDateDisabled(newDate)) return;
-
-    setCurrentDate(newDate);
-
-    if (mode === 'date') {
-      (onChange as (value: Date | undefined) => void)?.(newDate);
-      close();
-    } else if (mode === 'datetime') {
-      setViewMode('time');
-    }
-  };
-
-  const handleTimeChange = (hours: number, minutes: number) => {
-    const newDate = new Date(currentDate);
-    newDate.setHours(hours, minutes, 0, 0);
-    setCurrentDate(newDate);
-  };
-
-  const navigateMonth = (direction: 'prev' | 'next') => {
-    const newDate = new Date(currentDate);
-    if (direction === 'prev') {
-      newDate.setMonth(newDate.getMonth() - 1);
-    } else {
-      newDate.setMonth(newDate.getMonth() + 1);
-    }
-    setCurrentDate(newDate);
-  };
-
-  const handleMonthSelect = (monthIndex: number) => {
-    const newDate = new Date(currentDate);
-    newDate.setMonth(monthIndex);
-    setCurrentDate(newDate);
-    setShowMonthPicker(false);
-  };
-
-  const handleYearSelect = (year: number) => {
-    const newDate = new Date(currentDate);
-    newDate.setFullYear(year);
-    setCurrentDate(newDate);
-    setShowYearPicker(false);
-  };
-
-  const handleConfirm = () => {
-    if (mode === 'range') {
-      (onChange as (value: DateRange | undefined) => void)?.(tempRange);
-    } else {
-      (onChange as (value: Date | undefined) => void)?.(currentDate);
-    }
-    close();
-  };
-
-  const resetToToday = () => {
-    const today = new Date();
-    setCurrentDate(today);
-
-    if (mode === 'range') {
-      setTempRange({ startDate: today, endDate: null });
-    } else if (mode === 'date') {
-      (onChange as (value: Date | undefined) => void)?.(today);
-      close();
-    }
-  };
-
-  const clearSelection = () => {
-    if (mode === 'range') {
-      setTempRange({ startDate: null, endDate: null });
-      (onChange as (value: DateRange | undefined) => void)?.(undefined);
-    } else {
-      (onChange as (value: Date | undefined) => void)?.(undefined);
-    }
-  };
-
-  const renderMonthYearHeader = () => (
-    <View
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 24,
-        paddingHorizontal: 8,
-      }}
-    >
-      <TouchableOpacity
-        onPress={() => navigateMonth('prev')}
-        style={{
-          padding: 10,
-          borderRadius: CORNERS,
-          backgroundColor: mutedColor,
-        }}
-      >
-        <ChevronLeft size={20} color={textColor} />
-      </TouchableOpacity>
-
-      <View
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
-          gap: 12,
-          marginHorizontal: 12,
-        }}
-      >
-        <TouchableOpacity
-          onPress={() => setShowMonthPicker(true)}
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingHorizontal: 12,
-            paddingVertical: 10,
-            borderRadius: CORNERS,
-            backgroundColor: mutedColor,
-          }}
-        >
-          <Text variant='subtitle' style={{ marginRight: 4 }}>
-            {MONTHS[calendarData.month]}
-          </Text>
-          <ChevronDown size={16} color={textColor} />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => setShowYearPicker(true)}
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingHorizontal: 16,
-            paddingVertical: 10,
-            borderRadius: CORNERS,
-            backgroundColor: mutedColor,
-          }}
-        >
-          <Text variant='subtitle' style={{ marginRight: 4 }}>
-            {calendarData.year}
-          </Text>
-          <ChevronDown size={16} color={textColor} />
-        </TouchableOpacity>
-      </View>
-
-      <TouchableOpacity
-        onPress={() => navigateMonth('next')}
-        style={{
-          padding: 10,
-          borderRadius: CORNERS,
-          backgroundColor: mutedColor,
-        }}
-      >
-        <ChevronRight size={20} color={textColor} />
-      </TouchableOpacity>
-    </View>
-  );
-
-  const renderCalendar = () => (
-    <View>
-      {renderMonthYearHeader()}
-      {/* Day headers */}
-      <View
-        style={{
-          flexDirection: 'row',
-          marginBottom: 12,
-          paddingHorizontal: 4,
-        }}
-      >
-        {DAYS.map((day) => (
-          <View
-            key={day}
-            style={{
-              flex: 1,
-              alignItems: 'center',
-            }}
-          >
-            <Text variant='caption' style={{ fontSize: 12, fontWeight: '600' }}>
-              {day}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      {/* Calendar grid */}
-      <View style={{ paddingHorizontal: 4 }}>
-        {calendarData.weeks.map((week, weekIndex) => (
-          <View
-            key={weekIndex}
-            style={{
-              flexDirection: 'row',
-              marginBottom: 4,
-            }}
-          >
-            {week.map((day, dayIndex) => {
-              const dayDate = day
-                ? new Date(calendarData.year, calendarData.month, day)
-                : null;
-
-              const isSelected =
-                day &&
-                value &&
-                !isDateRange(value) &&
-                value.getDate() === day &&
-                value.getMonth() === calendarData.month &&
-                value.getFullYear() === calendarData.year;
-
-              const isToday =
-                day &&
-                new Date().getDate() === day &&
-                new Date().getMonth() === calendarData.month &&
-                new Date().getFullYear() === calendarData.year;
-
-              const disabled = dayDate ? isDateDisabled(dayDate) : false;
-
-              // Range-specific styling
-              const inRange = dayDate ? isDateInRange(dayDate) : false;
-              const rangeEndpoints = dayDate
-                ? isRangeEndpoint(dayDate)
-                : { isStart: false, isEnd: false };
-
-              return (
-                <View
-                  key={dayIndex}
-                  style={[
-                    {
-                      flex: 1,
-                      alignItems: 'center',
-                      backgroundColor:
-                        mode === 'range' && inRange
-                          ? primaryColor
-                          : 'transparent',
-                      paddingHorizontal: mode === 'range' && inRange ? 0 : 0,
-                    },
-                    rangeEndpoints.isStart && {
-                      borderTopLeftRadius: CORNERS,
-                      borderBottomLeftRadius: CORNERS,
-                    },
-                    rangeEndpoints.isEnd && {
-                      borderTopRightRadius: CORNERS,
-                      borderBottomRightRadius: CORNERS,
-                    },
-                  ]}
-                >
-                  {day ? (
-                    <TouchableOpacity
-                      onPress={() => !disabled && handleDateSelect(day)}
-                      disabled={disabled}
-                      style={[
-                        {
-                          width: 40,
-                          height: 40,
-                          borderRadius:
-                            rangeEndpoints.isStart || rangeEndpoints.isEnd
-                              ? 0
-                              : CORNERS,
-                          backgroundColor:
-                            rangeEndpoints.isStart || rangeEndpoints.isEnd
-                              ? primaryColor
-                              : inRange
-                              ? primaryColor
-                              : isSelected
-                              ? primaryColor
-                              : 'transparent',
-                          borderWidth:
-                            isToday && !isSelected && !inRange ? 1 : 0,
-                          borderColor: primaryColor,
-                          justifyContent: 'center',
-                          alignItems: 'center',
-                          opacity: disabled ? 0.3 : 1,
-                        },
-                        rangeEndpoints.isStart && {
-                          borderTopLeftRadius: CORNERS,
-                          borderBottomLeftRadius: CORNERS,
-                        },
-                        rangeEndpoints.isEnd && {
-                          borderTopRightRadius: CORNERS,
-                          borderBottomRightRadius: CORNERS,
-                        },
-                      ]}
-                    >
-                      <Text
-                        style={{
-                          color:
-                            rangeEndpoints.isStart || rangeEndpoints.isEnd
-                              ? primaryForegroundColor
-                              : inRange
-                              ? primaryForegroundColor
-                              : isSelected
-                              ? primaryForegroundColor
-                              : disabled
-                              ? mutedForegroundColor
-                              : textColor,
-                          fontWeight:
-                            rangeEndpoints.isStart ||
-                            rangeEndpoints.isEnd ||
-                            isSelected ||
-                            isToday
-                              ? '600'
-                              : '400',
-                          fontSize: FONT_SIZE,
-                        }}
-                      >
-                        {day}
-                      </Text>
-                    </TouchableOpacity>
-                  ) : (
-                    <View style={{ width: 40, height: 40 }} />
-                  )}
-                </View>
-              );
-            })}
-          </View>
-        ))}
-      </View>
-
-      {/* Range selection info */}
-      {mode === 'range' && (
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginTop: 16,
-            padding: 20,
-            paddingHorizontal: 36,
-            backgroundColor: mutedColor,
-            borderRadius: BORDER_RADIUS,
-          }}
-        >
-          <Text variant='subtitle' style={{ flex: 1 }}>
-            {tempRange.startDate
-              ? `${tempRange.startDate.toLocaleDateString()}`
-              : 'Start date'}
-          </Text>
-
-          <View
-            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
-          >
-            <ArrowRight color={textColor} strokeWidth={3} />
-          </View>
-
-          <Text variant='subtitle' style={{ flex: 1, textAlign: 'right' }}>
-            {tempRange.endDate
-              ? `${tempRange.endDate.toLocaleDateString()}`
-              : 'End date'}
-          </Text>
-        </View>
-      )}
-    </View>
-  );
-
-  const renderTimePicker = () => {
-    const selectedHours = currentDate.getHours();
-    const selectedMinutes = currentDate.getMinutes();
-
-    const isPM = selectedHours >= 12;
-
-    return (
-      <View style={{ height: 300 }}>
-        <View
-          style={{
-            flexDirection: 'row',
-            flex: 1,
-            gap: 16,
-          }}
-        >
-          {/* Hours */}
-          <View style={{ flex: 1 }}>
-            <Text
-              variant='caption'
-              style={{ textAlign: 'center', marginBottom: 12 }}
-            >
-              Hours
-            </Text>
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={{
-                paddingVertical: 20,
-              }}
-            >
-              {Array.from({ length: timeFormat === '12' ? 12 : 24 }, (_, i) =>
-                timeFormat === '12' ? (i === 0 ? 12 : i) : i
-              ).map((hour) => {
-                const actualHour =
-                  timeFormat === '12'
-                    ? hour === 12
-                      ? isPM
-                        ? 12
-                        : 0
-                      : isPM
-                      ? hour + 12
-                      : hour
-                    : hour;
-
-                const isSelected = actualHour === selectedHours;
-
-                return (
-                  <TouchableOpacity
-                    key={hour}
-                    onPress={() =>
-                      handleTimeChange(actualHour, selectedMinutes)
-                    }
-                    style={{
-                      paddingVertical: 12,
-                      paddingHorizontal: 16,
-                      borderRadius: CORNERS,
-                      backgroundColor: isSelected
-                        ? primaryColor
-                        : 'transparent',
-                      marginVertical: 2,
-                      alignItems: 'center',
-                    }}
-                  >
-                    <Text
-                      style={{
-                        color: isSelected ? primaryForegroundColor : textColor,
-                        fontWeight: isSelected ? '600' : '400',
-                        fontSize: FONT_SIZE,
-                      }}
-                    >
-                      {hour.toString().padStart(2, '0')}
-                    </Text>
-                  </TouchableOpacity>
-                );
-              })}
-            </ScrollView>
-          </View>
-
-          {/* Minutes */}
-          <View style={{ flex: 1 }}>
-            <Text
-              variant='caption'
-              style={{ textAlign: 'center', marginBottom: 12 }}
-            >
-              Minutes
-            </Text>
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              contentContainerStyle={{
-                paddingVertical: 20,
-              }}
-            >
-              {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
-                <TouchableOpacity
-                  key={minute}
-                  onPress={() => handleTimeChange(selectedHours, minute)}
-                  style={{
-                    paddingVertical: 12,
-                    paddingHorizontal: 16,
-                    borderRadius: CORNERS,
-                    backgroundColor:
-                      minute === selectedMinutes ? primaryColor : 'transparent',
-                    marginVertical: 2,
-                    alignItems: 'center',
-                  }}
-                >
-                  <Text
-                    style={{
-                      color:
-                        minute === selectedMinutes
-                          ? primaryForegroundColor
-                          : textColor,
-                      fontWeight: minute === selectedMinutes ? '600' : '400',
-                      fontSize: FONT_SIZE,
-                    }}
-                  >
-                    {minute.toString().padStart(2, '0')}
-                  </Text>
-                </TouchableOpacity>
-              ))}
-            </ScrollView>
-          </View>
-
-          {/* AM/PM picker for 12-hour format */}
-          {timeFormat === '12' && (
-            <View style={{ flex: 0.5 }}>
-              <Text
-                variant='caption'
-                style={{ textAlign: 'center', marginBottom: 12 }}
-              >
-                Period
-              </Text>
-              <View
-                style={{
-                  paddingVertical: 20,
-                  gap: 8,
-                }}
-              >
-                {['AM', 'PM'].map((period) => {
-                  const isAM = period === 'AM';
-                  const isSelected = isAM ? !isPM : isPM;
-
-                  return (
-                    <TouchableOpacity
-                      key={period}
-                      onPress={() => {
-                        const newHours = isAM
-                          ? selectedHours >= 12
-                            ? selectedHours - 12
-                            : selectedHours
-                          : selectedHours < 12
-                          ? selectedHours + 12
-                          : selectedHours;
-                        handleTimeChange(newHours, selectedMinutes);
-                      }}
-                      style={{
-                        paddingVertical: 12,
-                        paddingHorizontal: 16,
-                        borderRadius: CORNERS,
-                        backgroundColor: isSelected
-                          ? primaryColor
-                          : 'transparent',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <Text
-                        style={{
-                          color: isSelected
-                            ? primaryForegroundColor
-                            : textColor,
-                          fontWeight: isSelected ? '600' : '400',
-                          fontSize: FONT_SIZE,
-                        }}
-                      >
-                        {period}
-                      </Text>
-                    </TouchableOpacity>
-                  );
-                })}
-              </View>
-            </View>
-          )}
-        </View>
-      </View>
-    );
-  };
-
-  const renderMonthPicker = () => (
-    <View style={{ height: 300 }}>
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{
-          paddingVertical: 20,
-        }}
-      >
-        {MONTHS.map((month, index) => (
-          <TouchableOpacity
-            key={month}
-            onPress={() => handleMonthSelect(index)}
-            style={{
-              paddingVertical: 16,
-              paddingHorizontal: 20,
-              borderRadius: CORNERS,
-              backgroundColor:
-                index === calendarData.month ? primaryColor : 'transparent',
-              marginVertical: 2,
-              alignItems: 'center',
-            }}
-          >
-            <Text
-              style={{
-                color:
-                  index === calendarData.month
-                    ? primaryForegroundColor
-                    : textColor,
-                fontWeight: index === calendarData.month ? '600' : '400',
-                fontSize: FONT_SIZE,
-              }}
-            >
-              {month}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-
-  const renderYearPicker = () => (
-    <View style={{ height: 300 }}>
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        contentContainerStyle={{
-          paddingVertical: 20,
-        }}
-      >
-        {YEARS.map((year) => (
-          <TouchableOpacity
-            key={year}
-            onPress={() => handleYearSelect(year)}
-            style={{
-              paddingVertical: 16,
-              paddingHorizontal: 20,
-              borderRadius: CORNERS,
-              backgroundColor:
-                year === calendarData.year ? primaryColor : 'transparent',
-              marginVertical: 2,
-              alignItems: 'center',
-            }}
-          >
-            <Text
-              style={{
-                color:
-                  year === calendarData.year
-                    ? primaryForegroundColor
-                    : textColor,
-                fontWeight: year === calendarData.year ? '600' : '400',
-                fontSize: FONT_SIZE,
-              }}
-            >
-              {year}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </ScrollView>
-    </View>
-  );
-
-  const getBottomSheetContent = () => {
-    if (showMonthPicker) return renderMonthPicker();
-    if (showYearPicker) return renderYearPicker();
-
-    if (mode === 'datetime') {
-      return viewMode === 'date' ? renderCalendar() : renderTimePicker();
-    }
-
-    if (mode === 'time') return renderTimePicker();
-    return renderCalendar();
-  };
-
-  const getBottomSheetTitle = () => {
-    if (showMonthPicker) return 'Select Month';
-    if (showYearPicker) return 'Select Year';
-
-    if (mode === 'datetime') {
-      return viewMode === 'date' ? 'Select Date' : 'Select Time';
-    }
-
-    if (mode === 'time') return 'Select Time';
-
-    if (mode === 'range') return 'Select Range';
-
-    return 'Select Date';
-  };
-
-  const handleOpenPicker = () => {
-    setCurrentDate(new Date());
-    setViewMode('date');
-    setShowMonthPicker(false);
-    setShowYearPicker(false);
-    open();
-  };
-
-  const triggerStyle: ViewStyle = {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: variant === 'group' ? 0 : 16,
-    borderWidth: variant === 'group' ? 0 : 1,
-    borderColor: variant === 'outline' ? borderColor : cardColor,
-    borderRadius: CORNERS,
-    backgroundColor: variant === 'filled' ? cardColor : 'transparent',
-    minHeight: variant === 'group' ? 'auto' : HEIGHT,
-  };
-
-  return (
-    <>
-      <TouchableOpacity
-        style={[triggerStyle, disabled && { opacity: 0.5 }, style]}
-        onPress={handleOpenPicker}
-        disabled={disabled}
-      >
-        <View
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-          }}
-        >
-          <View
-            style={{
-              width: label ? 120 : 'auto',
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            {mode === 'time' ? (
-              <Icon name={Clock} size={20} strokeWidth={1} />
-            ) : mode === 'datetime' ? (
-              <Icon name={CalendarClock} size={20} strokeWidth={1} />
-            ) : mode === 'range' ? (
-              <Icon name={CalendarRange} size={20} strokeWidth={1} />
-            ) : (
-              <Icon name={Calendar} size={20} strokeWidth={1} />
-            )}
-
-            {/* Label takes 1/3 of available width when present */}
-            {label && (
-              <View style={{ flex: 1 }}>
-                <Text
-                  variant='caption'
-                  numberOfLines={1}
-                  ellipsizeMode='tail'
-                  style={[
-                    {
-                      color: error ? errorColor : textMutedColor,
-                    },
-                    labelStyle,
-                  ]}
-                >
-                  {label}
-                </Text>
-              </View>
-            )}
-          </View>
-
-          {/* Text takes 2/3 of available width when label is present, or full width when no label */}
-          <View style={{ flex: 1 }}>
-            <Text
-              numberOfLines={1}
-              ellipsizeMode='tail'
-              style={{
-                color: value ? textColor : textMutedColor,
-                fontSize: FONT_SIZE,
-              }}
-            >
-              {formatDisplayValue()}
-            </Text>
-          </View>
-        </View>
-      </TouchableOpacity>
-
-      <BottomSheet
-        isVisible={isVisible}
-        onClose={() => {
-          close();
-          setShowMonthPicker(false);
-          setShowYearPicker(false);
-        }}
-        title={getBottomSheetTitle()}
-        snapPoints={[0.7]}
-        disablePanGesture={showMonthPicker || showYearPicker}
-      >
-        <View style={{ flex: 1 }}>
-          {getBottomSheetContent()}
-
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              paddingTop: 20,
-              gap: 12,
-            }}
-          >
-            <View
-              style={{
-                flexDirection: 'row',
-                gap: 8,
-              }}
-            >
-              <Button variant='outline' onPress={resetToToday}>
-                Today
-              </Button>
-
-              <Button
-                variant='outline'
-                onPress={() => {
-                  close();
-                  setShowMonthPicker(false);
-                  setShowYearPicker(false);
-                  clearSelection();
-                }}
-              >
-                {mode === 'range' ? 'Clear' : 'Cancel'}
-              </Button>
-            </View>
-
-            {mode === 'datetime' && viewMode === 'date' ? (
-              <Button onPress={() => setViewMode('time')} style={{ flex: 1 }}>
-                Next
-              </Button>
-            ) : (
-              <Button onPress={handleConfirm} style={{ flex: 1 }}>
-                Done
-              </Button>
-            )}
-          </View>
-        </View>
-      </BottomSheet>
-    </>
-  );
-}