@dreamstack-us/kaal 0.0.1 → 0.0.3

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

@@ -0,0 +1,303 @@
+/// <reference lib="dom" />
+import type React from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { View } from 'react-native';
+import { useTimePickerOverrides } from '../../context/ThemeOverrideContext';
+import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
+import type { ClockMode, TimeValue } from '../../types/timepicker';
+import { styles } from './TimePicker.styles';
+
+// Clock dimensions
+const CLOCK_SIZE = 256;
+const CLOCK_CENTER = CLOCK_SIZE / 2;
+const OUTER_RADIUS = 96;
+const SELECTION_DOT_RADIUS = 20;
+const CENTER_DOT_RADIUS = 4;
+
+// Hour positions (12 at top, clockwise)
+const HOURS_12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+const MINUTE_LABELS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+
+// Default colors (dark theme)
+const DEFAULT_COLORS = {
+  clockBackground: '#3F384C',
+  handColor: '#4DA6FF',
+  selectionDotColor: '#4DA6FF',
+  textColor: '#E6E1E5',
+  textSelectedColor: '#FFFFFF',
+};
+
+/**
+ * Converts clock position (0-11 for hours, 0-59 for minutes) to angle in degrees
+ * 12 o'clock is at -90 degrees (top)
+ */
+const positionToAngle = (position: number, isMinutes = false): number => {
+  if (isMinutes) {
+    return position * 6 - 90; // 360/60 = 6 degrees per minute
+  }
+  return position * 30 - 90; // 360/12 = 30 degrees per position
+};
+
+/**
+ * Gets x,y coordinates on circle from angle and radius
+ */
+const getPointOnCircle = (
+  angleDegrees: number,
+  radius: number,
+): { x: number; y: number } => {
+  const rad = (angleDegrees * Math.PI) / 180;
+  return {
+    x: CLOCK_CENTER + radius * Math.cos(rad),
+    y: CLOCK_CENTER + radius * Math.sin(rad),
+  };
+};
+
+interface ClockFaceProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  mode: ClockMode;
+  onModeChange?: (mode: ClockMode) => void;
+  is24Hour?: boolean;
+}
+
+export const ClockFace: React.FC<ClockFaceProps> = memo(
+  ({ value, onChange, mode, onModeChange, is24Hour = false }) => {
+    const overrides = useTimePickerOverrides();
+    const svgRef = useRef<SVGSVGElement>(null);
+    const isDragging = useRef(false);
+    const { hour: hour12, period } = to12Hour(value.hours);
+
+    // Build colors from overrides
+    const colors = useMemo(
+      () => ({
+        clockBackground:
+          overrides?.clockBackground ?? DEFAULT_COLORS.clockBackground,
+        handColor: overrides?.clockHandColor ?? DEFAULT_COLORS.handColor,
+        selectionDotColor:
+          overrides?.clockSelectionColor ?? DEFAULT_COLORS.selectionDotColor,
+        textColor: overrides?.clockTextColor ?? DEFAULT_COLORS.textColor,
+        textSelectedColor:
+          overrides?.clockTextSelectedColor ?? DEFAULT_COLORS.textSelectedColor,
+      }),
+      [overrides],
+    );
+
+    // Calculate hand end position based on current value
+    const handAngle = useMemo(() => {
+      if (mode === 'hours') {
+        const hourIndex = HOURS_12.indexOf(hour12);
+        return positionToAngle(hourIndex >= 0 ? hourIndex : 0);
+      }
+      return positionToAngle(value.minutes, true);
+    }, [mode, hour12, value.minutes]);
+
+    const handEndPos = getPointOnCircle(handAngle, OUTER_RADIUS);
+
+    const handleInteraction = useCallback(
+      (clientX: number, clientY: number) => {
+        if (!svgRef.current) return;
+
+        const rect = svgRef.current.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+
+        // Convert touch coordinates to angle
+        const dx = x - CLOCK_CENTER;
+        const dy = y - CLOCK_CENTER;
+        const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+
+        // Normalize angle to 0-360, with 0 at top (12 o'clock)
+        const normalized = (((angle + 90) % 360) + 360) % 360;
+
+        if (mode === 'hours') {
+          // Round to nearest hour position
+          const position = Math.round(normalized / 30) % 12;
+          const hour = HOURS_12[position];
+          if (hour !== undefined) {
+            const newHours = to24Hour(hour, period);
+            onChange({ hours: newHours, minutes: value.minutes });
+          }
+        } else {
+          // Round to nearest minute
+          const minutes = Math.round(normalized / 6) % 60;
+          onChange({ hours: value.hours, minutes });
+        }
+      },
+      [mode, period, value, onChange],
+    );
+
+    const handleInteractionEnd = useCallback(() => {
+      // Switch to minutes mode after selecting hours
+      if (mode === 'hours' && onModeChange) {
+        // Small delay for visual feedback
+        setTimeout(() => onModeChange('minutes'), 200);
+      }
+    }, [mode, onModeChange]);
+
+    const handleMouseDown = useCallback(
+      (e: React.MouseEvent<SVGSVGElement>) => {
+        isDragging.current = true;
+        handleInteraction(e.clientX, e.clientY);
+      },
+      [handleInteraction],
+    );
+
+    const handleMouseMove = useCallback(
+      (e: React.MouseEvent<SVGSVGElement>) => {
+        if (!isDragging.current) return;
+        handleInteraction(e.clientX, e.clientY);
+      },
+      [handleInteraction],
+    );
+
+    const handleMouseUp = useCallback(() => {
+      if (isDragging.current) {
+        isDragging.current = false;
+        handleInteractionEnd();
+      }
+    }, [handleInteractionEnd]);
+
+    const handleTouchStart = useCallback(
+      (e: React.TouchEvent<SVGSVGElement>) => {
+        isDragging.current = true;
+        const touch = e.touches[0];
+        if (touch) {
+          handleInteraction(touch.clientX, touch.clientY);
+        }
+      },
+      [handleInteraction],
+    );
+
+    const handleTouchMove = useCallback(
+      (e: React.TouchEvent<SVGSVGElement>) => {
+        if (!isDragging.current) return;
+        const touch = e.touches[0];
+        if (touch) {
+          handleInteraction(touch.clientX, touch.clientY);
+        }
+      },
+      [handleInteraction],
+    );
+
+    const handleTouchEnd = useCallback(() => {
+      if (isDragging.current) {
+        isDragging.current = false;
+        handleInteractionEnd();
+      }
+    }, [handleInteractionEnd]);
+
+    // Render clock numbers
+    const numbers = useMemo(() => {
+      if (mode === 'hours') {
+        return HOURS_12.map((hour, index) => {
+          const angle = positionToAngle(index);
+          const pos = getPointOnCircle(angle, OUTER_RADIUS);
+          const isSelected = hour12 === hour;
+
+          return (
+            <text
+              key={hour}
+              x={pos.x}
+              y={pos.y}
+              textAnchor="middle"
+              dominantBaseline="central"
+              fontSize={14}
+              fontWeight={isSelected ? '500' : '400'}
+              fill={isSelected ? colors.textSelectedColor : colors.textColor}
+              style={{ userSelect: 'none' }}
+            >
+              {hour}
+            </text>
+          );
+        });
+      }
+
+      return MINUTE_LABELS.map((minute, index) => {
+        const angle = positionToAngle(index);
+        const pos = getPointOnCircle(angle, OUTER_RADIUS);
+        const isSelected = value.minutes === minute;
+
+        return (
+          <text
+            key={minute}
+            x={pos.x}
+            y={pos.y}
+            textAnchor="middle"
+            dominantBaseline="central"
+            fontSize={14}
+            fontWeight={isSelected ? '500' : '400'}
+            fill={isSelected ? colors.textSelectedColor : colors.textColor}
+            style={{ userSelect: 'none' }}
+          >
+            {minute.toString().padStart(2, '0')}
+          </text>
+        );
+      });
+    }, [mode, hour12, value.minutes, colors]);
+
+    return (
+      <View style={styles.clockContainer}>
+        <svg
+          ref={svgRef}
+          width={CLOCK_SIZE}
+          height={CLOCK_SIZE}
+          viewBox={`0 0 ${CLOCK_SIZE} ${CLOCK_SIZE}`}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          style={{ cursor: 'pointer', touchAction: 'none' }}
+          role="img"
+          aria-label={`Clock face for selecting ${mode === 'hours' ? 'hours' : 'minutes'}`}
+        >
+          <title>
+            {mode === 'hours'
+              ? 'Hour selection clock'
+              : 'Minute selection clock'}
+          </title>
+          {/* Background circle */}
+          <circle
+            cx={CLOCK_CENTER}
+            cy={CLOCK_CENTER}
+            r={CLOCK_SIZE / 2 - 4}
+            fill={colors.clockBackground}
+          />
+
+          {/* Selection dot (behind numbers) */}
+          <circle
+            cx={handEndPos.x}
+            cy={handEndPos.y}
+            r={SELECTION_DOT_RADIUS}
+            fill={colors.selectionDotColor}
+          />
+
+          {/* Clock hand */}
+          <line
+            x1={CLOCK_CENTER}
+            y1={CLOCK_CENTER}
+            x2={handEndPos.x}
+            y2={handEndPos.y}
+            stroke={colors.handColor}
+            strokeWidth={2}
+          />
+
+          {/* Center dot */}
+          <circle
+            cx={CLOCK_CENTER}
+            cy={CLOCK_CENTER}
+            r={CENTER_DOT_RADIUS}
+            fill={colors.handColor}
+          />
+
+          {/* Numbers */}
+          <g>{numbers}</g>
+        </svg>
+      </View>
+    );
+  },
+);
+
+ClockFace.displayName = 'ClockFace';

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>