@dreamstack-us/kaal 0.0.1 → 0.0.2

package/src/components/TimePicker/MaterialTimePicker.tsx

@@ -1,11 +1,27 @@
 import type React from 'react';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { Pressable, 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';
 import { styles } from './TimePicker.styles';
 
+// Default colors (dark theme)
+const DEFAULT_COLORS = {
+  containerBackground: '#2C2C2E',
+  headerColor: '#8E8E93',
+  timeFieldBackground: '#3A3A3C',
+  timeFieldActiveBackground: '#4DA6FF',
+  textColor: '#FFFFFF',
+  separatorColor: '#FFFFFF',
+  borderColor: '#48484A',
+  periodActiveBackground: 'rgba(77, 166, 255, 0.2)',
+  periodTextColor: '#8E8E93',
+  periodTextActiveColor: '#4DA6FF',
+  actionButtonColor: '#4DA6FF',
+};
+
 interface MaterialTimePickerProps {
   value: TimeValue;
   onChange: (time: TimeValue) => void;
@@ -16,6 +32,7 @@ interface MaterialTimePickerProps {
 
 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);
 
@@ -45,10 +62,96 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
       : hour12.toString().padStart(2, '0');
     const displayMinute = value.minutes.toString().padStart(2, '0');
 
+    // Build override styles
+    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={styles.materialContainer}>
+      <View style={[styles.materialContainer, containerStyle]}>
         {/* Header */}
-        <Text style={styles.materialHeader}>Select time</Text>
+        <Text style={[styles.materialHeader, headerStyle]}>Select time</Text>
 
         {/* Time Input Display */}
         <View style={styles.timeInputContainer}>
@@ -58,12 +161,17 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
               onPress={handleHourPress}
               style={[
                 styles.timeField,
-                mode === 'hours' && styles.timeFieldActive,
+                timeFieldStyle,
+                mode === 'hours' && [
+                  styles.timeFieldActive,
+                  timeFieldActiveStyle,
+                ],
               ]}
             >
               <Text
                 style={[
                   styles.timeFieldText,
+                  textStyle,
                   mode === 'hours' && styles.timeFieldTextActive,
                 ]}
               >
@@ -72,19 +180,24 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
             </Pressable>
 
             {/* Separator */}
-            <Text style={styles.timeSeparator}>:</Text>
+            <Text style={[styles.timeSeparator, separatorStyle]}>:</Text>
 
             {/* Minute Field */}
             <Pressable
               onPress={handleMinutePress}
               style={[
                 styles.timeField,
-                mode === 'minutes' && styles.timeFieldActive,
+                timeFieldStyle,
+                mode === 'minutes' && [
+                  styles.timeFieldActive,
+                  timeFieldActiveStyle,
+                ],
               ]}
             >
               <Text
                 style={[
                   styles.timeFieldText,
+                  textStyle,
                   mode === 'minutes' && styles.timeFieldTextActive,
                 ]}
               >
@@ -95,19 +208,26 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
 
           {/* AM/PM Toggle (only for 12-hour format) */}
           {!is24Hour && (
-            <View style={styles.periodToggleContainer}>
+            <View style={[styles.periodToggleContainer, periodContainerStyle]}>
               <Pressable
                 onPress={() => handlePeriodChange('AM')}
                 style={[
                   styles.periodButton,
                   styles.periodButtonTop,
-                  period === 'AM' && styles.periodButtonActive,
+                  period === 'AM' && [
+                    styles.periodButtonActive,
+                    periodActiveStyle,
+                  ],
                 ]}
               >
                 <Text
                   style={[
                     styles.periodButtonText,
-                    period === 'AM' && styles.periodButtonTextActive,
+                    periodTextStyle,
+                    period === 'AM' && [
+                      styles.periodButtonTextActive,
+                      periodTextActiveStyle,
+                    ],
                   ]}
                 >
                   AM
@@ -117,13 +237,20 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
                 onPress={() => handlePeriodChange('PM')}
                 style={[
                   styles.periodButton,
-                  period === 'PM' && styles.periodButtonActive,
+                  period === 'PM' && [
+                    styles.periodButtonActive,
+                    periodActiveStyle,
+                  ],
                 ]}
               >
                 <Text
                   style={[
                     styles.periodButtonText,
-                    period === 'PM' && styles.periodButtonTextActive,
+                    periodTextStyle,
+                    period === 'PM' && [
+                      styles.periodButtonTextActive,
+                      periodTextActiveStyle,
+                    ],
                   ]}
                 >
                   PM
@@ -151,12 +278,16 @@ export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
           <View style={styles.actionButtonsContainer}>
             {onCancel && (
               <Pressable style={styles.actionButton} onPress={onCancel}>
-                <Text style={styles.actionButtonText}>Cancel</Text>
+                <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
+                  Cancel
+                </Text>
               </Pressable>
             )}
             {onConfirm && (
               <Pressable style={styles.actionButton} onPress={onConfirm}>
-                <Text style={styles.actionButtonText}>OK</Text>
+                <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
+                  OK
+                </Text>
               </Pressable>
             )}
           </View>

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

@@ -0,0 +1,271 @@
+/// <reference lib="dom" />
+import type React from 'react';
+import { memo, useCallback, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
+import type { ClockMode, TimePeriod, TimeValue } from '../../types/timepicker';
+import { ClockFace } from './ClockFace';
+
+interface MaterialTimePickerProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  is24Hour?: boolean;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+// Web-compatible styles (no unistyles dependency)
+const webStyles = StyleSheet.create({
+  materialContainer: {
+    backgroundColor: '#2C2C2E',
+    borderRadius: 28,
+    padding: 24,
+    width: 320,
+  },
+  materialHeader: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#8E8E93',
+    letterSpacing: 0.5,
+    marginBottom: 20,
+    textTransform: 'uppercase',
+  },
+  timeInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    marginBottom: 24,
+  },
+  timeFieldsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  timeField: {
+    backgroundColor: '#3A3A3C',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    minWidth: 80,
+    alignItems: 'center',
+  },
+  timeFieldActive: {
+    backgroundColor: '#007AFF',
+  },
+  timeFieldText: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: '#FFFFFF',
+  },
+  timeFieldTextActive: {
+    color: '#FFFFFF',
+  },
+  timeSeparator: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: '#FFFFFF',
+    marginHorizontal: 4,
+  },
+  periodToggleContainer: {
+    borderWidth: 1,
+    borderColor: '#48484A',
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  periodButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: 'transparent',
+  },
+  periodButtonActive: {
+    backgroundColor: 'rgba(0, 122, 255, 0.2)',
+  },
+  periodButtonTop: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#48484A',
+  },
+  periodButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#8E8E93',
+  },
+  periodButtonTextActive: {
+    color: '#007AFF',
+  },
+  clockContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 20,
+  },
+  actionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  keyboardButton: {
+    padding: 8,
+  },
+  keyboardButtonText: {
+    fontSize: 20,
+    color: '#8E8E93',
+  },
+  actionButtonsContainer: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  actionButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#007AFF',
+  },
+});
+
+export const MaterialTimePicker: React.FC<MaterialTimePickerProps> = memo(
+  ({ value, onChange, is24Hour = false, onCancel, onConfirm }) => {
+    const [mode, setMode] = useState<ClockMode>('hours');
+    const { hour: hour12, period } = to12Hour(value.hours);
+
+    const handleHourPress = useCallback(() => {
+      setMode('hours');
+    }, []);
+
+    const handleMinutePress = useCallback(() => {
+      setMode('minutes');
+    }, []);
+
+    const handlePeriodChange = useCallback(
+      (newPeriod: TimePeriod) => {
+        const newHours = to24Hour(hour12, newPeriod);
+        onChange({ hours: newHours, minutes: value.minutes });
+      },
+      [hour12, value.minutes, onChange],
+    );
+
+    const handleModeChange = useCallback((newMode: ClockMode) => {
+      setMode(newMode);
+    }, []);
+
+    const displayHour = is24Hour
+      ? value.hours.toString().padStart(2, '0')
+      : hour12.toString().padStart(2, '0');
+    const displayMinute = value.minutes.toString().padStart(2, '0');
+
+    return (
+      <View style={webStyles.materialContainer}>
+        <Text style={webStyles.materialHeader}>Select time</Text>
+
+        <View style={webStyles.timeInputContainer}>
+          <View style={webStyles.timeFieldsContainer}>
+            <Pressable
+              onPress={handleHourPress}
+              style={[
+                webStyles.timeField,
+                mode === 'hours' && webStyles.timeFieldActive,
+              ]}
+            >
+              <Text
+                style={[
+                  webStyles.timeFieldText,
+                  mode === 'hours' && webStyles.timeFieldTextActive,
+                ]}
+              >
+                {displayHour}
+              </Text>
+            </Pressable>
+
+            <Text style={webStyles.timeSeparator}>:</Text>
+
+            <Pressable
+              onPress={handleMinutePress}
+              style={[
+                webStyles.timeField,
+                mode === 'minutes' && webStyles.timeFieldActive,
+              ]}
+            >
+              <Text
+                style={[
+                  webStyles.timeFieldText,
+                  mode === 'minutes' && webStyles.timeFieldTextActive,
+                ]}
+              >
+                {displayMinute}
+              </Text>
+            </Pressable>
+          </View>
+
+          {!is24Hour && (
+            <View style={webStyles.periodToggleContainer}>
+              <Pressable
+                onPress={() => handlePeriodChange('AM')}
+                style={[
+                  webStyles.periodButton,
+                  webStyles.periodButtonTop,
+                  period === 'AM' && webStyles.periodButtonActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    webStyles.periodButtonText,
+                    period === 'AM' && webStyles.periodButtonTextActive,
+                  ]}
+                >
+                  AM
+                </Text>
+              </Pressable>
+              <Pressable
+                onPress={() => handlePeriodChange('PM')}
+                style={[
+                  webStyles.periodButton,
+                  period === 'PM' && webStyles.periodButtonActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    webStyles.periodButtonText,
+                    period === 'PM' && webStyles.periodButtonTextActive,
+                  ]}
+                >
+                  PM
+                </Text>
+              </Pressable>
+            </View>
+          )}
+        </View>
+
+        <ClockFace
+          value={value}
+          onChange={onChange}
+          mode={mode}
+          onModeChange={handleModeChange}
+          is24Hour={is24Hour}
+        />
+
+        <View style={webStyles.actionsContainer}>
+          <Pressable style={webStyles.keyboardButton}>
+            <Text style={webStyles.keyboardButtonText}>⌨️</Text>
+          </Pressable>
+
+          <View style={webStyles.actionButtonsContainer}>
+            {onCancel && (
+              <Pressable style={webStyles.actionButton} onPress={onCancel}>
+                <Text style={webStyles.actionButtonText}>Cancel</Text>
+              </Pressable>
+            )}
+            {onConfirm && (
+              <Pressable style={webStyles.actionButton} onPress={onConfirm}>
+                <Text style={webStyles.actionButtonText}>OK</Text>
+              </Pressable>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+
+MaterialTimePicker.displayName = 'MaterialTimePicker';

package/src/components/TimePicker/TimePicker.android.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback } from 'react';
 import { ActivityIndicator, View } from 'react-native';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import type { TimePickerProps, TimeValue } from '../../types/timepicker';
 import { MaterialTimePicker } from './MaterialTimePicker';
 import { styles } from './TimePicker.styles';
@@ -50,6 +51,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   onChange,
   theme = 'native',
   is24Hour = false,
+  themeOverrides,
 }) => {
   const handleTimeChange = useCallback(
     (time: TimeValue) => {
@@ -75,6 +77,12 @@ export const TimePicker: React.FC<TimePickerProps> = ({
 
   // Use Material-style picker for 'android' or 'ios' themes
   return (
-    <MaterialTimePicker value={value} onChange={onChange} is24Hour={is24Hour} />
+    <ThemeOverrideProvider value={{ timePicker: themeOverrides }}>
+      <MaterialTimePicker
+        value={value}
+        onChange={onChange}
+        is24Hour={is24Hour}
+      />
+    </ThemeOverrideProvider>
   );
 };

package/src/components/TimePicker/TimePicker.ios.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, useCallback } from 'react';
 import { ActivityIndicator, View } from 'react-native';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import type { TimePickerProps, TimeValue } from '../../types/timepicker';
 import { styles } from './TimePicker.styles';
 import { TimeWheelPicker } from './TimeWheelPicker';
@@ -53,6 +54,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   theme = 'native',
   is24Hour = false,
   minuteInterval = 1,
+  themeOverrides,
 }) => {
   const handleTimeChange = useCallback(
     (time: TimeValue) => {
@@ -78,11 +80,13 @@ export const TimePicker: React.FC<TimePickerProps> = ({
 
   // Fallback to wheel picker for other themes
   return (
-    <TimeWheelPicker
-      value={value}
-      onChange={onChange}
-      is24Hour={is24Hour}
-      minuteInterval={minuteInterval}
-    />
+    <ThemeOverrideProvider value={{ timePicker: themeOverrides }}>
+      <TimeWheelPicker
+        value={value}
+        onChange={onChange}
+        is24Hour={is24Hour}
+        minuteInterval={minuteInterval}
+      />
+    </ThemeOverrideProvider>
   );
 };