@dreamstack-us/kaal 0.0.1 → 0.0.3

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>
   );
 };

package/src/components/TimePicker/TimePicker.styles.ts

@@ -1,28 +1,30 @@
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native';
 
 const ITEM_HEIGHT = 44;
 const VISIBLE_ITEMS = 5;
 const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
 
-export const styles = StyleSheet.create((theme) => ({
+/**
+ * Default styles for TimePicker using plain React Native StyleSheet.
+ * Colors use dark theme defaults - consumers override via themeOverrides prop.
+ */
+export const styles = StyleSheet.create({
   // Container styles
   container: {
-    backgroundColor: theme.colors.background.elevated,
-    borderRadius: theme.radii.card,
-    padding: theme.spacing(4),
+    backgroundColor: '#2C2C2E',
+    borderRadius: 16,
+    padding: 16,
   },
 
   // ============ Wheel Picker Styles (iOS) ============
   wheelContainer: {
     flexDirection: 'row',
     height: CONTAINER_HEIGHT,
-    backgroundColor: theme.colors.background.elevated,
-    // @ts-ignore - web-only property
-    backdropFilter: 'blur(20px)',
-    borderRadius: theme.radii.card,
+    backgroundColor: '#2C2C2E',
+    borderRadius: 16,
     overflow: 'hidden',
     alignItems: 'center',
-    paddingHorizontal: theme.spacing(2),
+    paddingHorizontal: 8,
   },
 
   wheelColumn: {
@@ -38,8 +40,8 @@ export const styles = StyleSheet.create((theme) => ({
     left: 4,
     right: 4,
     height: ITEM_HEIGHT,
-    backgroundColor: theme.colors.datepicker.wheelHighlight,
-    borderRadius: theme.radii.button,
+    backgroundColor: 'rgba(120, 120, 128, 0.24)',
+    borderRadius: 8,
     zIndex: 0,
   },
 
@@ -55,7 +57,7 @@ export const styles = StyleSheet.create((theme) => ({
 
   wheelItemText: {
     fontSize: 22,
-    color: theme.colors.foreground.default,
+    color: '#FFFFFF',
     fontWeight: '400',
     opacity: 0.5,
   },
@@ -68,24 +70,24 @@ export const styles = StyleSheet.create((theme) => ({
   wheelSeparator: {
     fontSize: 22,
     fontWeight: '500',
-    color: theme.colors.foreground.default,
-    paddingHorizontal: theme.spacing(1),
+    color: '#FFFFFF',
+    paddingHorizontal: 4,
   },
 
   // ============ Material Time Picker Styles ============
   materialContainer: {
-    backgroundColor: theme.colors.background.subtle,
+    backgroundColor: '#2C2C2E',
     borderRadius: 28,
-    padding: theme.spacing(6),
+    padding: 24,
     width: 320,
   },
 
   materialHeader: {
     fontSize: 12,
     fontWeight: '500',
-    color: theme.colors.foreground.muted,
+    color: '#8E8E93',
     letterSpacing: 0.5,
-    marginBottom: theme.spacing(5),
+    marginBottom: 20,
     textTransform: 'uppercase',
   },
 
@@ -94,8 +96,8 @@ export const styles = StyleSheet.create((theme) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: theme.spacing(3),
-    marginBottom: theme.spacing(6),
+    gap: 12,
+    marginBottom: 24,
   },
 
   timeFieldsContainer: {
@@ -104,22 +106,22 @@ export const styles = StyleSheet.create((theme) => ({
   },
 
   timeField: {
-    backgroundColor: theme.colors.background.elevated,
-    borderRadius: theme.radii.button,
-    paddingVertical: theme.spacing(3),
-    paddingHorizontal: theme.spacing(2),
+    backgroundColor: '#3A3A3C',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
     minWidth: 80,
     alignItems: 'center',
   },
 
   timeFieldActive: {
-    backgroundColor: theme.colors.primary.default,
+    backgroundColor: '#4DA6FF',
   },
 
   timeFieldText: {
     fontSize: 48,
     fontWeight: '400',
-    color: theme.colors.foreground.default,
+    color: '#FFFFFF',
     fontVariant: ['tabular-nums'],
   },
 
@@ -130,48 +132,48 @@ export const styles = StyleSheet.create((theme) => ({
   timeSeparator: {
     fontSize: 48,
     fontWeight: '400',
-    color: theme.colors.foreground.default,
-    marginHorizontal: theme.spacing(1),
+    color: '#FFFFFF',
+    marginHorizontal: 4,
   },
 
   // Period toggle (AM/PM)
   periodToggleContainer: {
     borderWidth: 1,
-    borderColor: theme.colors.border.strong,
-    borderRadius: theme.radii.button,
+    borderColor: '#48484A',
+    borderRadius: 8,
     overflow: 'hidden',
   },
 
   periodButton: {
-    paddingVertical: theme.spacing(2),
-    paddingHorizontal: theme.spacing(3),
+    paddingVertical: 8,
+    paddingHorizontal: 12,
     backgroundColor: 'transparent',
   },
 
   periodButtonActive: {
-    backgroundColor: `${theme.colors.primary.default}20`, // 20% opacity
+    backgroundColor: 'rgba(77, 166, 255, 0.2)',
   },
 
   periodButtonTop: {
     borderBottomWidth: 1,
-    borderBottomColor: theme.colors.border.strong,
+    borderBottomColor: '#48484A',
   },
 
   periodButtonText: {
     fontSize: 14,
     fontWeight: '500',
-    color: theme.colors.foreground.muted,
+    color: '#8E8E93',
   },
 
   periodButtonTextActive: {
-    color: theme.colors.primary.default,
+    color: '#4DA6FF',
   },
 
   // ============ Clock Face Styles ============
   clockContainer: {
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: theme.spacing(5),
+    marginBottom: 20,
   },
 
   // ============ Action Buttons ============
@@ -182,28 +184,33 @@ export const styles = StyleSheet.create((theme) => ({
   },
 
   keyboardButton: {
-    padding: theme.spacing(2),
+    padding: 8,
   },
 
   keyboardButtonText: {
     fontSize: 20,
-    color: theme.colors.foreground.muted,
+    color: '#8E8E93',
   },
 
   actionButtonsContainer: {
     flexDirection: 'row',
-    gap: theme.spacing(2),
+    gap: 8,
   },
 
   actionButton: {
-    paddingVertical: theme.spacing(2.5),
-    paddingHorizontal: theme.spacing(4),
+    paddingVertical: 10,
+    paddingHorizontal: 16,
     borderRadius: 20,
   },
 
   actionButtonText: {
     fontSize: 14,
     fontWeight: '500',
-    color: theme.colors.primary.default,
+    color: '#4DA6FF',
   },
-}));
+});
+
+// Export constants for use in components
+export const WHEEL_ITEM_HEIGHT = ITEM_HEIGHT;
+export const WHEEL_VISIBLE_ITEMS = VISIBLE_ITEMS;
+export const WHEEL_CONTAINER_HEIGHT = CONTAINER_HEIGHT;

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import type { TimePickerProps } from '../../types/timepicker';
 import { MaterialTimePicker } from './MaterialTimePicker';
 import { TimeWheelPicker } from './TimeWheelPicker';
@@ -15,21 +16,30 @@ export const TimePicker: React.FC<TimePickerProps> = ({
   theme = 'ios',
   is24Hour = false,
   minuteInterval = 1,
+  themeOverrides,
 }) => {
   // iOS theme uses wheel picker
   if (theme === 'ios') {
     return (
-      <TimeWheelPicker
-        value={value}
-        onChange={onChange}
-        is24Hour={is24Hour}
-        minuteInterval={minuteInterval}
-      />
+      <ThemeOverrideProvider value={{ timePicker: themeOverrides }}>
+        <TimeWheelPicker
+          value={value}
+          onChange={onChange}
+          is24Hour={is24Hour}
+          minuteInterval={minuteInterval}
+        />
+      </ThemeOverrideProvider>
     );
   }
 
   // Android/native theme uses Material clock face
   return (
-    <MaterialTimePicker value={value} onChange={onChange} is24Hour={is24Hour} />
+    <ThemeOverrideProvider value={{ timePicker: themeOverrides }}>
+      <MaterialTimePicker
+        value={value}
+        onChange={onChange}
+        is24Hour={is24Hour}
+      />
+    </ThemeOverrideProvider>
   );
 };