@dreamstack-us/kaal 0.0.2 → 0.0.3

package/lib/typescript/components/DatePicker/DatePicker.ios.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.ios.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAgCxD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CpD,CAAC"}
+{"version":3,"file":"DatePicker.ios.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.ios.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAgCxD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgEpD,CAAC"}

package/lib/typescript/components/DatePicker/DatePicker.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.web.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqCpD,CAAC"}
+{"version":3,"file":"DatePicker.web.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6DpD,CAAC"}

package/lib/typescript/index.d.ts

@@ -7,7 +7,7 @@ export { useTimePicker, to12Hour, to24Hour, formatTime, snapToInterval, } from '
 export { toISODateString, toISODateTimeString, parseISODate, parseISODateTime, fromISODateString, fromISODateTimeString, getDateRange, isDateInRange, getUserTimezone, addDays, addMonths, compareDates, isSameDay, isSameMonth, getMonthDays, getFirstDayOfMonth, getLastDayOfMonth, getDayOfWeek, formatMonth, formatWeekday, formatYearMonth, today, } from './utils';
 export { isoDateSchema, isoDateTimeSchema, dateRangeSchema, datePickerValueSchema, dateSchema, temporalDateSchema, } from './utils';
 export type { DatePickerValue, DateRange } from './utils';
-export type { DatePickerMode, DatePickerTheme, DatePickerVariant, DatePickerProps, DatePickerThemeOverrides, } from './types';
+export type { DatePickerMode, DatePickerTheme, DatePickerVariant, DatePickerSelectionMode, DatePickerProps, DatePickerThemeOverrides, DateRange as DatePickerDateRange, } from './types';
 export type { TimePeriod, ClockMode, Time12Hour, MinuteInterval, TimePickerTheme, TimePickerThemeOverrides, } from './types';
 export { ThemeOverrideProvider, useDatePickerOverrides, useTimePickerOverrides, useThemeOverrides, } from './context/ThemeOverrideContext';
 export type { ThemeOverrideContextValue } from './context/ThemeOverrideContext';

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EACL,UAAU,EACV,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAc,GACf,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,OAAO,EACP,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,eAAe,EACf,KAAK,GACN,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EACV,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,wBAAwB,GACzB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EACf,wBAAwB,GACzB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EACL,UAAU,EACV,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,cAAc,GACf,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,eAAe,EACf,OAAO,EACP,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,aAAa,EACb,eAAe,EACf,KAAK,GACN,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,kBAAkB,GACnB,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EACV,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,EACf,wBAAwB,EACxB,SAAS,IAAI,mBAAmB,GACjC,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,cAAc,EACd,eAAe,EACf,wBAAwB,GACzB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC"}

package/lib/typescript/types/datepicker.d.ts

@@ -1,6 +1,11 @@
 export type DatePickerMode = 'date' | 'time' | 'datetime';
 export type DatePickerTheme = 'native' | 'ios' | 'android' | 'custom';
 export type DatePickerVariant = 'wheel' | 'calendar' | 'compact';
+export type DatePickerSelectionMode = 'single' | 'range';
+export interface DateRange {
+    startDate: Date;
+    endDate: Date | null;
+}
 /**
  * Theme overrides for DatePicker components.
  * These allow customizing colors without matching Kaal's internal theme structure.
@@ -30,10 +35,15 @@ export interface DatePickerThemeOverrides {
     cellBorderRadius?: number;
     /** Padding for calendar container */
     padding?: number;
+    /** Background color for dates in range (between start and end) */
+    cellInRangeColor?: string;
+    /** Text color for dates in range */
+    textInRangeColor?: string;
 }
-export interface DatePickerProps {
-    value: Date;
-    onChange: (date: Date) => void;
+/**
+ * Base props shared between single and range selection modes
+ */
+interface DatePickerBaseProps {
     mode?: DatePickerMode;
     theme?: DatePickerTheme;
     variant?: DatePickerVariant;
@@ -53,4 +63,28 @@ export interface DatePickerProps {
     /** Custom theme overrides for styling without matching Kaal's theme structure */
     themeOverrides?: DatePickerThemeOverrides;
 }
+/**
+ * Props for single date selection mode (default)
+ */
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    selectionMode?: 'single';
+    value: Date;
+    onChange: (date: Date) => void;
+    startDate?: never;
+    endDate?: never;
+    onRangeChange?: never;
+}
+/**
+ * Props for range selection mode
+ */
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    selectionMode: 'range';
+    startDate: Date | null;
+    endDate: Date | null;
+    onRangeChange: (range: DateRange) => void;
+    value?: never;
+    onChange?: never;
+}
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+export {};
 //# sourceMappingURL=datepicker.d.ts.map

package/lib/typescript/types/datepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/types/datepicker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IAEvC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,iFAAiF;IACjF,cAAc,CAAC,EAAE,wBAAwB,CAAC;CAC3C"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/types/datepicker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,wBAAwB;IAEvC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,iFAAiF;IACjF,cAAc,CAAC,EAAE,wBAAwB,CAAC;CAC3C;AAED;;GAEG;AACH,UAAU,qBAAsB,SAAQ,mBAAmB;IACzD,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAE/B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,aAAa,CAAC,EAAE,KAAK,CAAC;CACvB;AAED;;GAEG;AACH,UAAU,oBAAqB,SAAQ,mBAAmB;IACxD,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAE1C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamstack-us/kaal",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "High-performance React Native DatePicker with Unistyles v3",
   "type": "module",
   "main": "./lib/module/index.js",

package/src/components/CalendarGrid/CalendarGrid.tsx

@@ -14,9 +14,9 @@ import {
 import { styles } from './CalendarGrid.styles';
 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
@@ -100,138 +116,216 @@ const generateMonthDays = (
   return days;
 };
 
-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 ?? new Date()),
+  );
+
+  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 from themeOverrides
-    const containerStyle = useMemo(
-      () => ({
-        backgroundColor: overrides?.backgroundColor ?? '#1E1E1E',
-        borderRadius: overrides?.borderRadius ?? 16,
-        padding: overrides?.padding ?? 16,
-      }),
-      [overrides],
-    );
-
-    const navTextStyle = useMemo(
-      () => ({
-        color: overrides?.primaryColor ?? '#4DA6FF',
-      }),
-      [overrides],
-    );
-
-    const monthTitleStyle = useMemo(
-      () => ({
-        color: overrides?.textColor ?? '#FFFFFF',
-      }),
-      [overrides],
-    );
-
-    return (
-      <View style={[styles.container, containerStyle]}>
-        <View style={styles.header}>
-          <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
-            <Text style={[styles.navText, navTextStyle]}>‹</Text>
-          </Pressable>
-          <Text style={[styles.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 from themeOverrides
+  const containerStyle = useMemo(
+    () => ({
+      backgroundColor: overrides?.backgroundColor ?? '#1E1E1E',
+      borderRadius: overrides?.borderRadius ?? 16,
+      padding: overrides?.padding ?? 16,
+    }),
+    [overrides],
+  );
+
+  const navTextStyle = useMemo(
+    () => ({
+      color: overrides?.primaryColor ?? '#4DA6FF',
+    }),
+    [overrides],
+  );
+
+  const monthTitleStyle = useMemo(
+    () => ({
+      color: overrides?.textColor ?? '#FFFFFF',
+    }),
+    [overrides],
+  );
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={styles.header}>
+        <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
+          <Text style={[styles.navText, navTextStyle]}>‹</Text>
+        </Pressable>
+        <Text style={[styles.monthTitle, monthTitleStyle]}>
+          {formatYearMonth(currentMonth)}
+        </Text>
+        <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
+          <Text style={[styles.navText, navTextStyle]}>›</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.weekDays}>
+        {weekDays.map((day) => (
+          <Text key={day} style={styles.weekDayText}>
+            {day}
           </Text>
-          <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
-            <Text style={[styles.navText, navTextStyle]}>›</Text>
-          </Pressable>
-        </View>
-
-        <View style={styles.weekDays}>
-          {weekDays.map((day) => (
-            <Text key={day} style={styles.weekDayText}>
-              {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';