@dreamstack-us/kaal 0.0.4 → 0.1.0

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/components/WheelPicker/WheelPicker.web.tsx

@@ -15,7 +15,7 @@ interface WheelPickerProps {
 }
 
 const getDaysInMonth = (year: number, month: number): number => {
-  return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+  return new Date(year, month + 1, 0).getDate();
 };
 
 const generateDateItems = (
@@ -26,8 +26,8 @@ const generateDateItems = (
 ) => {
   if (type === 'day') {
     const daysInMonth = getDaysInMonth(
-      currentDate.getUTCFullYear(),
-      currentDate.getUTCMonth(),
+      currentDate.getFullYear(),
+      currentDate.getMonth(),
     );
     return Array.from({ length: daysInMonth }, (_, i) => ({
       value: i + 1,
@@ -40,10 +40,8 @@ const generateDateItems = (
       label: new Date(2000, i).toLocaleString('en-US', { month: 'short' }),
     }));
   }
-  const minYear =
-    minDate?.getUTCFullYear() ?? currentDate.getUTCFullYear() - 100;
-  const maxYear =
-    maxDate?.getUTCFullYear() ?? currentDate.getUTCFullYear() + 10;
+  const minYear = minDate?.getFullYear() ?? currentDate.getFullYear() - 100;
+  const maxYear = maxDate?.getFullYear() ?? currentDate.getFullYear() + 10;
   return Array.from({ length: maxYear - minYear + 1 }, (_, i) => ({
     value: minYear + i,
     label: String(minYear + i),
@@ -234,9 +232,7 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
     (index: number) => {
       const newDay = days[index]?.value;
       if (newDay !== undefined) {
-        const newDate = new Date(
-          Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), newDay),
-        );
+        const newDate = new Date(value.getFullYear(), value.getMonth(), newDay);
         onChange(newDate);
       }
     },
@@ -247,11 +243,9 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
     (index: number) => {
       const newMonth = months[index]?.value;
       if (newMonth !== undefined) {
-        const daysInNewMonth = getDaysInMonth(value.getUTCFullYear(), newMonth);
-        const newDay = Math.min(value.getUTCDate(), daysInNewMonth);
-        const newDate = new Date(
-          Date.UTC(value.getUTCFullYear(), newMonth, newDay),
-        );
+        const daysInNewMonth = getDaysInMonth(value.getFullYear(), newMonth);
+        const newDay = Math.min(value.getDate(), daysInNewMonth);
+        const newDate = new Date(value.getFullYear(), newMonth, newDay);
         onChange(newDate);
       }
     },
@@ -262,11 +256,9 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
     (index: number) => {
       const newYear = years[index]?.value;
       if (newYear !== undefined) {
-        const daysInNewMonth = getDaysInMonth(newYear, value.getUTCMonth());
-        const newDay = Math.min(value.getUTCDate(), daysInNewMonth);
-        const newDate = new Date(
-          Date.UTC(newYear, value.getUTCMonth(), newDay),
-        );
+        const daysInNewMonth = getDaysInMonth(newYear, value.getMonth());
+        const newDay = Math.min(value.getDate(), daysInNewMonth);
+        const newDate = new Date(newYear, value.getMonth(), newDay);
         onChange(newDate);
       }
     },
@@ -277,21 +269,19 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
     <View style={webStyles.container}>
       <WheelColumn
         items={months}
-        selectedIndex={value.getUTCMonth()}
+        selectedIndex={value.getMonth()}
         onSelect={handleMonthChange}
         label="Month"
       />
       <WheelColumn
         items={days}
-        selectedIndex={value.getUTCDate() - 1}
+        selectedIndex={value.getDate() - 1}
         onSelect={handleDayChange}
         label="Day"
       />
       <WheelColumn
         items={years}
-        selectedIndex={years.findIndex(
-          (y) => y.value === value.getUTCFullYear(),
-        )}
+        selectedIndex={years.findIndex((y) => y.value === value.getFullYear())}
         onSelect={handleYearChange}
         label="Year"
       />

package/src/hooks/useCalendar.ts

@@ -37,8 +37,8 @@ export const useCalendar = (initialDate?: Date) => {
     }
 
     const monthDays = getMonthDays(
-      currentMonth.getUTCFullYear(),
-      currentMonth.getUTCMonth(),
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
     );
     for (const day of monthDays) {
       days.push(day);

package/src/utils/date.ts

@@ -1,15 +1,19 @@
 /**
  * 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 const toISODateString = (date: Date): string => {
-  const year = date.getUTCFullYear();
-  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
-  const day = String(date.getUTCDate()).padStart(2, '0');
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
   return `${year}-${month}-${day}`;
 };
 
@@ -34,11 +38,11 @@ export 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 const parseISODate = (iso: string): Date => {
   const parts = iso.split('-').map(Number) as [number, number, number];
-  return new Date(Date.UTC(parts[0], parts[1] - 1, parts[2]));
+  return new Date(parts[0], parts[1] - 1, parts[2]);
 };
 
 /**
@@ -67,7 +71,7 @@ export const getDateRange = (start: Date, end: Date): Date[] => {
 
   while (current.getTime() <= end.getTime()) {
     dates.push(new Date(current.getTime()));
-    current.setUTCDate(current.getUTCDate() + 1);
+    current.setDate(current.getDate() + 1);
   }
 
   return dates;
@@ -99,7 +103,7 @@ export const getUserTimezone = (): string => {
  */
 export const addDays = (date: Date, days: number): Date => {
   const result = new Date(date.getTime());
-  result.setUTCDate(result.getUTCDate() + days);
+  result.setDate(result.getDate() + days);
   return result;
 };
 
@@ -108,13 +112,15 @@ export const addDays = (date: Date, days: number): Date => {
  */
 export const addMonths = (date: Date, months: number): Date => {
   const result = new Date(date.getTime());
-  const dayOfMonth = result.getUTCDate();
-  result.setUTCDate(1);
-  result.setUTCMonth(result.getUTCMonth() + months);
+  const dayOfMonth = result.getDate();
+  result.setDate(1);
+  result.setMonth(result.getMonth() + months);
   const daysInMonth = new Date(
-    Date.UTC(result.getUTCFullYear(), result.getUTCMonth() + 1, 0),
-  ).getUTCDate();
-  result.setUTCDate(Math.min(dayOfMonth, daysInMonth));
+    result.getFullYear(),
+    result.getMonth() + 1,
+    0,
+  ).getDate();
+  result.setDate(Math.min(dayOfMonth, daysInMonth));
   return result;
 };
 
@@ -137,10 +143,7 @@ export const isSameDay = (a: Date, b: Date): boolean => {
  * Checks if two dates are the same month
  */
 export const isSameMonth = (a: Date, b: Date): boolean => {
-  return (
-    a.getUTCFullYear() === b.getUTCFullYear() &&
-    a.getUTCMonth() === b.getUTCMonth()
-  );
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
 };
 
 /**
@@ -148,9 +151,9 @@ export const isSameMonth = (a: Date, b: Date): boolean => {
  */
 export const getMonthDays = (year: number, month: number): Date[] => {
   const days: Date[] = [];
-  const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
   for (let day = 1; day <= daysInMonth; day++) {
-    days.push(new Date(Date.UTC(year, month, day)));
+    days.push(new Date(year, month, day));
   }
   return days;
 };
@@ -161,21 +164,21 @@ export const getMonthDays = (year: number, month: number): Date[] => {
  */
 export const getFirstDayOfMonth = (date: Date | null | undefined): Date => {
   const d = date ?? today();
-  return new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1));
+  return new Date(d.getFullYear(), d.getMonth(), 1);
 };
 
 /**
  * Gets the last day of the month
  */
 export const getLastDayOfMonth = (date: Date): Date => {
-  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0));
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 };
 
 /**
  * Gets the day of week (0 = Sunday, 6 = Saturday)
  */
 export const getDayOfWeek = (date: Date): number => {
-  return date.getUTCDay();
+  return date.getDay();
 };
 
 /**
@@ -186,7 +189,9 @@ 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,
+  }).format(date);
 };
 
 /**
@@ -197,7 +202,9 @@ 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,
+  }).format(date);
 };
 
 /**
@@ -211,9 +218,9 @@ export const formatYearMonth = (date: Date, locale = 'en-US'): string => {
 };
 
 /**
- * Gets today's date at midnight UTC
+ * Gets today's date at local midnight
  */
 export const today = (): Date => {
   const now = new Date();
-  return new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate());
 };

package/src/utils/validation.ts

@@ -19,12 +19,12 @@ export function isValidISODate(value: string): boolean {
     number,
     number,
   ];
-  const date = new Date(Date.UTC(year, month - 1, day));
+  const date = new Date(year, month - 1, day);
 
   return (
-    date.getUTCFullYear() === year &&
-    date.getUTCMonth() === month - 1 &&
-    date.getUTCDate() === day
+    date.getFullYear() === year &&
+    date.getMonth() === month - 1 &&
+    date.getDate() === day
   );
 }
 
@@ -70,7 +70,7 @@ export function parseISODateSafe(value: string): Date | null {
     number,
     number,
   ];
-  return new Date(Date.UTC(year, month - 1, day));
+  return new Date(year, month - 1, day);
 }
 
 // Types for date picker values