@dreamstack-us/kaal 0.0.1

package/src/components/WheelPicker/WheelPicker.web.tsx

@@ -0,0 +1,237 @@
+import type React from 'react';
+import { useCallback, useMemo } from 'react';
+import { StyleSheet as RNStyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const ITEM_HEIGHT = 44;
+const VISIBLE_ITEMS = 5;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+
+interface WheelPickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+}
+
+const getDaysInMonth = (year: number, month: number): number => {
+  return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+};
+
+const generateDateItems = (
+  type: 'day' | 'month' | 'year',
+  currentDate: Date,
+  minDate?: Date,
+  maxDate?: Date,
+) => {
+  if (type === 'day') {
+    const daysInMonth = getDaysInMonth(
+      currentDate.getUTCFullYear(),
+      currentDate.getUTCMonth(),
+    );
+    return Array.from({ length: daysInMonth }, (_, i) => ({
+      value: i + 1,
+      label: String(i + 1).padStart(2, '0'),
+    }));
+  }
+  if (type === 'month') {
+    return Array.from({ length: 12 }, (_, i) => ({
+      value: i,
+      label: new Date(2000, i).toLocaleString('en-US', { month: 'short' }),
+    }));
+  }
+  const minYear =
+    minDate?.getUTCFullYear() ?? currentDate.getUTCFullYear() - 100;
+  const maxYear =
+    maxDate?.getUTCFullYear() ?? currentDate.getUTCFullYear() + 10;
+  return Array.from({ length: maxYear - minYear + 1 }, (_, i) => ({
+    value: minYear + i,
+    label: String(minYear + i),
+  }));
+};
+
+const WheelColumn: React.FC<{
+  items: { value: number; label: string }[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+}> = ({ items, selectedIndex, onSelect }) => {
+  const translateY = useSharedValue(-selectedIndex * ITEM_HEIGHT);
+  const velocity = useSharedValue(0);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Reanimated shared values are stable refs
+  const panGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .onUpdate((e) => {
+          'worklet';
+          translateY.value = e.translationY + -selectedIndex * ITEM_HEIGHT;
+          velocity.value = e.velocityY;
+        })
+        .onEnd(() => {
+          'worklet';
+          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: velocity.value,
+            damping: 20,
+            stiffness: 200,
+          });
+        }),
+    [selectedIndex, items.length],
+  );
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return (
+    <View style={webStyles.column}>
+      <View style={webStyles.selectionHighlight} />
+
+      <GestureDetector gesture={panGesture}>
+        <Animated.View style={[webStyles.itemsContainer, animatedStyle]}>
+          <View style={{ height: ITEM_HEIGHT * 2 }} />
+
+          {items.map((item) => (
+            <View key={item.value} style={webStyles.item}>
+              <Text style={webStyles.itemText}>{item.label}</Text>
+            </View>
+          ))}
+
+          <View style={{ height: ITEM_HEIGHT * 2 }} />
+        </Animated.View>
+      </GestureDetector>
+    </View>
+  );
+};
+
+export const WheelPicker: React.FC<WheelPickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+}) => {
+  const days = useMemo(
+    () => generateDateItems('day', value, minDate, maxDate),
+    [value, minDate, maxDate],
+  );
+  const months = useMemo(() => generateDateItems('month', value), [value]);
+  const years = useMemo(
+    () => generateDateItems('year', value, minDate, maxDate),
+    [value, minDate, maxDate],
+  );
+
+  const handleDayChange = useCallback(
+    (index: number) => {
+      const newDay = days[index]?.value;
+      if (newDay !== undefined) {
+        const newDate = new Date(
+          Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), newDay),
+        );
+        onChange(newDate);
+      }
+    },
+    [value, days, onChange],
+  );
+
+  const handleMonthChange = useCallback(
+    (index: number) => {
+      const newMonth = months[index]?.value;
+      if (newMonth !== undefined) {
+        const daysInNewMonth = getDaysInMonth(value.getUTCFullYear(), newMonth);
+        const newDay = Math.min(value.getUTCDate(), daysInNewMonth);
+        const newDate = new Date(
+          Date.UTC(value.getUTCFullYear(), newMonth, newDay),
+        );
+        onChange(newDate);
+      }
+    },
+    [value, months, onChange],
+  );
+
+  const handleYearChange = useCallback(
+    (index: number) => {
+      const newYear = years[index]?.value;
+      if (newYear !== undefined) {
+        const daysInNewMonth = getDaysInMonth(newYear, value.getUTCMonth());
+        const newDay = Math.min(value.getUTCDate(), daysInNewMonth);
+        const newDate = new Date(
+          Date.UTC(newYear, value.getUTCMonth(), newDay),
+        );
+        onChange(newDate);
+      }
+    },
+    [value, years, onChange],
+  );
+
+  return (
+    <View style={webStyles.container}>
+      <WheelColumn
+        items={months}
+        selectedIndex={value.getUTCMonth()}
+        onSelect={handleMonthChange}
+      />
+      <WheelColumn
+        items={days}
+        selectedIndex={value.getUTCDate() - 1}
+        onSelect={handleDayChange}
+      />
+      <WheelColumn
+        items={years}
+        selectedIndex={years.findIndex(
+          (y) => y.value === value.getUTCFullYear(),
+        )}
+        onSelect={handleYearChange}
+      />
+    </View>
+  );
+};
+
+const webStyles = RNStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: CONTAINER_HEIGHT,
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    // @ts-ignore - web-only property
+    backdropFilter: 'blur(20px)',
+    borderRadius: 14,
+    overflow: 'hidden',
+  },
+  column: {
+    flex: 1,
+    height: CONTAINER_HEIGHT,
+    overflow: 'hidden',
+  },
+  selectionHighlight: {
+    position: 'absolute',
+    top: ITEM_HEIGHT * 2,
+    left: 4,
+    right: 4,
+    height: ITEM_HEIGHT,
+    backgroundColor: 'rgba(0, 0, 0, 0.04)',
+    borderRadius: 8,
+    zIndex: 0,
+  },
+  itemsContainer: {
+    zIndex: 1,
+  },
+  item: {
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemText: {
+    fontSize: 21,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif',
+    fontWeight: '400',
+  },
+});

package/src/components/WheelPicker/index.ts

@@ -0,0 +1 @@
+export { WheelPicker } from './WheelPicker';

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export { DatePicker, type KaalDatePickerProps } from './DatePicker';
+export { CalendarGrid } from './CalendarGrid';
+export { WheelPicker } from './WheelPicker';
+export {
+  TimePicker,
+  TimeWheelPicker,
+  ClockFace,
+  MaterialTimePicker,
+  type TimePickerProps,
+  type TimeValue,
+} from './TimePicker';

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useDatePicker } from './useDatePicker';
+export { useCalendar } from './useCalendar';
+export {
+  useTimePicker,
+  to12Hour,
+  to24Hour,
+  formatTime,
+  snapToInterval,
+} from './useTimePicker';

package/src/hooks/useCalendar.ts

@@ -0,0 +1,59 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  addMonths,
+  getDayOfWeek,
+  getFirstDayOfMonth,
+  getMonthDays,
+  today,
+} from '../utils/date';
+
+export const useCalendar = (initialDate?: Date) => {
+  const [currentMonth, setCurrentMonth] = useState(() => {
+    const date = initialDate ?? today();
+    return getFirstDayOfMonth(date);
+  });
+
+  const navigateMonth = useCallback((direction: 1 | -1) => {
+    setCurrentMonth((prev) => addMonths(prev, direction));
+  }, []);
+
+  const goToMonth = useCallback((date: Date) => {
+    setCurrentMonth(getFirstDayOfMonth(date));
+  }, []);
+
+  const goToDate = useCallback((date: Date) => {
+    setCurrentMonth(getFirstDayOfMonth(date));
+  }, []);
+
+  const daysInMonth = useMemo(() => {
+    const days: (Date | null)[] = [];
+    const firstDay = getFirstDayOfMonth(currentMonth);
+    // getDayOfWeek returns 0 for Sunday, we want Monday = 0
+    const dayOfWeek = getDayOfWeek(firstDay);
+    const paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+
+    for (let i = 0; i < paddingDays; i++) {
+      days.push(null);
+    }
+
+    const monthDays = getMonthDays(
+      currentMonth.getUTCFullYear(),
+      currentMonth.getUTCMonth(),
+    );
+    for (const day of monthDays) {
+      days.push(day);
+    }
+
+    return days;
+  }, [currentMonth]);
+
+  return {
+    currentMonth,
+    daysInMonth,
+    navigateMonth,
+    goToMonth,
+    goToDate,
+    nextMonth: () => navigateMonth(1),
+    prevMonth: () => navigateMonth(-1),
+  };
+};

package/src/hooks/useDatePicker.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+import { compareDates, today } from '../utils/date';
+
+interface UseDatePickerOptions {
+  initialDate?: Date;
+  minDate?: Date;
+  maxDate?: Date;
+  onChange?: (date: Date) => void;
+}
+
+export const useDatePicker = (options: UseDatePickerOptions = {}) => {
+  const { initialDate = today(), minDate, maxDate, onChange } = options;
+
+  const [selectedDate, setSelectedDate] = useState(initialDate);
+
+  const handleDateChange = useCallback(
+    (date: Date) => {
+      setSelectedDate(date);
+      onChange?.(date);
+    },
+    [onChange],
+  );
+
+  const isDateDisabled = useCallback(
+    (date: Date) => {
+      if (minDate && compareDates(date, minDate) < 0) return true;
+      if (maxDate && compareDates(date, maxDate) > 0) return true;
+      return false;
+    },
+    [minDate, maxDate],
+  );
+
+  return {
+    selectedDate,
+    setSelectedDate: handleDateChange,
+    isDateDisabled,
+    minDate,
+    maxDate,
+  };
+};

package/src/hooks/useTimePicker.ts

@@ -0,0 +1,152 @@
+import { useCallback, useState } from 'react';
+import type {
+  ClockMode,
+  Time12Hour,
+  TimePeriod,
+  TimeValue,
+} from '../types/timepicker';
+
+interface UseTimePickerOptions {
+  /** Initial hours (0-23) */
+  initialHours?: number;
+  /** Initial minutes (0-59) */
+  initialMinutes?: number;
+  /** Callback when time changes */
+  onChange?: (time: TimeValue) => void;
+  /** Use 24-hour format */
+  is24Hour?: boolean;
+  /** Minute interval for snapping */
+  minuteInterval?: number;
+}
+
+/**
+ * Converts 24-hour time to 12-hour format
+ */
+export const to12Hour = (hours: number): Time12Hour => {
+  const period: TimePeriod = hours >= 12 ? 'PM' : 'AM';
+  let hour = hours % 12;
+  if (hour === 0) hour = 12;
+  return { hour, period };
+};
+
+/**
+ * Converts 12-hour time to 24-hour format
+ */
+export const to24Hour = (hour: number, period: TimePeriod): number => {
+  if (period === 'AM') {
+    return hour === 12 ? 0 : hour;
+  }
+  return hour === 12 ? 12 : hour + 12;
+};
+
+/**
+ * Formats time as HH:MM string
+ */
+export const formatTime = (
+  hours: number,
+  minutes: number,
+  is24Hour = false,
+): string => {
+  if (is24Hour) {
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  }
+  const { hour, period } = to12Hour(hours);
+  return `${hour}:${minutes.toString().padStart(2, '0')} ${period}`;
+};
+
+/**
+ * Snaps minutes to the nearest interval
+ */
+export const snapToInterval = (minutes: number, interval: number): number => {
+  return Math.round(minutes / interval) * interval;
+};
+
+/**
+ * Hook for managing time picker state
+ */
+export const useTimePicker = (options: UseTimePickerOptions = {}) => {
+  const {
+    initialHours = 0,
+    initialMinutes = 0,
+    onChange,
+    is24Hour = false,
+    minuteInterval = 1,
+  } = options;
+
+  const [hours, setHoursState] = useState(initialHours);
+  const [minutes, setMinutesState] = useState(initialMinutes);
+  const [clockMode, setClockMode] = useState<ClockMode>('hours');
+
+  const setHours = useCallback(
+    (newHours: number) => {
+      const clampedHours = Math.max(0, Math.min(23, newHours));
+      setHoursState(clampedHours);
+      onChange?.({ hours: clampedHours, minutes });
+    },
+    [minutes, onChange],
+  );
+
+  const setMinutes = useCallback(
+    (newMinutes: number) => {
+      const snapped = snapToInterval(newMinutes, minuteInterval);
+      const clampedMinutes = Math.max(0, Math.min(59, snapped));
+      setMinutesState(clampedMinutes);
+      onChange?.({ hours, minutes: clampedMinutes });
+    },
+    [hours, onChange, minuteInterval],
+  );
+
+  const setTime = useCallback(
+    (time: TimeValue) => {
+      const clampedHours = Math.max(0, Math.min(23, time.hours));
+      const snapped = snapToInterval(time.minutes, minuteInterval);
+      const clampedMinutes = Math.max(0, Math.min(59, snapped));
+      setHoursState(clampedHours);
+      setMinutesState(clampedMinutes);
+      onChange?.({ hours: clampedHours, minutes: clampedMinutes });
+    },
+    [onChange, minuteInterval],
+  );
+
+  const setHours12 = useCallback(
+    (hour: number, period: TimePeriod) => {
+      const hours24 = to24Hour(hour, period);
+      setHours(hours24);
+    },
+    [setHours],
+  );
+
+  const setPeriod = useCallback(
+    (period: TimePeriod) => {
+      const { hour } = to12Hour(hours);
+      setHours(to24Hour(hour, period));
+    },
+    [hours, setHours],
+  );
+
+  const time12Hour = to12Hour(hours);
+
+  return {
+    // State
+    hours,
+    minutes,
+    clockMode,
+    // 12-hour format helpers
+    hour12: time12Hour.hour,
+    period: time12Hour.period,
+    // Setters
+    setHours,
+    setMinutes,
+    setTime,
+    setHours12,
+    setPeriod,
+    setClockMode,
+    // Formatting
+    formatted: formatTime(hours, minutes, is24Hour),
+    formatted12: formatTime(hours, minutes, false),
+    formatted24: formatTime(hours, minutes, true),
+    // Config
+    is24Hour,
+    minuteInterval,
+  };
+};

package/src/index.ts

@@ -0,0 +1,77 @@
+// Date picker components
+export { DatePicker, type KaalDatePickerProps } from './components';
+export { CalendarGrid } from './components';
+export { WheelPicker } from './components';
+
+// Time picker components
+export {
+  TimePicker,
+  TimeWheelPicker,
+  ClockFace,
+  MaterialTimePicker,
+  type TimePickerProps,
+  type TimeValue,
+} from './components';
+
+// Hooks
+export { useDatePicker, useCalendar } from './hooks';
+export {
+  useTimePicker,
+  to12Hour,
+  to24Hour,
+  formatTime,
+  snapToInterval,
+} from './hooks';
+
+// Date utilities
+export {
+  toISODateString,
+  toISODateTimeString,
+  parseISODate,
+  parseISODateTime,
+  fromISODateString,
+  fromISODateTimeString,
+  getDateRange,
+  isDateInRange,
+  getUserTimezone,
+  addDays,
+  addMonths,
+  compareDates,
+  isSameDay,
+  isSameMonth,
+  getMonthDays,
+  getFirstDayOfMonth,
+  getLastDayOfMonth,
+  getDayOfWeek,
+  formatMonth,
+  formatWeekday,
+  formatYearMonth,
+  today,
+} from './utils';
+
+// Validation schemas
+export {
+  isoDateSchema,
+  isoDateTimeSchema,
+  dateRangeSchema,
+  datePickerValueSchema,
+  dateSchema,
+  temporalDateSchema,
+} from './utils';
+
+export type { DatePickerValue, DateRange } from './utils';
+export type {
+  DatePickerMode,
+  DatePickerTheme,
+  DatePickerVariant,
+  DatePickerProps,
+} from './types';
+
+// Time picker types
+export type {
+  TimePeriod,
+  ClockMode,
+  Time12Hour,
+  MinuteInterval,
+  TimePickerTheme,
+} from './types';

package/src/types/datepicker.ts

@@ -0,0 +1,17 @@
+export type DatePickerMode = 'date' | 'time' | 'datetime';
+
+export type DatePickerTheme = 'native' | 'ios' | 'android' | 'custom';
+
+export type DatePickerVariant = 'wheel' | 'calendar' | 'compact';
+
+export interface DatePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  mode?: DatePickerMode;
+  theme?: DatePickerTheme;
+  variant?: DatePickerVariant;
+  minDate?: Date;
+  maxDate?: Date;
+  disabledDates?: Date[];
+  locale?: string;
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './datepicker';
+export * from './timepicker';

package/src/types/timepicker.ts

@@ -0,0 +1,59 @@
+/**
+ * Represents a time value in 24-hour format
+ */
+export interface TimeValue {
+  /** Hours in 24-hour format (0-23) */
+  hours: number;
+  /** Minutes (0-59) */
+  minutes: number;
+}
+
+/**
+ * Theme options for TimePicker appearance
+ */
+export type TimePickerTheme = 'native' | 'ios' | 'android';
+
+/**
+ * Minute interval options for time selection
+ */
+export type MinuteInterval = 1 | 5 | 10 | 15 | 30;
+
+/**
+ * Props for the TimePicker component
+ */
+export interface TimePickerProps {
+  /** Current time value */
+  value: TimeValue;
+  /** Callback when time changes */
+  onChange: (time: TimeValue) => void;
+  /** Visual theme - 'native' uses platform defaults */
+  theme?: TimePickerTheme;
+  /** Interval for minute selection */
+  minuteInterval?: MinuteInterval;
+  /** Use 24-hour format instead of 12-hour with AM/PM */
+  is24Hour?: boolean;
+  /** Minimum selectable time */
+  minTime?: TimeValue;
+  /** Maximum selectable time */
+  maxTime?: TimeValue;
+}
+
+/**
+ * Period indicator for 12-hour format
+ */
+export type TimePeriod = 'AM' | 'PM';
+
+/**
+ * Clock mode for Material-style picker
+ */
+export type ClockMode = 'hours' | 'minutes';
+
+/**
+ * 12-hour time representation
+ */
+export interface Time12Hour {
+  /** Hour in 12-hour format (1-12) */
+  hour: number;
+  /** AM or PM */
+  period: TimePeriod;
+}

package/src/unistyles.ts

@@ -0,0 +1,6 @@
+// Re-export theme configuration from @dreamstack-us/kaal-themes
+// This ensures the module augmentation is applied
+export { configureKaalThemes } from '@dreamstack-us/kaal-themes';
+
+// Import to ensure type augmentation is applied during build
+import '@dreamstack-us/kaal-themes';