@dreamstack-us/kaal 0.0.4 → 0.1.0

package/lib/typescript/utils/date.d.ts

@@ -1,9 +1,13 @@
 /**
  * Date utilities using native Date and Intl APIs
  * Replaces @js-temporal/polyfill for lighter bundle size
+ *
+ * All date-only values use LOCAL time (not UTC). This ensures that
+ * dates displayed in the calendar match what consumers read with
+ * standard .getDate(), .getMonth(), .getFullYear() methods.
  */
 /**
- * Converts a Date to ISO date string (YYYY-MM-DD)
+ * Converts a Date to ISO date string (YYYY-MM-DD) using local time
  */
 export declare const toISODateString: (date: Date) => string;
 /**
@@ -11,7 +15,7 @@ export declare const toISODateString: (date: Date) => string;
  */
 export declare const toISODateTimeString: (date: Date, timeZone?: string) => string;
 /**
- * Parses an ISO date string (YYYY-MM-DD) to Date
+ * Parses an ISO date string (YYYY-MM-DD) to a local Date
  */
 export declare const parseISODate: (iso: string) => Date;
 /**
@@ -89,7 +93,7 @@ export declare const formatWeekday: (date: Date, locale?: string, style?: "long"
  */
 export declare const formatYearMonth: (date: Date, locale?: string) => string;
 /**
- * Gets today's date at midnight UTC
+ * Gets today's date at local midnight
  */
 export declare const today: () => Date;
 //# sourceMappingURL=date.d.ts.map

package/lib/typescript/utils/date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/utils/date.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,MAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,WAAW,MAAM,KAAG,MAenE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,IAG1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,QARI,MAAM,KAAG,IAQE,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,IAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,QAPI,MAAM,KAAG,IAOM,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,EAAE,KAAK,IAAI,KAAG,IAAI,EAUzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,IAAI,EACV,UAAU,IAAI,EACd,UAAU,IAAI,KACb,OAKF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,MAElC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,KAAG,IAIlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,QAAQ,MAAM,KAAG,IAUtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,MAE/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,OAE5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,OAK9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,EAO9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,KAAG,IAGlE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,IAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,MAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,MAAM,IAAI,EACV,eAAgB,EAChB,QAAO,MAAM,GAAG,OAAO,GAAG,QAAiB,KAC1C,MAEF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,IAAI,EACV,eAAgB,EAChB,QAAO,MAAM,GAAG,OAAO,GAAG,QAAkB,KAC3C,MAEF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,EAAE,eAAgB,KAAG,MAK9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,QAAO,IAGxB,CAAC"}
+{"version":3,"file":"date.d.ts","sourceRoot":"","sources":["../../../src/utils/date.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,KAAG,MAK5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,IAAI,EAAE,WAAW,MAAM,KAAG,MAenE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,IAG1C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,QARI,MAAM,KAAG,IAQE,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,IAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,QAPI,MAAM,KAAG,IAOM,CAAC;AAEtD;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,EAAE,KAAK,IAAI,KAAG,IAAI,EAUzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,IAAI,EACV,UAAU,IAAI,EACd,UAAU,IAAI,KACb,OAKF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,MAElC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,GAAI,MAAM,IAAI,EAAE,MAAM,MAAM,KAAG,IAIlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,QAAQ,MAAM,KAAG,IAYtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,MAE/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,OAE5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAG,OAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,EAO9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,KAAG,IAGlE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,IAE9C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,KAAG,MAEzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,GACtB,MAAM,IAAI,EACV,eAAgB,EAChB,QAAO,MAAM,GAAG,OAAO,GAAG,QAAiB,KAC1C,MAIF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,IAAI,EACV,eAAgB,EAChB,QAAO,MAAM,GAAG,OAAO,GAAG,QAAkB,KAC3C,MAIF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,MAAM,IAAI,EAAE,eAAgB,KAAG,MAK9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,QAAO,IAGxB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dreamstack-us/kaal",
-  "version": "0.0.4",
-  "description": "High-performance React Native DatePicker with Unistyles v3",
+  "version": "0.1.0",
+  "description": "High-performance React Native DatePicker and TimePicker",
   "type": "module",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/index.d.ts",
@@ -33,12 +33,9 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.78.0",
-    "react-native-unistyles": "^3.0.0",
-    "react-native-nitro-modules": "0.31.4",
-    "react-native-reanimated": ">=3.17.0",
-    "react-native-gesture-handler": ">=2.20.0",
     "react-native-svg": ">=13.0.0",
-    "@dreamstack-us/kaal-themes": ">=1.0.0"
+    "react-native-reanimated": ">=3.17.0",
+    "react-native-gesture-handler": ">=2.20.0"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
@@ -46,6 +43,9 @@
     },
     "@dreamstack-us/kaal-themes": {
       "optional": true
+    },
+    "react-native-nitro-modules": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -57,7 +57,6 @@
     "react-native-nitro-modules": "0.31.4",
     "react-native-reanimated": "^3.17.0",
     "react-native-svg": "^15.15.1",
-    "react-native-unistyles": "^3.0.0",
     "typescript": "^5.7.0"
   },
   "react-native-builder-bob": {
@@ -94,7 +93,7 @@
     "datepicker",
     "timepicker",
     "calendar",
-    "unistyles",
+    "expo",
     "new-architecture"
   ],
   "license": "MIT"

package/src/components/CalendarGrid/CalendarGrid.tsx

@@ -99,8 +99,8 @@ const generateMonthDays = (
   }
 
   const monthDays = getMonthDays(
-    currentMonth.getUTCFullYear(),
-    currentMonth.getUTCMonth(),
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
   );
   for (const day of monthDays) {
     days.push(day);

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

@@ -109,8 +109,8 @@ const generateMonthDays = (
   }
 
   const monthDays = getMonthDays(
-    currentMonth.getUTCFullYear(),
-    currentMonth.getUTCMonth(),
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
   );
   for (const day of monthDays) {
     days.push(day);

package/src/components/CalendarGrid/DayCell.tsx

@@ -1,6 +1,6 @@
 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 {
@@ -30,16 +30,51 @@ const DEFAULT_COLORS = {
   cellBorderRadius: 22,
 };
 
+const CELL_SIZE = 44;
+const BAND_HEIGHT = 28; // Narrower band for thermometer effect
+
 const styles = 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,
   },
 });
 
@@ -57,48 +92,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(() => {
@@ -135,13 +134,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={styles.cell} disabled />;
     }
 
+    const cellOpacity = isDisabled ? 0.4 : 1;
+
     return (
       <Pressable
-        style={[styles.cell, cellStyle]}
+        style={[styles.cell, { opacity: cellOpacity }]}
         onPress={onPress}
         disabled={isDisabled}
         accessibilityRole="button"
@@ -152,7 +174,36 @@ export const DayCell: React.FC<DayCellProps> = memo(
         }).format(date)}
         accessibilityState={{ selected: isSelected, disabled: isDisabled }}
       >
-        <Text style={[styles.text, textStyle]}>{date.getUTCDate()}</Text>
+        {/* Thermometer band for range start (extends right) */}
+        {isRangeStart && !isRangeEnd && (
+          <View
+            style={[styles.rangeBandRight, { backgroundColor: rangeColor }]}
+          />
+        )}
+
+        {/* Thermometer band for range end (extends left) */}
+        {isRangeEnd && !isRangeStart && (
+          <View
+            style={[styles.rangeBandLeft, { backgroundColor: rangeColor }]}
+          />
+        )}
+
+        {/* Thermometer band for in-range dates (full width) */}
+        {isInRange && (
+          <View style={[styles.rangeBand, { backgroundColor: rangeColor }]} />
+        )}
+
+        {/* Circle for selected/range start/end */}
+        {(isRangeStart || isRangeEnd || isSelected) && (
+          <View
+            style={[styles.circleOverlay, { backgroundColor: selectedColor }]}
+          />
+        )}
+
+        {/* Today indicator (when not in range) */}
+        {todayStyle && <View style={[styles.circleOverlay, todayStyle]} />}
+
+        <Text style={[styles.text, textStyle]}>{date.getDate()}</Text>
       </Pressable>
     );
   },

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"
@@ -154,7 +176,43 @@ export const DayCell: React.FC<DayCellProps> = memo(
         }).format(date)}
         accessibilityState={{ selected: isSelected, disabled: isDisabled }}
       >
-        <Text style={[webStyles.text, textStyle]}>{date.getUTCDate()}</Text>
+        {/* 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.getDate()}</Text>
       </Pressable>
     );
   },