@dreamstack-us/kaal 0.0.1 → 0.0.2

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

@@ -1,12 +1,7 @@
+/// <reference lib="dom" />
 import type React from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } 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;
@@ -59,57 +54,162 @@ 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],
+  label?: string;
+}> = ({ items, selectedIndex, onSelect, label = 'Select value' }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const isScrolling = useRef(false);
+  const scrollTimeout = useRef<ReturnType<typeof setTimeout>>();
+
+  // Scroll to selected item on mount and when selection changes externally
+  useEffect(() => {
+    if (scrollRef.current && !isScrolling.current) {
+      scrollRef.current.scrollTop = selectedIndex * ITEM_HEIGHT;
+    }
+  }, [selectedIndex]);
+
+  const handleScroll = useCallback(() => {
+    if (!scrollRef.current) return;
+
+    isScrolling.current = true;
+
+    // Clear existing timeout
+    if (scrollTimeout.current) {
+      clearTimeout(scrollTimeout.current);
+    }
+
+    // Debounce scroll end detection
+    scrollTimeout.current = setTimeout(() => {
+      if (!scrollRef.current) return;
+
+      const scrollTop = scrollRef.current.scrollTop;
+      const newIndex = Math.round(scrollTop / ITEM_HEIGHT);
+      const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));
+
+      // Snap to nearest item
+      scrollRef.current.scrollTop = clampedIndex * ITEM_HEIGHT;
+
+      if (clampedIndex !== selectedIndex) {
+        onSelect(clampedIndex);
+      }
+
+      isScrolling.current = false;
+    }, 100);
+  }, [items.length, selectedIndex, onSelect]);
+
+  // Keyboard navigation for spinbutton behavior (like native input[type="time"])
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      let newIndex = selectedIndex;
+
+      switch (e.key) {
+        case 'ArrowUp':
+          e.preventDefault();
+          newIndex = Math.max(0, selectedIndex - 1);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          newIndex = Math.min(items.length - 1, selectedIndex + 1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          newIndex = 0;
+          break;
+        case 'End':
+          e.preventDefault();
+          newIndex = items.length - 1;
+          break;
+        case 'PageUp':
+          e.preventDefault();
+          newIndex = Math.max(0, selectedIndex - 5);
+          break;
+        case 'PageDown':
+          e.preventDefault();
+          newIndex = Math.min(items.length - 1, selectedIndex + 5);
+          break;
+        default:
+          return;
+      }
+
+      if (newIndex !== selectedIndex) {
+        if (scrollRef.current) {
+          scrollRef.current.scrollTop = newIndex * ITEM_HEIGHT;
+        }
+        onSelect(newIndex);
+      }
+    },
+    [selectedIndex, items.length, onSelect],
   );
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateY.value }],
-  }));
+  const currentItem = items[selectedIndex];
 
   return (
     <View style={webStyles.column}>
       <View style={webStyles.selectionHighlight} />
 
-      <GestureDetector gesture={panGesture}>
-        <Animated.View style={[webStyles.itemsContainer, animatedStyle]}>
-          <View style={{ height: ITEM_HEIGHT * 2 }} />
+      {/* Spinbutton container - mimics input[type="time"] accessibility */}
+      <div
+        ref={scrollRef}
+        role="spinbutton"
+        tabIndex={0}
+        aria-label={label}
+        aria-valuenow={currentItem?.value}
+        aria-valuemin={items[0]?.value}
+        aria-valuemax={items[items.length - 1]?.value}
+        aria-valuetext={currentItem?.label}
+        onScroll={handleScroll}
+        onKeyDown={handleKeyDown}
+        onClick={(e) => {
+          const target = e.target as HTMLElement;
+          const item = target.closest('[data-index]') as HTMLElement | null;
+          if (item && scrollRef.current) {
+            const index = Number(item.dataset.index);
+            scrollRef.current.scrollTop = index * ITEM_HEIGHT;
+            onSelect(index);
+          }
+        }}
+        style={{
+          height: CONTAINER_HEIGHT,
+          overflowY: 'auto',
+          scrollSnapType: 'y mandatory',
+          scrollBehavior: 'smooth',
+          position: 'relative',
+          zIndex: 1,
+          outline: 'none',
+          // Hide scrollbar
+          scrollbarWidth: 'none',
+          msOverflowStyle: 'none',
+        }}
+      >
+        {/* @ts-ignore - webkit scrollbar hiding */}
+        <style>{`
+          div::-webkit-scrollbar {
+            display: none;
+          }
+        `}</style>
+
+        {/* Top padding */}
+        <div style={{ height: ITEM_HEIGHT * 2, flexShrink: 0 }} />
 
-          {items.map((item) => (
-            <View key={item.value} style={webStyles.item}>
-              <Text style={webStyles.itemText}>{item.label}</Text>
-            </View>
-          ))}
+        {items.map((item, index) => (
+          <div
+            key={item.value}
+            data-index={index}
+            style={{
+              height: ITEM_HEIGHT,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              scrollSnapAlign: 'center',
+              cursor: 'pointer',
+            }}
+          >
+            <Text style={webStyles.itemText}>{item.label}</Text>
+          </div>
+        ))}
 
-          <View style={{ height: ITEM_HEIGHT * 2 }} />
-        </Animated.View>
-      </GestureDetector>
+        {/* Bottom padding */}
+        <div style={{ height: ITEM_HEIGHT * 2, flexShrink: 0 }} />
+      </div>
     </View>
   );
 };
@@ -179,11 +279,13 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
         items={months}
         selectedIndex={value.getUTCMonth()}
         onSelect={handleMonthChange}
+        label="Month"
       />
       <WheelColumn
         items={days}
         selectedIndex={value.getUTCDate() - 1}
         onSelect={handleDayChange}
+        label="Day"
       />
       <WheelColumn
         items={years}
@@ -191,6 +293,7 @@ export const WheelPicker: React.FC<WheelPickerProps> = ({
           (y) => y.value === value.getUTCFullYear(),
         )}
         onSelect={handleYearChange}
+        label="Year"
       />
     </View>
   );
@@ -210,6 +313,7 @@ const webStyles = RNStyleSheet.create({
     flex: 1,
     height: CONTAINER_HEIGHT,
     overflow: 'hidden',
+    position: 'relative',
   },
   selectionHighlight: {
     position: 'absolute',
@@ -221,14 +325,6 @@ const webStyles = RNStyleSheet.create({
     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',

package/src/context/ThemeOverrideContext.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext } from 'react';
+import type { DatePickerThemeOverrides } from '../types/datepicker';
+import type { TimePickerThemeOverrides } from '../types/timepicker';
+
+/**
+ * Combined theme overrides context value
+ */
+export interface ThemeOverrideContextValue {
+  datePicker?: DatePickerThemeOverrides;
+  timePicker?: TimePickerThemeOverrides;
+}
+
+const ThemeOverrideContext = createContext<ThemeOverrideContextValue>({});
+
+export const ThemeOverrideProvider = ThemeOverrideContext.Provider;
+
+/**
+ * Hook to access DatePicker theme overrides
+ */
+export function useDatePickerOverrides(): DatePickerThemeOverrides | undefined {
+  const context = useContext(ThemeOverrideContext);
+  return context.datePicker;
+}
+
+/**
+ * Hook to access TimePicker theme overrides
+ */
+export function useTimePickerOverrides(): TimePickerThemeOverrides | undefined {
+  const context = useContext(ThemeOverrideContext);
+  return context.timePicker;
+}
+
+/**
+ * Hook to access all theme overrides
+ */
+export function useThemeOverrides(): ThemeOverrideContextValue {
+  return useContext(ThemeOverrideContext);
+}

package/src/index.ts

@@ -65,6 +65,7 @@ export type {
   DatePickerTheme,
   DatePickerVariant,
   DatePickerProps,
+  DatePickerThemeOverrides,
 } from './types';
 
 // Time picker types
@@ -74,4 +75,14 @@ export type {
   Time12Hour,
   MinuteInterval,
   TimePickerTheme,
+  TimePickerThemeOverrides,
 } from './types';
+
+// Theme override context (for advanced usage)
+export {
+  ThemeOverrideProvider,
+  useDatePickerOverrides,
+  useTimePickerOverrides,
+  useThemeOverrides,
+} from './context/ThemeOverrideContext';
+export type { ThemeOverrideContextValue } from './context/ThemeOverrideContext';

package/src/types/datepicker.ts

@@ -4,6 +4,39 @@ export type DatePickerTheme = 'native' | 'ios' | 'android' | 'custom';
 
 export type DatePickerVariant = 'wheel' | 'calendar' | 'compact';
 
+/**
+ * Theme overrides for DatePicker components.
+ * These allow customizing colors without matching Kaal's internal theme structure.
+ */
+export interface DatePickerThemeOverrides {
+  // Calendar cell colors
+  /** Background color of selected date cell */
+  cellSelectedColor?: string;
+  /** Background color of today's date cell */
+  cellTodayColor?: string;
+  /** Default text color for dates */
+  textColor?: string;
+  /** Text color for selected date */
+  textSelectedColor?: string;
+  /** Text color for disabled dates */
+  textDisabledColor?: string;
+  /** Text color for weekend dates */
+  textWeekendColor?: string;
+  /** Primary accent color (navigation arrows, today border) */
+  primaryColor?: string;
+  /** Header background color */
+  headerBackground?: string;
+  /** Container background color */
+  backgroundColor?: string;
+  // Layout
+  /** Border radius for calendar container */
+  borderRadius?: number;
+  /** Border radius for date cells */
+  cellBorderRadius?: number;
+  /** Padding for calendar container */
+  padding?: number;
+}
+
 export interface DatePickerProps {
   value: Date;
   onChange: (date: Date) => void;
@@ -14,4 +47,15 @@ export interface DatePickerProps {
   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;
 }

package/src/types/timepicker.ts

@@ -18,6 +18,78 @@ export type TimePickerTheme = 'native' | 'ios' | 'android';
  */
 export type MinuteInterval = 1 | 5 | 10 | 15 | 30;
 
+/**
+ * Theme overrides for TimePicker components.
+ * These allow customizing colors without matching Kaal's internal theme structure.
+ */
+export interface TimePickerThemeOverrides {
+  // Clock face (Material style)
+  /** Background color of the clock face */
+  clockBackground?: string;
+  /** Color of the clock hand */
+  clockHandColor?: string;
+  /** Color of clock numbers */
+  clockTextColor?: string;
+  /** Color of selected clock number */
+  clockTextSelectedColor?: string;
+  /** Color of the center dot */
+  clockCenterColor?: string;
+  /** Color of the selection dot on clock edge */
+  clockSelectionColor?: string;
+
+  // Period toggle (AM/PM)
+  /** Background color of period buttons */
+  periodBackground?: string;
+  /** Background color of active period button */
+  periodActiveBackground?: string;
+  /** Border color of period buttons */
+  periodBorderColor?: string;
+  /** Text color of period buttons */
+  periodTextColor?: string;
+  /** Text color of active period button */
+  periodTextActiveColor?: string;
+
+  // Time field (header display)
+  /** Background color of time fields */
+  timeFieldBackground?: string;
+  /** Background color of active time field */
+  timeFieldActiveBackground?: string;
+  /** Text color of time fields */
+  textColor?: string;
+  /** Text color of active time field */
+  textActiveColor?: string;
+  /** Color of the colon separator */
+  separatorColor?: string;
+
+  // Wheel picker (iOS style)
+  /** Background color of wheel picker */
+  wheelContainerBackground?: string;
+  /** Color of wheel selection highlight */
+  wheelSelectionHighlight?: string;
+  /** Color of wheel separator */
+  wheelSeparatorColor?: string;
+  /** Text color in wheel */
+  wheelTextColor?: string;
+  /** Text color of selected wheel item */
+  wheelTextSelectedColor?: string;
+
+  // Material container
+  /** Container background color */
+  containerBackground?: string;
+  /** Header text color */
+  headerColor?: string;
+  /** Action button text color */
+  actionButtonColor?: string;
+
+  // General
+  /** Primary accent color */
+  primaryColor?: string;
+  /** Border radius for container */
+  borderRadius?: number;
+  /** Generic background color (fallback for all container backgrounds) */
+  backgroundColor?: string;
+}
+
 /**
  * Props for the TimePicker component
  */
@@ -36,6 +108,8 @@ export interface TimePickerProps {
   minTime?: TimeValue;
   /** Maximum selectable time */
   maxTime?: TimeValue;
+  /** Custom theme overrides for styling without matching Kaal's theme structure */
+  themeOverrides?: TimePickerThemeOverrides;
 }
 
 /**

package/src/utils/validation.ts

@@ -1,76 +1,132 @@
-import * as v from 'valibot';
-
 /**
- * Helper to parse ISO date string parts
- * Assumes input is already validated by regex pattern
+ * Simple validation utilities for date/time pickers
+ * No external dependencies - just inline checks
  */
-const parseISOParts = (val: string): [number, number, number] => {
-  const parts = val.split('-').map(Number) as [number, number, number];
-  return parts;
-};
+
+// ISO date regex pattern
+const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const ISO_DATETIME_PATTERN =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?(Z|[+-]\d{2}:\d{2})?$/;
 
 /**
  * Validates an ISO 8601 date string (YYYY-MM-DD)
  */
-export const isoDateSchema = v.pipe(
-  v.string(),
-  v.regex(/^\d{4}-\d{2}-\d{2}$/, 'Must be in YYYY-MM-DD format'),
-  v.check((val) => {
-    const [year, month, day] = parseISOParts(val);
-    const date = new Date(Date.UTC(year, month - 1, day));
-    return (
-      date.getUTCFullYear() === year &&
-      date.getUTCMonth() === month - 1 &&
-      date.getUTCDate() === day
-    );
-  }, 'Invalid ISO 8601 date format'),
-);
+export function isValidISODate(value: string): boolean {
+  if (!ISO_DATE_PATTERN.test(value)) return false;
+
+  const [year, month, day] = value.split('-').map(Number) as [
+    number,
+    number,
+    number,
+  ];
+  const date = new Date(Date.UTC(year, month - 1, day));
+
+  return (
+    date.getUTCFullYear() === year &&
+    date.getUTCMonth() === month - 1 &&
+    date.getUTCDate() === day
+  );
+}
 
 /**
- * Validates an ISO 8601 datetime string with timezone offset
+ * Validates an ISO 8601 datetime string
  */
-export const isoDateTimeSchema = v.pipe(v.string(), v.isoTimestamp());
+export function isValidISODateTime(value: string): boolean {
+  if (!ISO_DATETIME_PATTERN.test(value)) return false;
+  const date = new Date(value);
+  return !Number.isNaN(date.getTime());
+}
 
 /**
- * Validates a date range where start <= end
+ * Validates a time value (24-hour format)
  */
-export const dateRangeSchema = v.pipe(
-  v.object({
-    start: isoDateSchema,
-    end: isoDateSchema,
-  }),
-  v.check((data) => {
-    return data.start <= data.end;
-  }, 'Start date must be before or equal to end date'),
-);
+export function isValidTime(hours: number, minutes: number): boolean {
+  return (
+    Number.isInteger(hours) &&
+    Number.isInteger(minutes) &&
+    hours >= 0 &&
+    hours <= 23 &&
+    minutes >= 0 &&
+    minutes <= 59
+  );
+}
 
 /**
- * Validates date picker configuration
+ * Validates a date range where start <= end
  */
-export const datePickerValueSchema = v.object({
-  selectedDate: isoDateSchema,
-  minDate: v.optional(isoDateSchema),
-  maxDate: v.optional(isoDateSchema),
-  disabledDates: v.optional(v.array(isoDateSchema)),
-});
+export function isValidDateRange(start: string, end: string): boolean {
+  if (!isValidISODate(start) || !isValidISODate(end)) return false;
+  return start <= end;
+}
 
 /**
  * Parses an ISO date string to a Date object
- * @deprecated Use parseISODate from date utils instead. Kept for backward compatibility.
+ * Returns null if invalid
  */
-export const dateSchema = v.pipe(
-  v.string(),
-  v.regex(/^\d{4}-\d{2}-\d{2}$/, 'Must be in YYYY-MM-DD format'),
-  v.transform((val) => {
-    const [year, month, day] = parseISOParts(val);
-    return new Date(Date.UTC(year, month - 1, day));
-  }),
-);
+export function parseISODateSafe(value: string): Date | null {
+  if (!isValidISODate(value)) return null;
+  const [year, month, day] = value.split('-').map(Number) as [
+    number,
+    number,
+    number,
+  ];
+  return new Date(Date.UTC(year, month - 1, day));
+}
 
-/**
- * @deprecated Alias for dateSchema for backward compatibility
- */
-export const temporalDateSchema = dateSchema;
+// Types for date picker values
+export interface DatePickerValue {
+  selectedDate: string;
+  minDate?: string;
+  maxDate?: string;
+  disabledDates?: string[];
+}
+
+export interface DateRange {
+  start: string;
+  end: string;
+}
+
+// Legacy schema exports for backward compatibility
+// These are now simple validation functions, not valibot schemas
 
-export type DatePickerValue = v.InferOutput<typeof datePickerValueSchema>;
-export type DateRange = v.InferOutput<typeof dateRangeSchema>;
+/** @deprecated Use isValidISODate() instead */
+export const isoDateSchema = {
+  parse: (value: string) => {
+    if (!isValidISODate(value)) throw new Error('Invalid ISO date');
+    return value;
+  },
+};
+
+/** @deprecated Use isValidISODateTime() instead */
+export const isoDateTimeSchema = {
+  parse: (value: string) => {
+    if (!isValidISODateTime(value)) throw new Error('Invalid ISO datetime');
+    return value;
+  },
+};
+
+/** @deprecated Use isValidDateRange() instead */
+export const dateRangeSchema = {
+  parse: (value: DateRange) => {
+    if (!isValidDateRange(value.start, value.end))
+      throw new Error('Invalid date range');
+    return value;
+  },
+};
+
+/** @deprecated Use DatePickerValue type instead */
+export const datePickerValueSchema = {
+  parse: (value: DatePickerValue) => value,
+};
+
+/** @deprecated Use parseISODateSafe() instead */
+export const dateSchema = {
+  parse: (value: string) => {
+    const date = parseISODateSafe(value);
+    if (!date) throw new Error('Invalid date');
+    return date;
+  },
+};
+
+/** @deprecated Alias for dateSchema */
+export const temporalDateSchema = dateSchema;

package/lib/module/unistyles.js

@@ -1,9 +0,0 @@
-"use strict";
-
-// 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';
-//# sourceMappingURL=unistyles.js.map

package/lib/module/unistyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["configureKaalThemes"],"sourceRoot":"../../src","sources":["unistyles.ts"],"mappings":";;AAAA;AACA;AACA,SAASA,mBAAmB,QAAQ,4BAA4B;;AAEhE;AACA,OAAO,4BAA4B","ignoreList":[]}

package/lib/typescript/unistyles.d.ts

@@ -1,3 +0,0 @@
-export { configureKaalThemes } from '@dreamstack-us/kaal-themes';
-import '@dreamstack-us/kaal-themes';
-//# sourceMappingURL=unistyles.d.ts.map

package/lib/typescript/unistyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../../src/unistyles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAGjE,OAAO,4BAA4B,CAAC"}