@dreamstack-us/kaal 0.0.3 → 0.0.5

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

@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 import type React from 'react';
 import { memo, useMemo } from 'react';
-import { Pressable, StyleSheet, Text } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
 
 interface DayCellProps {
@@ -31,17 +31,52 @@ const DEFAULT_COLORS = {
   cellBorderRadius: 22,
 };
 
+const CELL_SIZE = 44;
+const BAND_HEIGHT = 28; // Narrower band for thermometer effect
+
 // Web-compatible styles (no unistyles dependency)
 const webStyles = StyleSheet.create({
   cell: {
-    width: 44,
-    height: 44,
+    width: CELL_SIZE,
+    height: CELL_SIZE,
     justifyContent: 'center',
     alignItems: 'center',
   },
+  // Thermometer band for in-range dates
+  rangeBand: {
+    position: 'absolute',
+    top: (CELL_SIZE - BAND_HEIGHT) / 2,
+    height: BAND_HEIGHT,
+    left: 0,
+    right: 0,
+  },
+  // Half band extending right from range start
+  rangeBandRight: {
+    position: 'absolute',
+    top: (CELL_SIZE - BAND_HEIGHT) / 2,
+    height: BAND_HEIGHT,
+    left: CELL_SIZE / 2,
+    right: 0,
+  },
+  // Half band extending left to range end
+  rangeBandLeft: {
+    position: 'absolute',
+    top: (CELL_SIZE - BAND_HEIGHT) / 2,
+    height: BAND_HEIGHT,
+    left: 0,
+    right: CELL_SIZE / 2,
+  },
+  // Circle overlay for selected dates
+  circleOverlay: {
+    position: 'absolute',
+    width: CELL_SIZE,
+    height: CELL_SIZE,
+    borderRadius: CELL_SIZE / 2,
+  },
   text: {
     fontSize: 17,
     fontWeight: '400',
+    zIndex: 1,
   },
 });
 
@@ -59,48 +94,12 @@ export const DayCell: React.FC<DayCellProps> = memo(
   }) => {
     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,
-    ]);
+    const rangeColor =
+      overrides?.cellInRangeColor ?? DEFAULT_COLORS.cellInRange;
+    const selectedColor =
+      overrides?.cellSelectedColor ??
+      overrides?.primaryColor ??
+      DEFAULT_COLORS.cellSelected;
 
     // Build text style based on state and overrides
     const textStyle = useMemo(() => {
@@ -137,13 +136,36 @@ export const DayCell: React.FC<DayCellProps> = memo(
       isInRange,
     ]);
 
+    // Today style (non-range)
+    const todayStyle = useMemo(() => {
+      if (
+        isToday &&
+        !isSelected &&
+        !isRangeStart &&
+        !isRangeEnd &&
+        !isInRange
+      ) {
+        return {
+          backgroundColor:
+            overrides?.cellTodayColor ?? DEFAULT_COLORS.cellToday,
+          borderRadius:
+            overrides?.cellBorderRadius ?? DEFAULT_COLORS.cellBorderRadius,
+          borderWidth: 1,
+          borderColor: overrides?.primaryColor ?? DEFAULT_COLORS.primary,
+        };
+      }
+      return null;
+    }, [isToday, isSelected, isRangeStart, isRangeEnd, isInRange, overrides]);
+
     if (!date) {
       return <Pressable style={webStyles.cell} disabled />;
     }
 
+    const cellOpacity = isDisabled ? 0.4 : 1;
+
     return (
       <Pressable
-        style={[webStyles.cell, cellStyle]}
+        style={[webStyles.cell, { opacity: cellOpacity }]}
         onPress={onPress}
         disabled={isDisabled}
         accessibilityRole="button"
@@ -151,9 +173,46 @@ export const DayCell: React.FC<DayCellProps> = memo(
           weekday: 'long',
           month: 'long',
           day: 'numeric',
+          timeZone: 'UTC',
         }).format(date)}
         accessibilityState={{ selected: isSelected, disabled: isDisabled }}
       >
+        {/* Thermometer band for range start (extends right) */}
+        {isRangeStart && !isRangeEnd && (
+          <View
+            style={[webStyles.rangeBandRight, { backgroundColor: rangeColor }]}
+          />
+        )}
+
+        {/* Thermometer band for range end (extends left) */}
+        {isRangeEnd && !isRangeStart && (
+          <View
+            style={[webStyles.rangeBandLeft, { backgroundColor: rangeColor }]}
+          />
+        )}
+
+        {/* Thermometer band for in-range dates (full width) */}
+        {isInRange && (
+          <View
+            style={[webStyles.rangeBand, { backgroundColor: rangeColor }]}
+          />
+        )}
+
+        {/* Circle for selected/range start/end */}
+        {(isRangeStart || isRangeEnd || isSelected) && (
+          <View
+            style={[
+              webStyles.circleOverlay,
+              { backgroundColor: selectedColor },
+            ]}
+          />
+        )}
+
+        {/* Today indicator (when not in range) */}
+        {todayStyle ? (
+          <View style={[webStyles.circleOverlay, todayStyle]} />
+        ) : null}
+
         <Text style={[webStyles.text, textStyle]}>{date.getUTCDate()}</Text>
       </Pressable>
     );

package/src/components/TimePicker/MaterialTimePicker.web.tsx

@@ -1,11 +1,27 @@
 /// <reference lib="dom" />
 import type React from 'react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTimePickerOverrides } from '../../context/ThemeOverrideContext';
 import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
 import type { ClockMode, TimePeriod, TimeValue } from '../../types/timepicker';
 import { ClockFace } from './ClockFace';
 
+// Default colors (dark theme)
+const DEFAULT_COLORS = {
+  containerBackground: '#2C2C2E',
+  headerColor: '#8E8E93',
+  timeFieldBackground: '#3A3A3C',
+  timeFieldActiveBackground: '#007AFF',
+  textColor: '#FFFFFF',
+  separatorColor: '#FFFFFF',
+  borderColor: '#48484A',
+  periodActiveBackground: 'rgba(0, 122, 255, 0.2)',
+  periodTextColor: '#8E8E93',
+  periodTextActiveColor: '#007AFF',
+  actionButtonColor: '#007AFF',
+};
+
 interface MaterialTimePickerProps {
   value: TimeValue;
   onChange: (time: TimeValue) => void;
@@ -127,6 +143,7 @@ const webStyles = StyleSheet.create({
 
 export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
   ({ value, onChange, is24Hour = false, onCancel, onConfirm }) => {
+    const overrides = useTimePickerOverrides();
     const [mode, setMode] = useState<ClockMode>('hours');
     const { hour: hour12, period } = to12Hour(value.hours);
 
@@ -155,9 +172,95 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
       : hour12.toString().padStart(2, '0');
     const displayMinute = value.minutes.toString().padStart(2, '0');
 
+    // Build override styles from themeOverrides
+    const containerStyle = useMemo(
+      () => ({
+        backgroundColor:
+          overrides?.containerBackground ?? DEFAULT_COLORS.containerBackground,
+      }),
+      [overrides],
+    );
+
+    const headerStyle = useMemo(
+      () => ({
+        color: overrides?.headerColor ?? DEFAULT_COLORS.headerColor,
+      }),
+      [overrides],
+    );
+
+    const timeFieldStyle = useMemo(
+      () => ({
+        backgroundColor:
+          overrides?.timeFieldBackground ?? DEFAULT_COLORS.timeFieldBackground,
+      }),
+      [overrides],
+    );
+
+    const timeFieldActiveStyle = useMemo(
+      () => ({
+        backgroundColor:
+          overrides?.timeFieldActiveBackground ??
+          DEFAULT_COLORS.timeFieldActiveBackground,
+      }),
+      [overrides],
+    );
+
+    const textStyle = useMemo(
+      () => ({
+        color: overrides?.textColor ?? DEFAULT_COLORS.textColor,
+      }),
+      [overrides],
+    );
+
+    const separatorStyle = useMemo(
+      () => ({
+        color: overrides?.separatorColor ?? DEFAULT_COLORS.separatorColor,
+      }),
+      [overrides],
+    );
+
+    const periodContainerStyle = useMemo(
+      () => ({
+        borderColor: overrides?.periodBorderColor ?? DEFAULT_COLORS.borderColor,
+      }),
+      [overrides],
+    );
+
+    const periodActiveStyle = useMemo(
+      () => ({
+        backgroundColor:
+          overrides?.periodActiveBackground ??
+          DEFAULT_COLORS.periodActiveBackground,
+      }),
+      [overrides],
+    );
+
+    const periodTextStyle = useMemo(
+      () => ({
+        color: overrides?.periodTextColor ?? DEFAULT_COLORS.periodTextColor,
+      }),
+      [overrides],
+    );
+
+    const periodTextActiveStyle = useMemo(
+      () => ({
+        color:
+          overrides?.periodTextActiveColor ??
+          DEFAULT_COLORS.periodTextActiveColor,
+      }),
+      [overrides],
+    );
+
+    const actionButtonTextStyle = useMemo(
+      () => ({
+        color: overrides?.actionButtonColor ?? DEFAULT_COLORS.actionButtonColor,
+      }),
+      [overrides],
+    );
+
     return (
-      <View style={webStyles.materialContainer}>
-        <Text style={webStyles.materialHeader}>Select time</Text>
+      <View style={[webStyles.materialContainer, containerStyle]}>
+        <Text style={[webStyles.materialHeader, headerStyle]}>Select time</Text>
 
         <View style={webStyles.timeInputContainer}>
           <View style={webStyles.timeFieldsContainer}>
@@ -165,12 +268,17 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
               onPress={handleHourPress}
               style={[
                 webStyles.timeField,
-                mode === 'hours' && webStyles.timeFieldActive,
+                timeFieldStyle,
+                mode === 'hours' && [
+                  webStyles.timeFieldActive,
+                  timeFieldActiveStyle,
+                ],
               ]}
             >
               <Text
                 style={[
                   webStyles.timeFieldText,
+                  textStyle,
                   mode === 'hours' && webStyles.timeFieldTextActive,
                 ]}
               >
@@ -178,18 +286,23 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
               </Text>
             </Pressable>
 
-            <Text style={webStyles.timeSeparator}>:</Text>
+            <Text style={[webStyles.timeSeparator, separatorStyle]}>:</Text>
 
             <Pressable
               onPress={handleMinutePress}
               style={[
                 webStyles.timeField,
-                mode === 'minutes' && webStyles.timeFieldActive,
+                timeFieldStyle,
+                mode === 'minutes' && [
+                  webStyles.timeFieldActive,
+                  timeFieldActiveStyle,
+                ],
               ]}
             >
               <Text
                 style={[
                   webStyles.timeFieldText,
+                  textStyle,
                   mode === 'minutes' && webStyles.timeFieldTextActive,
                 ]}
               >
@@ -199,19 +312,28 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
           </View>
 
           {!is24Hour && (
-            <View style={webStyles.periodToggleContainer}>
+            <View
+              style={[webStyles.periodToggleContainer, periodContainerStyle]}
+            >
               <Pressable
                 onPress={() => handlePeriodChange('AM')}
                 style={[
                   webStyles.periodButton,
                   webStyles.periodButtonTop,
-                  period === 'AM' && webStyles.periodButtonActive,
+                  period === 'AM' && [
+                    webStyles.periodButtonActive,
+                    periodActiveStyle,
+                  ],
                 ]}
               >
                 <Text
                   style={[
                     webStyles.periodButtonText,
-                    period === 'AM' && webStyles.periodButtonTextActive,
+                    periodTextStyle,
+                    period === 'AM' && [
+                      webStyles.periodButtonTextActive,
+                      periodTextActiveStyle,
+                    ],
                   ]}
                 >
                   AM
@@ -221,13 +343,20 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
                 onPress={() => handlePeriodChange('PM')}
                 style={[
                   webStyles.periodButton,
-                  period === 'PM' && webStyles.periodButtonActive,
+                  period === 'PM' && [
+                    webStyles.periodButtonActive,
+                    periodActiveStyle,
+                  ],
                 ]}
               >
                 <Text
                   style={[
                     webStyles.periodButtonText,
-                    period === 'PM' && webStyles.periodButtonTextActive,
+                    periodTextStyle,
+                    period === 'PM' && [
+                      webStyles.periodButtonTextActive,
+                      periodTextActiveStyle,
+                    ],
                   ]}
                 >
                   PM
@@ -253,12 +382,20 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
           <View style={webStyles.actionButtonsContainer}>
             {onCancel && (
               <Pressable style={webStyles.actionButton} onPress={onCancel}>
-                <Text style={webStyles.actionButtonText}>Cancel</Text>
+                <Text
+                  style={[webStyles.actionButtonText, actionButtonTextStyle]}
+                >
+                  Cancel
+                </Text>
               </Pressable>
             )}
             {onConfirm && (
               <Pressable style={webStyles.actionButton} onPress={onConfirm}>
-                <Text style={webStyles.actionButtonText}>OK</Text>
+                <Text
+                  style={[webStyles.actionButtonText, actionButtonTextStyle]}
+                >
+                  OK
+                </Text>
               </Pressable>
             )}
           </View>

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));
 };
 
 /**
@@ -184,7 +186,10 @@ export const formatMonth = (
   locale = 'en-US',
   style: 'long' | 'short' | 'narrow' = 'long',
 ): string => {
-  return new Intl.DateTimeFormat(locale, { month: style }).format(date);
+  return new Intl.DateTimeFormat(locale, {
+    month: style,
+    timeZone: 'UTC',
+  }).format(date);
 };
 
 /**
@@ -195,7 +200,10 @@ export const formatWeekday = (
   locale = 'en-US',
   style: 'long' | 'short' | 'narrow' = 'short',
 ): string => {
-  return new Intl.DateTimeFormat(locale, { weekday: style }).format(date);
+  return new Intl.DateTimeFormat(locale, {
+    weekday: style,
+    timeZone: 'UTC',
+  }).format(date);
 };
 
 /**
@@ -205,6 +213,7 @@ export const formatYearMonth = (date: Date, locale = 'en-US'): string => {
   return new Intl.DateTimeFormat(locale, {
     month: 'long',
     year: 'numeric',
+    timeZone: 'UTC',
   }).format(date);
 };