@dreamstack-us/kaal 0.0.1 → 0.0.3

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

@@ -0,0 +1,171 @@
+/// <reference lib="dom" />
+import type React from 'react';
+import { memo, useMemo } from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
+
+interface DayCellProps {
+  date: Date | null;
+  isSelected: boolean;
+  isToday: boolean;
+  isDisabled: boolean;
+  isWeekend: boolean;
+  isRangeStart?: boolean;
+  isRangeEnd?: boolean;
+  isInRange?: boolean;
+  onPress?: () => void;
+}
+
+// Default colors (light theme for web)
+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,
+};
+
+// Web-compatible styles (no unistyles dependency)
+const webStyles = StyleSheet.create({
+  cell: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 17,
+    fontWeight: '400',
+  },
+});
+
+export const DayCell: React.FC<DayCellProps> = memo(
+  ({
+    date,
+    isSelected,
+    isToday,
+    isDisabled,
+    isWeekend,
+    isRangeStart,
+    isRangeEnd,
+    isInRange,
+    onPress,
+  }) => {
+    const overrides = useDatePickerOverrides();
+
+    // Build cell style based on state and overrides
+    // Use primaryColor as fallback for cellSelectedColor (consumer expectation)
+    const cellStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        backgroundColor: DEFAULT_COLORS.cellBackground,
+      };
+
+      // 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;
+        style.borderRadius =
+          overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius;
+        style.borderWidth = 1;
+        style.borderColor = overrides?.primaryColor ?? DEFAULT_COLORS.primary;
+      }
+
+      if (isDisabled) {
+        style.opacity = 0.4;
+      }
+
+      return style;
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
+
+    // Build text style based on state and overrides
+    const textStyle = useMemo(() => {
+      const style: Record<string, unknown> = {
+        color: overrides?.textColor ?? DEFAULT_COLORS.textDefault,
+        fontWeight: '400' as const,
+      };
+
+      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';
+      } else if (isDisabled) {
+        style.color =
+          overrides?.textDisabledColor ?? DEFAULT_COLORS.textDisabled;
+      } else if (isWeekend) {
+        style.color = overrides?.textWeekendColor ?? DEFAULT_COLORS.textWeekend;
+      }
+
+      return style;
+    }, [
+      overrides,
+      isSelected,
+      isToday,
+      isDisabled,
+      isWeekend,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+    ]);
+
+    if (!date) {
+      return <Pressable style={webStyles.cell} disabled />;
+    }
+
+    return (
+      <Pressable
+        style={[webStyles.cell, cellStyle]}
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        accessibilityLabel={new Intl.DateTimeFormat('en-US', {
+          weekday: 'long',
+          month: 'long',
+          day: 'numeric',
+        }).format(date)}
+        accessibilityState={{ selected: isSelected, disabled: isDisabled }}
+      >
+        <Text style={[webStyles.text, textStyle]}>{date.getUTCDate()}</Text>
+      </Pressable>
+    );
+  },
+  (prev, next) =>
+    prev.date?.getTime() === next.date?.getTime() &&
+    prev.isSelected === next.isSelected &&
+    prev.isToday === next.isToday &&
+    prev.isDisabled === next.isDisabled &&
+    prev.isRangeStart === next.isRangeStart &&
+    prev.isRangeEnd === next.isRangeEnd &&
+    prev.isInRange === next.isInRange,
+);
+
+DayCell.displayName = 'DayCell';

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

@@ -1,5 +1,6 @@
-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';
 import { CalendarGrid } from '../CalendarGrid';
 import type { KaalDatePickerProps } from './DatePicker';
@@ -31,39 +32,62 @@ const ExpoDatePicker = React.lazy(async () => {
   }
 });
 
-export const DatePicker: React.FC<KaalDatePickerProps> = ({
-  value,
-  onChange,
-  theme = 'native',
-  minDate,
-  maxDate,
-  disabledDates,
-}) => {
-  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 (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme}
-    />
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={themeMode}
+        weekStartsOn={weekStartsOn}
+      />
+    </ThemeOverrideProvider>
   );
 };

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

@@ -1,5 +1,6 @@
-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';
 import { CalendarGrid } from '../CalendarGrid';
 import type { KaalDatePickerProps } from './DatePicker';
@@ -34,30 +35,48 @@ const ExpoDatePicker = React.lazy(async () => {
   }
 });
 
-export const DatePicker: React.FC<KaalDatePickerProps> = ({
-  value,
-  onChange,
-  mode = 'date',
-  theme = 'native',
-  variant = 'wheel',
-  minDate,
-  maxDate,
-  disabledDates,
-}) => {
-  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>
@@ -65,14 +84,19 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
     );
   }
 
+  // Single selection with custom theme
   return (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme}
-    />
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={themeMode}
+        weekStartsOn={weekStartsOn}
+      />
+    </ThemeOverrideProvider>
   );
 };

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,35 +1,31 @@
-import { Platform } from 'react-native';
-import { StyleSheet, type UnistylesVariants } from 'react-native-unistyles';
+import { Platform, StyleSheet } from 'react-native';
 
-export const styles = StyleSheet.create((theme) => ({
+/**
+ * Default styles for DatePicker using plain React Native StyleSheet.
+ * Colors use dark theme defaults - consumers override via themeOverrides prop.
+ */
+export const styles = StyleSheet.create({
   container: {
-    backgroundColor: theme.colors.background.default,
-    borderRadius: theme.radii.card,
+    backgroundColor: '#1E1E1E',
+    borderRadius: 16,
     overflow: 'hidden',
-    variants: {
-      size: {
-        compact: {
-          padding: theme.spacing(2),
-        },
-        default: {
-          padding: theme.spacing(4),
-        },
-        large: {
-          padding: theme.spacing(6),
-        },
-      },
-    },
+    padding: 16,
+  },
+  containerCompact: {
+    padding: 8,
+  },
+  containerLarge: {
+    padding: 24,
   },
   backdrop: Platform.select({
     web: {
+      // @ts-ignore - web-only properties
       backdropFilter: 'blur(20px) saturate(180%)',
       WebkitBackdropFilter: 'blur(20px) saturate(180%)',
       backgroundColor: 'rgba(255, 255, 255, 0.7)',
     },
     default: {
-      backgroundColor: theme.colors.background.elevated,
+      backgroundColor: '#2C2C2E',
     },
   }),
-}));
-
-export type DatePickerVariants = UnistylesVariants<typeof styles>;
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,11 @@
 import type React from 'react';
-import type { DatePickerMode } 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';
@@ -11,8 +13,37 @@ export interface KaalDatePickerProps {
   maxDate?: Date;
   disabledDates?: Date[];
   locale?: string;
+  /**
+   * First day of the week: 0 = Sunday, 1 = Monday
+   * @default 0 (Sunday)
+   */
+  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

@@ -1,36 +1,68 @@
 import type React from 'react';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 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,
-}) => {
+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 (
-      <WheelPicker
-        value={value}
-        onChange={onChange}
-        minDate={minDate}
-        maxDate={maxDate}
-      />
+      <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+        <WheelPicker
+          value={props.value}
+          onChange={props.onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </ThemeOverrideProvider>
     );
   }
 
   return (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme === 'native' ? 'ios' : theme}
-    />
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
+        selectionMode="single"
+        value={props.value}
+        onChange={props.onChange}
+        minDate={minDate}
+        maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={themeMode}
+        weekStartsOn={weekStartsOn}
+      />
+    </ThemeOverrideProvider>
   );
 };

package/src/components/TimePicker/ClockFace.tsx

@@ -4,8 +4,9 @@ import { View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { runOnJS } from 'react-native-reanimated';
 import Svg, { Circle, G, Line, Text as SvgText } from 'react-native-svg';
+import { useTimePickerOverrides } from '../../context/ThemeOverrideContext';
 import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
-import type { ClockMode, TimePeriod, TimeValue } from '../../types/timepicker';
+import type { ClockMode, TimeValue } from '../../types/timepicker';
 import { styles } from './TimePicker.styles';
 
 // Clock dimensions
@@ -19,6 +20,15 @@ const CENTER_DOT_RADIUS = 4;
 const HOURS_12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 const MINUTE_LABELS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
 
+// Default colors (dark theme)
+const DEFAULT_COLORS = {
+  clockBackground: '#3F384C',
+  handColor: '#4DA6FF',
+  selectionDotColor: '#4DA6FF',
+  textColor: '#E6E1E5',
+  textSelectedColor: '#FFFFFF',
+};
+
 /**
  * Converts clock position (0-11 for hours, 0-59 for minutes) to angle in degrees
  * 12 o'clock is at -90 degrees (top)
@@ -54,8 +64,24 @@ interface ClockFaceProps {
 
 export const ClockFace: React.FC<ClockFaceProps> = memo(
   ({ value, onChange, mode, onModeChange, is24Hour = false }) => {
+    const overrides = useTimePickerOverrides();
     const { hour: hour12, period } = to12Hour(value.hours);
 
+    // Build colors from overrides
+    const colors = useMemo(
+      () => ({
+        clockBackground:
+          overrides?.clockBackground ?? DEFAULT_COLORS.clockBackground,
+        handColor: overrides?.clockHandColor ?? DEFAULT_COLORS.handColor,
+        selectionDotColor:
+          overrides?.clockSelectionColor ?? DEFAULT_COLORS.selectionDotColor,
+        textColor: overrides?.clockTextColor ?? DEFAULT_COLORS.textColor,
+        textSelectedColor:
+          overrides?.clockTextSelectedColor ?? DEFAULT_COLORS.textSelectedColor,
+      }),
+      [overrides],
+    );
+
     // Calculate hand end position based on current value
     const handAngle = useMemo(() => {
       if (mode === 'hours') {
@@ -149,7 +175,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               alignmentBaseline="central"
               fontSize={14}
               fontWeight={isSelected ? '500' : '400'}
-              fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+              fill={isSelected ? colors.textSelectedColor : colors.textColor}
             >
               {hour}
             </SvgText>
@@ -171,13 +197,13 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
             alignmentBaseline="central"
             fontSize={14}
             fontWeight={isSelected ? '500' : '400'}
-            fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+            fill={isSelected ? colors.textSelectedColor : colors.textColor}
           >
             {minute.toString().padStart(2, '0')}
           </SvgText>
         );
       });
-    }, [mode, hour12, value.minutes]);
+    }, [mode, hour12, value.minutes, colors]);
 
     return (
       <View style={styles.clockContainer}>
@@ -192,7 +218,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={CLOCK_CENTER}
               cy={CLOCK_CENTER}
               r={CLOCK_SIZE / 2 - 4}
-              fill="#3F384C"
+              fill={colors.clockBackground}
             />
 
             {/* Selection dot (behind numbers) */}
@@ -200,7 +226,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={handEndPos.x}
               cy={handEndPos.y}
               r={SELECTION_DOT_RADIUS}
-              fill="#4DA6FF"
+              fill={colors.selectionDotColor}
             />
 
             {/* Clock hand */}
@@ -209,7 +235,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               y1={CLOCK_CENTER}
               x2={handEndPos.x}
               y2={handEndPos.y}
-              stroke="#4DA6FF"
+              stroke={colors.handColor}
               strokeWidth={2}
             />
 
@@ -218,7 +244,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={CLOCK_CENTER}
               cy={CLOCK_CENTER}
               r={CENTER_DOT_RADIUS}
-              fill="#4DA6FF"
+              fill={colors.handColor}
             />
 
             {/* Numbers */}