@dreamstack-us/kaal 0.0.2 → 0.0.4

package/src/components/DatePicker/DatePicker.android.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback } from 'react';
+import React, { Suspense } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import { toISODateString } from '../../utils/date';
@@ -32,42 +32,60 @@ const ExpoDatePicker = React.lazy(async () => {
   }
 });
 
-export const DatePicker: React.FC<KaalDatePickerProps> = ({
-  value,
-  onChange,
-  theme = 'native',
-  minDate,
-  maxDate,
-  disabledDates,
-  themeOverrides,
-  weekStartsOn = 0,
-}) => {
-  const handleDateChange = useCallback(
-    (date: Date) => {
-      onChange(date);
-    },
-    [onChange],
-  );
+export const DatePicker: React.FC<KaalDatePickerProps> = (props) => {
+  const {
+    theme = 'native',
+    minDate,
+    maxDate,
+    disabledDates,
+    themeOverrides,
+    weekStartsOn = 0,
+  } = props;
+
+  const themeMode = theme === 'native' ? 'android' : theme;
+
+  // Range mode
+  if (props.selectionMode === 'range') {
+    return (
+      <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+        <CalendarGrid
+          selectionMode="range"
+          startDate={props.startDate}
+          endDate={props.endDate}
+          onRangeChange={props.onRangeChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          disabledDates={disabledDates}
+          themeMode={themeMode}
+          weekStartsOn={weekStartsOn}
+        />
+      </ThemeOverrideProvider>
+    );
+  }
 
+  // Single selection mode
+  // Native picker only available for single selection
   if (theme === 'native') {
     return (
       <View style={styles.container}>
         <Suspense fallback={<ActivityIndicator />}>
-          <ExpoDatePicker value={value} onChange={handleDateChange} />
+          <ExpoDatePicker value={props.value} onChange={props.onChange} />
         </Suspense>
       </View>
     );
   }
 
+  // Single selection with custom theme
   return (
     <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
       <CalendarGrid
-        value={value}
-        onChange={onChange}
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
         minDate={minDate}
         maxDate={maxDate}
         disabledDates={disabledDates}
-        themeMode={theme}
+        themeMode={themeMode}
         weekStartsOn={weekStartsOn}
       />
     </ThemeOverrideProvider>

package/src/components/DatePicker/DatePicker.ios.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useCallback } from 'react';
+import React, { Suspense } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import { toISODateString } from '../../utils/date';
@@ -35,32 +35,48 @@ const ExpoDatePicker = React.lazy(async () => {
   }
 });
 
-export const DatePicker: React.FC<KaalDatePickerProps> = ({
-  value,
-  onChange,
-  mode = 'date',
-  theme = 'native',
-  variant = 'wheel',
-  minDate,
-  maxDate,
-  disabledDates,
-  themeOverrides,
-  weekStartsOn = 0,
-}) => {
-  const handleDateChange = useCallback(
-    (date: Date) => {
-      onChange(date);
-    },
-    [onChange],
-  );
+export const DatePicker: React.FC<KaalDatePickerProps> = (props) => {
+  const {
+    mode = 'date',
+    theme = 'native',
+    variant = 'wheel',
+    minDate,
+    maxDate,
+    disabledDates,
+    themeOverrides,
+    weekStartsOn = 0,
+  } = props;
+
+  const themeMode = theme === 'native' ? 'ios' : theme;
+
+  // Range mode
+  if (props.selectionMode === 'range') {
+    return (
+      <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+        <CalendarGrid
+          selectionMode="range"
+          startDate={props.startDate}
+          endDate={props.endDate}
+          onRangeChange={props.onRangeChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          disabledDates={disabledDates}
+          themeMode={themeMode}
+          weekStartsOn={weekStartsOn}
+        />
+      </ThemeOverrideProvider>
+    );
+  }
 
+  // Single selection mode
+  // Native picker only available for single selection
   if (theme === 'native') {
     return (
       <View style={styles.container}>
         <Suspense fallback={<ActivityIndicator />}>
           <ExpoDatePicker
-            value={value}
-            onChange={handleDateChange}
+            value={props.value}
+            onChange={props.onChange}
             variant={variant}
           />
         </Suspense>
@@ -68,15 +84,17 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
     );
   }
 
+  // Single selection with custom theme
   return (
     <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
       <CalendarGrid
-        value={value}
-        onChange={onChange}
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
         minDate={minDate}
         maxDate={maxDate}
         disabledDates={disabledDates}
-        themeMode={theme}
+        themeMode={themeMode}
         weekStartsOn={weekStartsOn}
       />
     </ThemeOverrideProvider>

package/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,11 @@
 import type React from 'react';
-import type { DatePickerMode, DatePickerThemeOverrides } from '../../types';
+import type {
+  DatePickerMode,
+  DatePickerThemeOverrides,
+  DateRange,
+} from '../../types';
 
-export interface KaalDatePickerProps {
-  value: Date;
-  onChange: (date: Date) => void;
+interface KaalDatePickerBaseProps {
   mode?: DatePickerMode;
   theme?: 'native' | 'ios' | 'android' | 'custom';
   variant?: 'wheel' | 'calendar' | 'compact';
@@ -14,16 +16,34 @@ export interface KaalDatePickerProps {
   /**
    * 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;
   /** Custom theme overrides for styling without matching Kaal's theme structure */
   themeOverrides?: DatePickerThemeOverrides;
 }
 
+interface KaalDatePickerSingleProps extends KaalDatePickerBaseProps {
+  selectionMode?: 'single';
+  value: Date;
+  onChange: (date: Date) => void;
+  startDate?: never;
+  endDate?: never;
+  onRangeChange?: never;
+}
+
+interface KaalDatePickerRangeProps extends KaalDatePickerBaseProps {
+  selectionMode: 'range';
+  startDate: Date | null;
+  endDate: Date | null;
+  onRangeChange: (range: DateRange) => void;
+  value?: never;
+  onChange?: never;
+}
+
+export type KaalDatePickerProps =
+  | KaalDatePickerSingleProps
+  | KaalDatePickerRangeProps;
+
 // Platform-specific implementations are handled by Metro's file resolution
 // This file serves as the type definition and fallback
 export const DatePicker: React.FC<KaalDatePickerProps> = (_props) => {

package/src/components/DatePicker/DatePicker.web.tsx

@@ -4,23 +4,46 @@ import { CalendarGrid } from '../CalendarGrid';
 import { WheelPicker } from '../WheelPicker';
 import type { KaalDatePickerProps } from './DatePicker';
 
-export const DatePicker: React.FC<KaalDatePickerProps> = ({
-  value,
-  onChange,
-  theme = 'ios',
-  variant = 'calendar',
-  minDate,
-  maxDate,
-  disabledDates,
-  themeOverrides,
-  weekStartsOn = 0,
-}) => {
+export const DatePicker: React.FC<KaalDatePickerProps> = (props) => {
+  const {
+    theme = 'ios',
+    variant = 'calendar',
+    minDate,
+    maxDate,
+    disabledDates,
+    themeOverrides,
+    weekStartsOn = 0,
+  } = props;
+
+  const themeMode = theme === 'native' ? 'ios' : theme;
+
+  // Range mode
+  if (props.selectionMode === 'range') {
+    return (
+      <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+        <CalendarGrid
+          selectionMode="range"
+          startDate={props.startDate}
+          endDate={props.endDate}
+          onRangeChange={props.onRangeChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          disabledDates={disabledDates}
+          themeMode={themeMode}
+          weekStartsOn={weekStartsOn}
+        />
+      </ThemeOverrideProvider>
+    );
+  }
+
+  // Single selection mode (default)
+  // Wheel picker only supports single selection
   if (theme === 'ios' && variant === 'wheel') {
     return (
       <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
         <WheelPicker
-          value={value}
-          onChange={onChange}
+          value={props.value}
+          onChange={props.onChange}
           minDate={minDate}
           maxDate={maxDate}
         />
@@ -31,12 +54,13 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   return (
     <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
       <CalendarGrid
-        value={value}
-        onChange={onChange}
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
         minDate={minDate}
         maxDate={maxDate}
         disabledDates={disabledDates}
-        themeMode={theme === 'native' ? 'ios' : theme}
+        themeMode={themeMode}
         weekStartsOn={weekStartsOn}
       />
     </ThemeOverrideProvider>

package/src/index.ts

@@ -64,8 +64,10 @@ export type {
   DatePickerMode,
   DatePickerTheme,
   DatePickerVariant,
+  DatePickerSelectionMode,
   DatePickerProps,
   DatePickerThemeOverrides,
+  DateRange as DatePickerDateRange,
 } from './types';
 
 // Time picker types

package/src/types/datepicker.ts

@@ -4,6 +4,13 @@ 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.
@@ -35,11 +42,16 @@ 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;
@@ -59,3 +71,31 @@ 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;
+  // Range props should not be present
+  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;
+  // Single props should not be present
+  value?: never;
+  onChange?: never;
+}
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;

package/src/utils/date.ts

@@ -157,9 +157,11 @@ export const getMonthDays = (year: number, month: number): Date[] => {
 
 /**
  * Gets the first day of the month
+ * Falls back to today if date is undefined/null
  */
-export const getFirstDayOfMonth = (date: Date): Date => {
-  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+export const getFirstDayOfMonth = (date: Date | null | undefined): Date => {
+  const d = date ?? today();
+  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1));
 };
 
 /**