@dreamstack-us/kaal 0.0.1

package/src/components/DatePicker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { KaalDatePickerProps } from './DatePicker';

package/src/components/TimePicker/ClockFace.tsx

@@ -0,0 +1,233 @@
+import type React from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import Svg, { Circle, G, Line, Text as SvgText } from 'react-native-svg';
+import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
+import type { ClockMode, TimePeriod, 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];
+
+/**
+ * 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 { hour: hour12, period } = to12Hour(value.hours);
+
+    // 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(
+      (x: number, y: number) => {
+        // 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 panGesture = useMemo(
+      () =>
+        Gesture.Pan()
+          .onStart((e) => {
+            'worklet';
+            runOnJS(handleInteraction)(e.x, e.y);
+          })
+          .onUpdate((e) => {
+            'worklet';
+            runOnJS(handleInteraction)(e.x, e.y);
+          })
+          .onEnd(() => {
+            'worklet';
+            runOnJS(handleInteractionEnd)();
+          }),
+      [handleInteraction, handleInteractionEnd],
+    );
+
+    const tapGesture = useMemo(
+      () =>
+        Gesture.Tap().onEnd((e) => {
+          'worklet';
+          runOnJS(handleInteraction)(e.x, e.y);
+          runOnJS(handleInteractionEnd)();
+        }),
+      [handleInteraction, handleInteractionEnd],
+    );
+
+    const combinedGesture = Gesture.Race(panGesture, tapGesture);
+
+    // 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 (
+            <SvgText
+              key={hour}
+              x={pos.x}
+              y={pos.y}
+              textAnchor="middle"
+              alignmentBaseline="central"
+              fontSize={14}
+              fontWeight={isSelected ? '500' : '400'}
+              fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+            >
+              {hour}
+            </SvgText>
+          );
+        });
+      }
+
+      return MINUTE_LABELS.map((minute, index) => {
+        const angle = positionToAngle(index);
+        const pos = getPointOnCircle(angle, OUTER_RADIUS);
+        const isSelected = value.minutes === minute;
+
+        return (
+          <SvgText
+            key={minute}
+            x={pos.x}
+            y={pos.y}
+            textAnchor="middle"
+            alignmentBaseline="central"
+            fontSize={14}
+            fontWeight={isSelected ? '500' : '400'}
+            fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+          >
+            {minute.toString().padStart(2, '0')}
+          </SvgText>
+        );
+      });
+    }, [mode, hour12, value.minutes]);
+
+    return (
+      <View style={styles.clockContainer}>
+        <GestureDetector gesture={combinedGesture}>
+          <Svg
+            width={CLOCK_SIZE}
+            height={CLOCK_SIZE}
+            viewBox={`0 0 ${CLOCK_SIZE} ${CLOCK_SIZE}`}
+          >
+            {/* Background circle */}
+            <Circle
+              cx={CLOCK_CENTER}
+              cy={CLOCK_CENTER}
+              r={CLOCK_SIZE / 2 - 4}
+              fill="#3F384C"
+            />
+
+            {/* Selection dot (behind numbers) */}
+            <Circle
+              cx={handEndPos.x}
+              cy={handEndPos.y}
+              r={SELECTION_DOT_RADIUS}
+              fill="#4DA6FF"
+            />
+
+            {/* Clock hand */}
+            <Line
+              x1={CLOCK_CENTER}
+              y1={CLOCK_CENTER}
+              x2={handEndPos.x}
+              y2={handEndPos.y}
+              stroke="#4DA6FF"
+              strokeWidth={2}
+            />
+
+            {/* Center dot */}
+            <Circle
+              cx={CLOCK_CENTER}
+              cy={CLOCK_CENTER}
+              r={CENTER_DOT_RADIUS}
+              fill="#4DA6FF"
+            />
+
+            {/* Numbers */}
+            <G>{numbers}</G>
+          </Svg>
+        </GestureDetector>
+      </View>
+    );
+  },
+);
+
+ClockFace.displayName = 'ClockFace';

package/src/components/TimePicker/MaterialTimePicker.tsx

@@ -0,0 +1,169 @@
+import type React from 'react';
+import { memo, useCallback, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
+import type { ClockMode, TimePeriod, TimeValue } from '../../types/timepicker';
+import { ClockFace } from './ClockFace';
+import { styles } from './TimePicker.styles';
+
+interface MaterialTimePickerProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  is24Hour?: boolean;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+}
+
+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);
+    }, []);
+
+    // Format display values
+    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={styles.materialContainer}>
+        {/* Header */}
+        <Text style={styles.materialHeader}>Select time</Text>
+
+        {/* Time Input Display */}
+        <View style={styles.timeInputContainer}>
+          <View style={styles.timeFieldsContainer}>
+            {/* Hour Field */}
+            <Pressable
+              onPress={handleHourPress}
+              style={[
+                styles.timeField,
+                mode === 'hours' && styles.timeFieldActive,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.timeFieldText,
+                  mode === 'hours' && styles.timeFieldTextActive,
+                ]}
+              >
+                {displayHour}
+              </Text>
+            </Pressable>
+
+            {/* Separator */}
+            <Text style={styles.timeSeparator}>:</Text>
+
+            {/* Minute Field */}
+            <Pressable
+              onPress={handleMinutePress}
+              style={[
+                styles.timeField,
+                mode === 'minutes' && styles.timeFieldActive,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.timeFieldText,
+                  mode === 'minutes' && styles.timeFieldTextActive,
+                ]}
+              >
+                {displayMinute}
+              </Text>
+            </Pressable>
+          </View>
+
+          {/* AM/PM Toggle (only for 12-hour format) */}
+          {!is24Hour && (
+            <View style={styles.periodToggleContainer}>
+              <Pressable
+                onPress={() => handlePeriodChange('AM')}
+                style={[
+                  styles.periodButton,
+                  styles.periodButtonTop,
+                  period === 'AM' && styles.periodButtonActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.periodButtonText,
+                    period === 'AM' && styles.periodButtonTextActive,
+                  ]}
+                >
+                  AM
+                </Text>
+              </Pressable>
+              <Pressable
+                onPress={() => handlePeriodChange('PM')}
+                style={[
+                  styles.periodButton,
+                  period === 'PM' && styles.periodButtonActive,
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.periodButtonText,
+                    period === 'PM' && styles.periodButtonTextActive,
+                  ]}
+                >
+                  PM
+                </Text>
+              </Pressable>
+            </View>
+          )}
+        </View>
+
+        {/* Clock Face */}
+        <ClockFace
+          value={value}
+          onChange={onChange}
+          mode={mode}
+          onModeChange={handleModeChange}
+          is24Hour={is24Hour}
+        />
+
+        {/* Actions */}
+        <View style={styles.actionsContainer}>
+          <Pressable style={styles.keyboardButton}>
+            <Text style={styles.keyboardButtonText}>⌨️</Text>
+          </Pressable>
+
+          <View style={styles.actionButtonsContainer}>
+            {onCancel && (
+              <Pressable style={styles.actionButton} onPress={onCancel}>
+                <Text style={styles.actionButtonText}>Cancel</Text>
+              </Pressable>
+            )}
+            {onConfirm && (
+              <Pressable style={styles.actionButton} onPress={onConfirm}>
+                <Text style={styles.actionButtonText}>OK</Text>
+              </Pressable>
+            )}
+          </View>
+        </View>
+      </View>
+    );
+  },
+);
+
+MaterialTimePicker.displayName = 'MaterialTimePicker';

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

@@ -0,0 +1,80 @@
+import React, { Suspense, useCallback } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { TimePickerProps, TimeValue } from '../../types/timepicker';
+import { MaterialTimePicker } from './MaterialTimePicker';
+import { styles } from './TimePicker.styles';
+
+interface ExpoTimePickerProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  is24Hour?: boolean;
+}
+
+// @ts-expect-error - React.lazy fallback returns null when @expo/ui unavailable
+const ExpoTimePicker = React.lazy(async () => {
+  try {
+    // @ts-expect-error - @expo/ui types not available
+    const { DateTimePicker } = await import('@expo/ui/jetpack-compose');
+
+    return {
+      default: ({ value, onChange, is24Hour }: ExpoTimePickerProps) => {
+        // Create a Date object for the picker
+        const date = new Date();
+        date.setHours(value.hours, value.minutes, 0, 0);
+
+        const handleChange = (newDate: Date) => {
+          onChange({
+            hours: newDate.getHours(),
+            minutes: newDate.getMinutes(),
+          });
+        };
+
+        return (
+          <DateTimePicker
+            onDateSelected={handleChange}
+            displayedComponents="hourAndMinute"
+            initialDate={date.toISOString()}
+            variant="picker"
+          />
+        );
+      },
+    };
+  } catch {
+    // Fallback when @expo/ui is not available
+    return { default: (_props: ExpoTimePickerProps) => null };
+  }
+});
+
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value,
+  onChange,
+  theme = 'native',
+  is24Hour = false,
+}) => {
+  const handleTimeChange = useCallback(
+    (time: TimeValue) => {
+      onChange(time);
+    },
+    [onChange],
+  );
+
+  // Use native Android picker for 'native' theme
+  if (theme === 'native') {
+    return (
+      <View style={styles.container}>
+        <Suspense fallback={<ActivityIndicator />}>
+          <ExpoTimePicker
+            value={value}
+            onChange={handleTimeChange}
+            is24Hour={is24Hour}
+          />
+        </Suspense>
+      </View>
+    );
+  }
+
+  // Use Material-style picker for 'android' or 'ios' themes
+  return (
+    <MaterialTimePicker value={value} onChange={onChange} is24Hour={is24Hour} />
+  );
+};

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

@@ -0,0 +1,88 @@
+import React, { Suspense, useCallback } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { TimePickerProps, TimeValue } from '../../types/timepicker';
+import { styles } from './TimePicker.styles';
+import { TimeWheelPicker } from './TimeWheelPicker';
+
+interface ExpoTimePickerProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  is24Hour?: boolean;
+}
+
+// @ts-expect-error - React.lazy fallback returns null when @expo/ui unavailable
+const ExpoTimePicker = React.lazy(async () => {
+  try {
+    // @ts-expect-error - @expo/ui types not available
+    const { DateTimePicker, Host } = await import('@expo/ui/swift-ui');
+
+    return {
+      default: ({ value, onChange, is24Hour }: ExpoTimePickerProps) => {
+        // Create a Date object for the picker
+        const date = new Date();
+        date.setHours(value.hours, value.minutes, 0, 0);
+
+        const handleChange = (newDate: Date) => {
+          onChange({
+            hours: newDate.getHours(),
+            minutes: newDate.getMinutes(),
+          });
+        };
+
+        return (
+          <Host matchContents>
+            <DateTimePicker
+              onDateSelected={handleChange}
+              displayedComponents="hourAndMinute"
+              initialDate={date.toISOString()}
+              variant="wheel"
+            />
+          </Host>
+        );
+      },
+    };
+  } catch {
+    // Fallback when @expo/ui is not available
+    return { default: (_props: ExpoTimePickerProps) => null };
+  }
+});
+
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value,
+  onChange,
+  theme = 'native',
+  is24Hour = false,
+  minuteInterval = 1,
+}) => {
+  const handleTimeChange = useCallback(
+    (time: TimeValue) => {
+      onChange(time);
+    },
+    [onChange],
+  );
+
+  // Use native iOS picker for 'native' or 'ios' theme
+  if (theme === 'native' || theme === 'ios') {
+    return (
+      <View style={styles.container}>
+        <Suspense fallback={<ActivityIndicator />}>
+          <ExpoTimePicker
+            value={value}
+            onChange={handleTimeChange}
+            is24Hour={is24Hour}
+          />
+        </Suspense>
+      </View>
+    );
+  }
+
+  // Fallback to wheel picker for other themes
+  return (
+    <TimeWheelPicker
+      value={value}
+      onChange={onChange}
+      is24Hour={is24Hour}
+      minuteInterval={minuteInterval}
+    />
+  );
+};