@dreamstack-us/kaal 0.0.2 → 0.0.4

package/src/components/CalendarGrid/CalendarGrid.web.tsx

@@ -14,9 +14,9 @@ import {
 } from '../../utils/date';
 import { DayCell } from './DayCell';
 
-interface CalendarGridProps {
-  value: Date;
-  onChange: (date: Date) => void;
+import type { DateRange } from '../../types/datepicker';
+
+interface CalendarGridBaseProps {
   minDate?: Date;
   maxDate?: Date;
   disabledDates?: Date[];
@@ -24,14 +24,30 @@ interface CalendarGridProps {
   /**
    * First day of the week: 0 = Sunday, 1 = Monday
    * @default 0 (Sunday)
-   *
-   * TODO: This is a temporary solution. In the future, we need to add full
-   * locale support to handle different calendar formats, layouts, and
-   * localized day/month names across different regions.
    */
   weekStartsOn?: 0 | 1;
 }
 
+interface CalendarGridSingleProps extends CalendarGridBaseProps {
+  selectionMode?: 'single';
+  value: Date;
+  onChange: (date: Date) => void;
+  startDate?: never;
+  endDate?: never;
+  onRangeChange?: never;
+}
+
+interface CalendarGridRangeProps extends CalendarGridBaseProps {
+  selectionMode: 'range';
+  startDate: Date | null;
+  endDate: Date | null;
+  onRangeChange: (range: DateRange) => void;
+  value?: never;
+  onChange?: never;
+}
+
+type CalendarGridProps = CalendarGridSingleProps | CalendarGridRangeProps;
+
 const CELL_SIZE = 44;
 
 // Week day labels starting from Sunday
@@ -154,152 +170,227 @@ const webStyles = StyleSheet.create({
   },
 });
 
-export const CalendarGrid: React.FC<CalendarGridProps> = memo(
-  ({
-    value,
-    onChange,
+export const CalendarGrid: React.FC<CalendarGridProps> = memo((props) => {
+  const {
     minDate,
     maxDate,
     disabledDates,
     themeMode,
     weekStartsOn = 0,
-  }) => {
-    const overrides = useDatePickerOverrides();
-    const [currentMonth, setCurrentMonth] = React.useState(() =>
-      getFirstDayOfMonth(value),
-    );
-
-    const days = useMemo(
-      () => generateMonthDays(currentMonth, weekStartsOn),
-      [currentMonth, weekStartsOn],
-    );
-
-    const weekDays =
-      weekStartsOn === 0 ? WEEK_DAYS_SUNDAY_START : WEEK_DAYS_MONDAY_START;
-
-    const todayDate = useMemo(() => today(), []);
-
-    const isDisabled = useCallback(
-      (date: Date | null): boolean => {
-        if (!date) return true;
-        if (minDate && compareDates(date, minDate) < 0) return true;
-        if (maxDate && compareDates(date, maxDate) > 0) return true;
-        if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+    selectionMode = 'single',
+  } = props;
+
+  // Extract mode-specific props
+  const singleValue = selectionMode === 'single' ? props.value : null;
+  const singleOnChange = selectionMode === 'single' ? props.onChange : null;
+  const rangeStart = selectionMode === 'range' ? props.startDate : null;
+  const rangeEnd = selectionMode === 'range' ? props.endDate : null;
+  const rangeOnChange = selectionMode === 'range' ? props.onRangeChange : null;
+
+  const overrides = useDatePickerOverrides();
+  const [currentMonth, setCurrentMonth] = React.useState(() =>
+    getFirstDayOfMonth(singleValue || rangeStart || today()),
+  );
+
+  const days = useMemo(
+    () => generateMonthDays(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn],
+  );
+
+  const weekDays =
+    weekStartsOn === 0 ? WEEK_DAYS_SUNDAY_START : WEEK_DAYS_MONDAY_START;
+
+  const todayDate = useMemo(() => today(), []);
+
+  const isDisabled = useCallback(
+    (date: Date | null): boolean => {
+      if (!date) return true;
+      if (minDate && compareDates(date, minDate) < 0) return true;
+      if (maxDate && compareDates(date, maxDate) > 0) return true;
+      if (disabledDates?.some((d) => isSameDay(date, d))) return true;
+      return false;
+    },
+    [minDate, maxDate, disabledDates],
+  );
+
+  const navigateMonth = useCallback((direction: 1 | -1) => {
+    setCurrentMonth((prev) => addMonths(prev, direction));
+  }, []);
+
+  // Handle date press for both single and range modes
+  const handleDatePress = useCallback(
+    (date: Date) => {
+      if (selectionMode === 'single' && singleOnChange) {
+        singleOnChange(date);
+      } else if (selectionMode === 'range' && rangeOnChange) {
+        // Range selection logic:
+        // 1. If no start date, set start date
+        // 2. If start date but no end date, set end date (if after start)
+        // 3. If both dates exist, reset to new start date
+        if (!rangeStart || (rangeStart && rangeEnd)) {
+          rangeOnChange({ startDate: date, endDate: null });
+        } else {
+          // Have start but no end
+          if (compareDates(date, rangeStart) < 0) {
+            // Clicked before start - make this the new start
+            rangeOnChange({ startDate: date, endDate: null });
+          } else if (isSameDay(date, rangeStart)) {
+            // Clicked same day - clear selection
+            rangeOnChange({ startDate: date, endDate: null });
+          } else {
+            // Clicked after start - set as end date
+            rangeOnChange({ startDate: rangeStart, endDate: date });
+          }
+        }
+      }
+    },
+    [selectionMode, singleOnChange, rangeOnChange, rangeStart, rangeEnd],
+  );
+
+  // Check if date is in range (between start and end)
+  const isDateInRange = useCallback(
+    (date: Date | null): boolean => {
+      if (!date || selectionMode !== 'range' || !rangeStart || !rangeEnd) {
         return false;
-      },
-      [minDate, maxDate, disabledDates],
-    );
+      }
+      return (
+        compareDates(date, rangeStart) > 0 && compareDates(date, rangeEnd) < 0
+      );
+    },
+    [selectionMode, rangeStart, rangeEnd],
+  );
 
-    const navigateMonth = useCallback((direction: 1 | -1) => {
-      setCurrentMonth((prev) => addMonths(prev, direction));
-    }, []);
+  const renderDay = useCallback(
+    ({ item }: { item: Date | null }) => {
+      const isRangeStart =
+        selectionMode === 'range' && item && rangeStart
+          ? isSameDay(item, rangeStart)
+          : false;
+      const isRangeEnd =
+        selectionMode === 'range' && item && rangeEnd
+          ? isSameDay(item, rangeEnd)
+          : false;
+      const isSelected =
+        selectionMode === 'single' && item && singleValue
+          ? isSameDay(item, singleValue)
+          : false;
 
-    const renderDay = useCallback(
-      ({ item }: { item: Date | null }) => (
+      return (
         <DayCell
           date={item}
-          isSelected={item ? isSameDay(item, value) : false}
+          isSelected={isSelected}
           isToday={item ? isSameDay(item, todayDate) : false}
           isDisabled={isDisabled(item)}
           isWeekend={
             item ? getDayOfWeek(item) === 0 || getDayOfWeek(item) === 6 : false
           }
-          onPress={item && !isDisabled(item) ? () => onChange(item) : undefined}
+          isRangeStart={isRangeStart}
+          isRangeEnd={isRangeEnd}
+          isInRange={isDateInRange(item)}
+          onPress={
+            item && !isDisabled(item) ? () => handleDatePress(item) : undefined
+          }
         />
-      ),
-      [value, todayDate, isDisabled, onChange],
-    );
-
-    const keyExtractor = useCallback(
-      (item: Date | null, index: number) =>
-        item?.toISOString() ?? `empty-${index}`,
-      [],
-    );
-
-    const getItemLayout = useCallback(
-      (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
-        length: CELL_SIZE,
-        offset: CELL_SIZE * Math.floor(index / 7),
-        index,
-      }),
-      [],
-    );
-
-    // Build override styles
-    const containerStyle = useMemo(
-      () => ({
-        backgroundColor:
-          overrides?.backgroundColor ?? DEFAULT_COLORS.backgroundColor,
-        borderRadius: overrides?.borderRadius ?? DEFAULT_COLORS.borderRadius,
-        padding: overrides?.padding ?? DEFAULT_COLORS.padding,
-      }),
-      [overrides],
-    );
-
-    const navTextStyle = useMemo(
-      () => ({
-        color: overrides?.primaryColor ?? DEFAULT_COLORS.primaryColor,
-      }),
-      [overrides],
-    );
-
-    const monthTitleStyle = useMemo(
-      () => ({
-        color: overrides?.textColor ?? DEFAULT_COLORS.textColor,
-      }),
-      [overrides],
-    );
-
-    const weekDayTextStyle = useMemo(
-      () => ({
-        color: overrides?.textWeekendColor ?? DEFAULT_COLORS.weekdayColor,
-      }),
-      [overrides],
-    );
-
-    return (
-      <View style={[webStyles.container, containerStyle]}>
-        <View style={webStyles.header}>
-          <Pressable
-            onPress={() => navigateMonth(-1)}
-            style={webStyles.navButton}
-          >
-            <Text style={[webStyles.navText, navTextStyle]}>‹</Text>
-          </Pressable>
-          <Text style={[webStyles.monthTitle, monthTitleStyle]}>
-            {formatYearMonth(currentMonth)}
+      );
+    },
+    [
+      selectionMode,
+      singleValue,
+      rangeStart,
+      rangeEnd,
+      todayDate,
+      isDisabled,
+      isDateInRange,
+      handleDatePress,
+    ],
+  );
+
+  const keyExtractor = useCallback(
+    (item: Date | null, index: number) =>
+      item?.toISOString() ?? `empty-${index}`,
+    [],
+  );
+
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<Date | null> | null | undefined, index: number) => ({
+      length: CELL_SIZE,
+      offset: CELL_SIZE * Math.floor(index / 7),
+      index,
+    }),
+    [],
+  );
+
+  // Build override styles
+  const containerStyle = useMemo(
+    () => ({
+      backgroundColor:
+        overrides?.backgroundColor ?? DEFAULT_COLORS.backgroundColor,
+      borderRadius: overrides?.borderRadius ?? DEFAULT_COLORS.borderRadius,
+      padding: overrides?.padding ?? DEFAULT_COLORS.padding,
+    }),
+    [overrides],
+  );
+
+  const navTextStyle = useMemo(
+    () => ({
+      color: overrides?.primaryColor ?? DEFAULT_COLORS.primaryColor,
+    }),
+    [overrides],
+  );
+
+  const monthTitleStyle = useMemo(
+    () => ({
+      color: overrides?.textColor ?? DEFAULT_COLORS.textColor,
+    }),
+    [overrides],
+  );
+
+  const weekDayTextStyle = useMemo(
+    () => ({
+      color: overrides?.textWeekendColor ?? DEFAULT_COLORS.weekdayColor,
+    }),
+    [overrides],
+  );
+
+  return (
+    <View style={[webStyles.container, containerStyle]}>
+      <View style={webStyles.header}>
+        <Pressable
+          onPress={() => navigateMonth(-1)}
+          style={webStyles.navButton}
+        >
+          <Text style={[webStyles.navText, navTextStyle]}>‹</Text>
+        </Pressable>
+        <Text style={[webStyles.monthTitle, monthTitleStyle]}>
+          {formatYearMonth(currentMonth)}
+        </Text>
+        <Pressable onPress={() => navigateMonth(1)} style={webStyles.navButton}>
+          <Text style={[webStyles.navText, navTextStyle]}>›</Text>
+        </Pressable>
+      </View>
+
+      <View style={webStyles.weekDays}>
+        {weekDays.map((day) => (
+          <Text key={day} style={[webStyles.weekDayText, weekDayTextStyle]}>
+            {day}
           </Text>
-          <Pressable
-            onPress={() => navigateMonth(1)}
-            style={webStyles.navButton}
-          >
-            <Text style={[webStyles.navText, navTextStyle]}>›</Text>
-          </Pressable>
-        </View>
-
-        <View style={webStyles.weekDays}>
-          {weekDays.map((day) => (
-            <Text key={day} style={[webStyles.weekDayText, weekDayTextStyle]}>
-              {day}
-            </Text>
-          ))}
-        </View>
-
-        <FlatList
-          data={days}
-          renderItem={renderDay}
-          keyExtractor={keyExtractor}
-          getItemLayout={getItemLayout}
-          numColumns={7}
-          scrollEnabled={false}
-          removeClippedSubviews={true}
-          maxToRenderPerBatch={14}
-          windowSize={3}
-          initialNumToRender={42}
-        />
+        ))}
       </View>
-    );
-  },
-);
+
+      <FlatList
+        data={days}
+        renderItem={renderDay}
+        keyExtractor={keyExtractor}
+        getItemLayout={getItemLayout}
+        numColumns={7}
+        scrollEnabled={false}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={14}
+        windowSize={3}
+        initialNumToRender={42}
+      />
+    </View>
+  );
+});
 
 CalendarGrid.displayName = 'CalendarGrid';

package/src/components/CalendarGrid/DayCell.tsx

@@ -9,6 +9,9 @@ interface DayCellProps {
   isToday: boolean;
   isDisabled: boolean;
   isWeekend: boolean;
+  isRangeStart?: boolean;
+  isRangeEnd?: boolean;
+  isInRange?: boolean;
   onPress?: () => void;
 }
 
@@ -17,10 +20,12 @@ const DEFAULT_COLORS = {
   cellBackground: 'transparent',
   cellSelected: '#4DA6FF',
   cellToday: '#1E3A5F',
+  cellInRange: 'rgba(77, 166, 255, 0.2)',
   textDefault: '#FFFFFF',
   textSelected: '#FFFFFF',
   textDisabled: '#555555',
   textWeekend: '#8E8E93',
+  textInRange: '#FFFFFF',
   primary: '#4DA6FF',
   cellBorderRadius: 22,
 };
@@ -39,7 +44,17 @@ const styles = StyleSheet.create({
 });
 
 export const DayCell: React.FC<DayCellProps> = memo(
-  ({ date, isSelected, isToday, isDisabled, isWeekend, onPress }) => {
+  ({
+    date,
+    isSelected,
+    isToday,
+    isDisabled,
+    isWeekend,
+    isRangeStart,
+    isRangeEnd,
+    isInRange,
+    onPress,
+  }) => {
     const overrides = useDatePickerOverrides();
 
     // Build cell style based on state and overrides
@@ -49,13 +64,18 @@ export const DayCell: React.FC<DayCellProps> = memo(
         backgroundColor: DEFAULT_COLORS.cellBackground,
       };
 
-      if (isSelected) {
+      // Range start/end get selected styling
+      if (isRangeStart || isRangeEnd || isSelected) {
         style.backgroundColor =
           overrides?.cellSelectedColor ??
           overrides?.primaryColor ??
           DEFAULT_COLORS.cellSelected;
         style.borderRadius =
           overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+      } else if (isInRange) {
+        // Dates in range get lighter background
+        style.backgroundColor =
+          overrides?.cellInRangeColor ?? DEFAULT_COLORS.cellInRange;
       } else if (isToday) {
         style.backgroundColor =
           overrides?.cellTodayColor ?? DEFAULT_COLORS.cellToday;
@@ -70,7 +90,15 @@ export const DayCell: React.FC<DayCellProps> = memo(
       }
 
       return style;
-    }, [overrides, isSelected, isToday, isDisabled]);
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
 
     // Build text style based on state and overrides
     const textStyle = useMemo(() => {
@@ -79,10 +107,12 @@ export const DayCell: React.FC<DayCellProps> = memo(
         fontWeight: '400' as const,
       };
 
-      if (isSelected) {
+      if (isRangeStart || isRangeEnd || isSelected) {
         style.color =
           overrides?.textSelectedColor ?? DEFAULT_COLORS.textSelected;
         style.fontWeight = '600';
+      } else if (isInRange) {
+        style.color = overrides?.textInRangeColor ?? DEFAULT_COLORS.textInRange;
       } else if (isToday) {
         style.color = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
         style.fontWeight = '600';
@@ -94,7 +124,16 @@ export const DayCell: React.FC<DayCellProps> = memo(
       }
 
       return style;
-    }, [overrides, isSelected, isToday, isDisabled, isWeekend]);
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isWeekend,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
 
     if (!date) {
       return <Pressable style={styles.cell} disabled />;
@@ -121,7 +160,10 @@ export const DayCell: React.FC<DayCellProps> = memo(
     prev.date?.getTime() === next.date?.getTime() &&
     prev.isSelected === next.isSelected &&
     prev.isToday === next.isToday &&
-    prev.isDisabled === next.isDisabled,
+    prev.isDisabled === next.isDisabled &&
+    prev.isRangeStart === next.isRangeStart &&
+    prev.isRangeEnd === next.isRangeEnd &&
+    prev.isInRange === next.isInRange,
 );
 
 DayCell.displayName = 'DayCell';

package/src/components/CalendarGrid/DayCell.web.tsx

@@ -10,6 +10,9 @@ interface DayCellProps {
   isToday: boolean;
   isDisabled: boolean;
   isWeekend: boolean;
+  isRangeStart?: boolean;
+  isRangeEnd?: boolean;
+  isInRange?: boolean;
   onPress?: () => void;
 }
 
@@ -18,10 +21,12 @@ const DEFAULT_COLORS = {
   cellBackground: 'transparent',
   cellSelected: '#007AFF',
   cellToday: 'rgba(0, 122, 255, 0.1)',
+  cellInRange: 'rgba(0, 122, 255, 0.15)',
   textDefault: '#1C1C1E',
   textSelected: '#FFFFFF',
   textDisabled: '#8E8E93',
   textWeekend: '#8E8E93',
+  textInRange: '#1C1C1E',
   primary: '#007AFF',
   cellBorderRadius: 22,
 };
@@ -41,7 +46,17 @@ const webStyles = StyleSheet.create({
 });
 
 export const DayCell: React.FC<DayCellProps> = memo(
-  ({ date, isSelected, isToday, isDisabled, isWeekend, onPress }) => {
+  ({
+    date,
+    isSelected,
+    isToday,
+    isDisabled,
+    isWeekend,
+    isRangeStart,
+    isRangeEnd,
+    isInRange,
+    onPress,
+  }) => {
     const overrides = useDatePickerOverrides();
 
     // Build cell style based on state and overrides
@@ -51,13 +66,18 @@ export const DayCell: React.FC<DayCellProps> = memo(
         backgroundColor: DEFAULT_COLORS.cellBackground,
       };
 
-      if (isSelected) {
+      // Range start/end get selected styling
+      if (isRangeStart || isRangeEnd || isSelected) {
         style.backgroundColor =
           overrides?.cellSelectedColor ??
           overrides?.primaryColor ??
           DEFAULT_COLORS.cellSelected;
         style.borderRadius =
           overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+      } else if (isInRange) {
+        // Dates in range get lighter background
+        style.backgroundColor =
+          overrides?.cellInRangeColor ?? DEFAULT_COLORS.cellInRange;
       } else if (isToday) {
         style.backgroundColor =
           overrides?.cellTodayColor ?? DEFAULT_COLORS.cellToday;
@@ -72,7 +92,15 @@ export const DayCell: React.FC<DayCellProps> = memo(
       }
 
       return style;
-    }, [overrides, isSelected, isToday, isDisabled]);
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
 
     // Build text style based on state and overrides
     const textStyle = useMemo(() => {
@@ -81,10 +109,12 @@ export const DayCell: React.FC<DayCellProps> = memo(
         fontWeight: '400' as const,
       };
 
-      if (isSelected) {
+      if (isRangeStart || isRangeEnd || isSelected) {
         style.color =
           overrides?.textSelectedColor ?? DEFAULT_COLORS.textSelected;
         style.fontWeight = '600';
+      } else if (isInRange) {
+        style.color = overrides?.textInRangeColor ?? DEFAULT_COLORS.textInRange;
       } else if (isToday) {
         style.color = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
         style.fontWeight = '600';
@@ -96,7 +126,16 @@ export const DayCell: React.FC<DayCellProps> = memo(
       }
 
       return style;
-    }, [overrides, isSelected, isToday, isDisabled, isWeekend]);
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isWeekend,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
 
     if (!date) {
       return <Pressable style={webStyles.cell} disabled />;
@@ -123,7 +162,10 @@ export const DayCell: React.FC<DayCellProps> = memo(
     prev.date?.getTime() === next.date?.getTime() &&
     prev.isSelected === next.isSelected &&
     prev.isToday === next.isToday &&
-    prev.isDisabled === next.isDisabled,
+    prev.isDisabled === next.isDisabled &&
+    prev.isRangeStart === next.isRangeStart &&
+    prev.isRangeEnd === next.isRangeEnd &&
+    prev.isInRange === next.isInRange,
 );
 
 DayCell.displayName = 'DayCell';