@dreamstack-us/kaal 0.0.1 → 0.0.2

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,35 +1,31 @@
-import { Platform } from 'react-native';
-import { StyleSheet, type UnistylesVariants } from 'react-native-unistyles';
+import { Platform, StyleSheet } from 'react-native';
 
-export const styles = StyleSheet.create((theme) => ({
+/**
+ * Default styles for DatePicker using plain React Native StyleSheet.
+ * Colors use dark theme defaults - consumers override via themeOverrides prop.
+ */
+export const styles = StyleSheet.create({
   container: {
-    backgroundColor: theme.colors.background.default,
-    borderRadius: theme.radii.card,
+    backgroundColor: '#1E1E1E',
+    borderRadius: 16,
     overflow: 'hidden',
-    variants: {
-      size: {
-        compact: {
-          padding: theme.spacing(2),
-        },
-        default: {
-          padding: theme.spacing(4),
-        },
-        large: {
-          padding: theme.spacing(6),
-        },
-      },
-    },
+    padding: 16,
+  },
+  containerCompact: {
+    padding: 8,
+  },
+  containerLarge: {
+    padding: 24,
   },
   backdrop: Platform.select({
     web: {
+      // @ts-ignore - web-only properties
       backdropFilter: 'blur(20px) saturate(180%)',
       WebkitBackdropFilter: 'blur(20px) saturate(180%)',
       backgroundColor: 'rgba(255, 255, 255, 0.7)',
     },
     default: {
-      backgroundColor: theme.colors.background.elevated,
+      backgroundColor: '#2C2C2E',
     },
   }),
-}));
-
-export type DatePickerVariants = UnistylesVariants<typeof styles>;
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { DatePickerMode } from '../../types';
+import type { DatePickerMode, DatePickerThemeOverrides } from '../../types';
 
 export interface KaalDatePickerProps {
   value: Date;
@@ -11,6 +11,17 @@ export interface KaalDatePickerProps {
   maxDate?: Date;
   disabledDates?: Date[];
   locale?: string;
+  /**
+   * First day of the week: 0 = Sunday, 1 = Monday
+   * @default 0 (Sunday)
+   *
+   * TODO: This is a temporary solution. In the future, we need to add full
+   * locale support to handle different calendar formats, layouts, and
+   * localized day/month names across different regions.
+   */
+  weekStartsOn?: 0 | 1;
+  /** Custom theme overrides for styling without matching Kaal's theme structure */
+  themeOverrides?: DatePickerThemeOverrides;
 }
 
 // Platform-specific implementations are handled by Metro's file resolution

package/src/components/DatePicker/DatePicker.web.tsx

@@ -1,4 +1,5 @@
 import type React from 'react';
+import { ThemeOverrideProvider } from '../../context/ThemeOverrideContext';
 import { CalendarGrid } from '../CalendarGrid';
 import { WheelPicker } from '../WheelPicker';
 import type { KaalDatePickerProps } from './DatePicker';
@@ -11,26 +12,33 @@ export const DatePicker: React.FC<KaalDatePickerProps> = ({
   minDate,
   maxDate,
   disabledDates,
+  themeOverrides,
+  weekStartsOn = 0,
 }) => {
   if (theme === 'ios' && variant === 'wheel') {
     return (
-      <WheelPicker
+      <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+        <WheelPicker
+          value={value}
+          onChange={onChange}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+      </ThemeOverrideProvider>
+    );
+  }
+
+  return (
+    <ThemeOverrideProvider value={{ datePicker: themeOverrides }}>
+      <CalendarGrid
         value={value}
         onChange={onChange}
         minDate={minDate}
         maxDate={maxDate}
+        disabledDates={disabledDates}
+        themeMode={theme === 'native' ? 'ios' : theme}
+        weekStartsOn={weekStartsOn}
       />
-    );
-  }
-
-  return (
-    <CalendarGrid
-      value={value}
-      onChange={onChange}
-      minDate={minDate}
-      maxDate={maxDate}
-      disabledDates={disabledDates}
-      themeMode={theme === 'native' ? 'ios' : theme}
-    />
+    </ThemeOverrideProvider>
   );
 };

package/src/components/TimePicker/ClockFace.tsx

@@ -4,8 +4,9 @@ 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 { useTimePickerOverrides } from '../../context/ThemeOverrideContext';
 import { to12Hour, to24Hour } from '../../hooks/useTimePicker';
-import type { ClockMode, TimePeriod, TimeValue } from '../../types/timepicker';
+import type { ClockMode, TimeValue } from '../../types/timepicker';
 import { styles } from './TimePicker.styles';
 
 // Clock dimensions
@@ -19,6 +20,15 @@ const CENTER_DOT_RADIUS = 4;
 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)
@@ -54,8 +64,24 @@ interface ClockFaceProps {
 
 export const ClockFace: React.FC<ClockFaceProps> = memo(
   ({ value, onChange, mode, onModeChange, is24Hour = false }) => {
+    const overrides = useTimePickerOverrides();
     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') {
@@ -149,7 +175,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               alignmentBaseline="central"
               fontSize={14}
               fontWeight={isSelected ? '500' : '400'}
-              fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+              fill={isSelected ? colors.textSelectedColor : colors.textColor}
             >
               {hour}
             </SvgText>
@@ -171,13 +197,13 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
             alignmentBaseline="central"
             fontSize={14}
             fontWeight={isSelected ? '500' : '400'}
-            fill={isSelected ? '#FFFFFF' : '#E6E1E5'}
+            fill={isSelected ? colors.textSelectedColor : colors.textColor}
           >
             {minute.toString().padStart(2, '0')}
           </SvgText>
         );
       });
-    }, [mode, hour12, value.minutes]);
+    }, [mode, hour12, value.minutes, colors]);
 
     return (
       <View style={styles.clockContainer}>
@@ -192,7 +218,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={CLOCK_CENTER}
               cy={CLOCK_CENTER}
               r={CLOCK_SIZE / 2 - 4}
-              fill="#3F384C"
+              fill={colors.clockBackground}
             />
 
             {/* Selection dot (behind numbers) */}
@@ -200,7 +226,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={handEndPos.x}
               cy={handEndPos.y}
               r={SELECTION_DOT_RADIUS}
-              fill="#4DA6FF"
+              fill={colors.selectionDotColor}
             />
 
             {/* Clock hand */}
@@ -209,7 +235,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               y1={CLOCK_CENTER}
               x2={handEndPos.x}
               y2={handEndPos.y}
-              stroke="#4DA6FF"
+              stroke={colors.handColor}
               strokeWidth={2}
             />
 
@@ -218,7 +244,7 @@ export const ClockFace: React.FC<ClockFaceProps> = memo(
               cx={CLOCK_CENTER}
               cy={CLOCK_CENTER}
               r={CENTER_DOT_RADIUS}
-              fill="#4DA6FF"
+              fill={colors.handColor}
             />
 
             {/* Numbers */}

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';