@dreamstack-us/kaal 0.0.1

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

@@ -0,0 +1,209 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+const ITEM_HEIGHT = 44;
+const VISIBLE_ITEMS = 5;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+
+export const styles = StyleSheet.create((theme) => ({
+  // Container styles
+  container: {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.card,
+    padding: theme.spacing(4),
+  },
+
+  // ============ 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,
+    overflow: 'hidden',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing(2),
+  },
+
+  wheelColumn: {
+    flex: 1,
+    height: CONTAINER_HEIGHT,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+
+  wheelSelectionIndicator: {
+    position: 'absolute',
+    top: ITEM_HEIGHT * 2,
+    left: 4,
+    right: 4,
+    height: ITEM_HEIGHT,
+    backgroundColor: theme.colors.datepicker.wheelHighlight,
+    borderRadius: theme.radii.button,
+    zIndex: 0,
+  },
+
+  wheelItemsContainer: {
+    zIndex: 1,
+  },
+
+  wheelItem: {
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  wheelItemText: {
+    fontSize: 22,
+    color: theme.colors.foreground.default,
+    fontWeight: '400',
+    opacity: 0.5,
+  },
+
+  wheelItemTextSelected: {
+    fontWeight: '500',
+    opacity: 1,
+  },
+
+  wheelSeparator: {
+    fontSize: 22,
+    fontWeight: '500',
+    color: theme.colors.foreground.default,
+    paddingHorizontal: theme.spacing(1),
+  },
+
+  // ============ Material Time Picker Styles ============
+  materialContainer: {
+    backgroundColor: theme.colors.background.subtle,
+    borderRadius: 28,
+    padding: theme.spacing(6),
+    width: 320,
+  },
+
+  materialHeader: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: theme.colors.foreground.muted,
+    letterSpacing: 0.5,
+    marginBottom: theme.spacing(5),
+    textTransform: 'uppercase',
+  },
+
+  // Time input display
+  timeInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing(3),
+    marginBottom: theme.spacing(6),
+  },
+
+  timeFieldsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+
+  timeField: {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.button,
+    paddingVertical: theme.spacing(3),
+    paddingHorizontal: theme.spacing(2),
+    minWidth: 80,
+    alignItems: 'center',
+  },
+
+  timeFieldActive: {
+    backgroundColor: theme.colors.primary.default,
+  },
+
+  timeFieldText: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: theme.colors.foreground.default,
+    fontVariant: ['tabular-nums'],
+  },
+
+  timeFieldTextActive: {
+    color: '#FFFFFF',
+  },
+
+  timeSeparator: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: theme.colors.foreground.default,
+    marginHorizontal: theme.spacing(1),
+  },
+
+  // Period toggle (AM/PM)
+  periodToggleContainer: {
+    borderWidth: 1,
+    borderColor: theme.colors.border.strong,
+    borderRadius: theme.radii.button,
+    overflow: 'hidden',
+  },
+
+  periodButton: {
+    paddingVertical: theme.spacing(2),
+    paddingHorizontal: theme.spacing(3),
+    backgroundColor: 'transparent',
+  },
+
+  periodButtonActive: {
+    backgroundColor: `${theme.colors.primary.default}20`, // 20% opacity
+  },
+
+  periodButtonTop: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border.strong,
+  },
+
+  periodButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: theme.colors.foreground.muted,
+  },
+
+  periodButtonTextActive: {
+    color: theme.colors.primary.default,
+  },
+
+  // ============ Clock Face Styles ============
+  clockContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: theme.spacing(5),
+  },
+
+  // ============ Action Buttons ============
+  actionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+
+  keyboardButton: {
+    padding: theme.spacing(2),
+  },
+
+  keyboardButtonText: {
+    fontSize: 20,
+    color: theme.colors.foreground.muted,
+  },
+
+  actionButtonsContainer: {
+    flexDirection: 'row',
+    gap: theme.spacing(2),
+  },
+
+  actionButton: {
+    paddingVertical: theme.spacing(2.5),
+    paddingHorizontal: theme.spacing(4),
+    borderRadius: 20,
+  },
+
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: theme.colors.primary.default,
+  },
+}));

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { TimePickerProps } from '../../types/timepicker';
+
+// Re-export types for convenience
+export type { TimePickerProps, TimeValue } from '../../types/timepicker';
+
+/**
+ * TimePicker Component
+ *
+ * A cross-platform time picker with support for iOS wheel style and Material clock face.
+ *
+ * Platform-specific implementations are handled by Metro's file resolution:
+ * - iOS: Uses @expo/ui DateTimePicker in time mode, falls back to TimeWheelPicker
+ * - Android: Uses @expo/ui DateTimePicker or MaterialTimePicker with ClockFace
+ * - Web: TimeWheelPicker for iOS theme, MaterialTimePicker for Android theme
+ *
+ * @example
+ * ```tsx
+ * import { TimePicker } from '@dreamstack-us/kaal';
+ *
+ * const [time, setTime] = useState({ hours: 9, minutes: 30 });
+ *
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   theme="ios"
+ *   is24Hour={false}
+ * />
+ * ```
+ */
+export const TimePicker: React.FC<TimePickerProps> = (_props) => {
+  // This file serves as type definition and fallback
+  // Metro resolves platform-specific files (.ios.tsx, .android.tsx, .web.tsx)
+  return null;
+};

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

@@ -0,0 +1,35 @@
+import type React from 'react';
+import type { TimePickerProps } from '../../types/timepicker';
+import { MaterialTimePicker } from './MaterialTimePicker';
+import { TimeWheelPicker } from './TimeWheelPicker';
+
+/**
+ * Web implementation of TimePicker
+ *
+ * - theme="ios": Uses TimeWheelPicker (iOS-style wheel)
+ * - theme="android" or "native": Uses MaterialTimePicker (Material clock face)
+ */
+export const TimePicker: React.FC<TimePickerProps> = ({
+  value,
+  onChange,
+  theme = 'ios',
+  is24Hour = false,
+  minuteInterval = 1,
+}) => {
+  // iOS theme uses wheel picker
+  if (theme === 'ios') {
+    return (
+      <TimeWheelPicker
+        value={value}
+        onChange={onChange}
+        is24Hour={is24Hour}
+        minuteInterval={minuteInterval}
+      />
+    );
+  }
+
+  // Android/native theme uses Material clock face
+  return (
+    <MaterialTimePicker value={value} onChange={onChange} is24Hour={is24Hour} />
+  );
+};

package/src/components/TimePicker/TimeWheelPicker.tsx

@@ -0,0 +1,211 @@
+import type React from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
+import type { TimePeriod, TimeValue } from '../../types/timepicker';
+import { styles } from './TimePicker.styles';
+
+const ITEM_HEIGHT = 44;
+const VISIBLE_ITEMS = 5;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+
+interface WheelColumnProps {
+  items: { value: number | string; label: string }[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+}
+
+const WheelColumn: React.FC<WheelColumnProps> = memo(
+  ({ items, selectedIndex, onSelect }) => {
+    const translateY = useSharedValue(-selectedIndex * ITEM_HEIGHT);
+
+    const handleSelect = useCallback(
+      (index: number) => {
+        onSelect(index);
+      },
+      [onSelect],
+    );
+
+    const panGesture = useMemo(
+      () =>
+        Gesture.Pan()
+          .onUpdate((e) => {
+            'worklet';
+            translateY.value = e.translationY + -selectedIndex * ITEM_HEIGHT;
+          })
+          .onEnd((e) => {
+            'worklet';
+            const velocity = e.velocityY;
+            const targetIndex = Math.round(-translateY.value / ITEM_HEIGHT);
+            const clampedIndex = Math.max(
+              0,
+              Math.min(items.length - 1, targetIndex),
+            );
+
+            translateY.value = withSpring(-clampedIndex * ITEM_HEIGHT, {
+              velocity,
+              damping: 20,
+              stiffness: 200,
+            });
+
+            runOnJS(handleSelect)(clampedIndex);
+          }),
+      [selectedIndex, items.length, handleSelect, translateY],
+    );
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ translateY: translateY.value }],
+    }));
+
+    return (
+      <View style={styles.wheelColumn}>
+        <View style={styles.wheelSelectionIndicator} />
+
+        <GestureDetector gesture={panGesture}>
+          <Animated.View style={[styles.wheelItemsContainer, animatedStyle]}>
+            <View style={{ height: ITEM_HEIGHT * 2 }} />
+
+            {items.map((item, index) => {
+              const isSelected = index === selectedIndex;
+              return (
+                <View key={`${item.value}`} style={styles.wheelItem}>
+                  <Text
+                    style={[
+                      styles.wheelItemText,
+                      isSelected && styles.wheelItemTextSelected,
+                    ]}
+                  >
+                    {item.label}
+                  </Text>
+                </View>
+              );
+            })}
+
+            <View style={{ height: ITEM_HEIGHT * 2 }} />
+          </Animated.View>
+        </GestureDetector>
+      </View>
+    );
+  },
+);
+
+WheelColumn.displayName = 'WheelColumn';
+
+interface TimeWheelPickerProps {
+  value: TimeValue;
+  onChange: (time: TimeValue) => void;
+  is24Hour?: boolean;
+  minuteInterval?: number;
+}
+
+export const TimeWheelPicker: React.FC<TimeWheelPickerProps> = memo(
+  ({ value, onChange, is24Hour = false, minuteInterval = 1 }) => {
+    // Generate hour items
+    const hourItems = useMemo(() => {
+      if (is24Hour) {
+        return Array.from({ length: 24 }, (_, i) => ({
+          value: i,
+          label: i.toString().padStart(2, '0'),
+        }));
+      }
+      // 12-hour format: 1-12
+      return Array.from({ length: 12 }, (_, i) => ({
+        value: i + 1,
+        label: (i + 1).toString().padStart(2, '0'),
+      }));
+    }, [is24Hour]);
+
+    // Generate minute items based on interval
+    const minuteItems = useMemo(() => {
+      const items: { value: number; label: string }[] = [];
+      for (let i = 0; i < 60; i += minuteInterval) {
+        items.push({
+          value: i,
+          label: i.toString().padStart(2, '0'),
+        });
+      }
+      return items;
+    }, [minuteInterval]);
+
+    // Period items for 12-hour format
+    const periodItems = useMemo(
+      () => [
+        { value: 'AM' as const, label: 'AM' },
+        { value: 'PM' as const, label: 'PM' },
+      ],
+      [],
+    );
+
+    // Calculate selected indices
+    const { hour: hour12, period } = to12Hour(value.hours);
+    const hourIndex = is24Hour ? value.hours : hour12 - 1; // 12-hour is 1-indexed
+    const minuteIndex = Math.floor(value.minutes / minuteInterval);
+    const periodIndex = period === 'AM' ? 0 : 1;
+
+    const handleHourChange = useCallback(
+      (index: number) => {
+        let newHours: number;
+        if (is24Hour) {
+          newHours = index;
+        } else {
+          const hour12 = index + 1; // Convert from 0-indexed to 1-12
+          newHours = to24Hour(hour12, period);
+        }
+        onChange({ hours: newHours, minutes: value.minutes });
+      },
+      [is24Hour, period, value.minutes, onChange],
+    );
+
+    const handleMinuteChange = useCallback(
+      (index: number) => {
+        const newMinutes = index * minuteInterval;
+        onChange({ hours: value.hours, minutes: newMinutes });
+      },
+      [value.hours, minuteInterval, onChange],
+    );
+
+    const handlePeriodChange = useCallback(
+      (index: number) => {
+        const newPeriod: TimePeriod = index === 0 ? 'AM' : 'PM';
+        const newHours = to24Hour(hour12, newPeriod);
+        onChange({ hours: newHours, minutes: value.minutes });
+      },
+      [hour12, value.minutes, onChange],
+    );
+
+    return (
+      <View style={styles.wheelContainer}>
+        <WheelColumn
+          items={hourItems}
+          selectedIndex={hourIndex}
+          onSelect={handleHourChange}
+        />
+
+        <Text style={styles.wheelSeparator}>:</Text>
+
+        <WheelColumn
+          items={minuteItems}
+          selectedIndex={minuteIndex}
+          onSelect={handleMinuteChange}
+        />
+
+        {!is24Hour && (
+          <WheelColumn
+            items={periodItems}
+            selectedIndex={periodIndex}
+            onSelect={handlePeriodChange}
+          />
+        )}
+      </View>
+    );
+  },
+);
+
+TimeWheelPicker.displayName = 'TimeWheelPicker';

package/src/components/TimePicker/index.ts

@@ -0,0 +1,5 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps, TimeValue } from './TimePicker';
+export { TimeWheelPicker } from './TimeWheelPicker';
+export { ClockFace } from './ClockFace';
+export { MaterialTimePicker } from './MaterialTimePicker';

package/src/components/WheelPicker/WheelPicker.styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const styles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: 'row',
+    height: 220,
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.card,
+    overflow: 'hidden',
+  },
+  column: {
+    flex: 1,
+    height: 220,
+    overflow: 'hidden',
+  },
+  selectionHighlight: {
+    position: 'absolute',
+    top: 88,
+    left: 4,
+    right: 4,
+    height: 44,
+    backgroundColor: theme.colors.datepicker.wheelHighlight,
+    borderRadius: theme.radii.button,
+    zIndex: 0,
+  },
+  itemsContainer: {
+    zIndex: 1,
+  },
+  item: {
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemText: {
+    fontSize: 21,
+    color: theme.colors.foreground.default,
+    fontWeight: '400',
+  },
+}));

package/src/components/WheelPicker/WheelPicker.tsx

@@ -0,0 +1,2 @@
+// Native platforms don't use custom wheel picker - they use native pickers
+export { WheelPicker } from './WheelPicker.web';