@dreamstack-us/kaal 0.0.1 → 0.0.2

package/lib/typescript/types/timepicker.d.ts

@@ -15,6 +15,66 @@ export type TimePickerTheme = 'native' | 'ios' | 'android';
  * Minute interval options for time selection
  */
 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 {
+    /** 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;
+    /** 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;
+    /** 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;
+    /** 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;
+    /** Container background color */
+    containerBackground?: string;
+    /** Header text color */
+    headerColor?: string;
+    /** Action button text color */
+    actionButtonColor?: string;
+    /** 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
  */
@@ -33,6 +93,8 @@ export interface TimePickerProps {
     minTime?: TimeValue;
     /** Maximum selectable time */
     maxTime?: TimeValue;
+    /** Custom theme overrides for styling without matching Kaal's theme structure */
+    themeOverrides?: TimePickerThemeOverrides;
 }
 /**
  * Period indicator for 12-hour format

package/lib/typescript/types/timepicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.d.ts","sourceRoot":"","sources":["../../../src/types/timepicker.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,iCAAiC;IACjC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,qDAAqD;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,oCAAoC;IACpC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,eAAe;IACf,MAAM,EAAE,UAAU,CAAC;CACpB"}
+{"version":3,"file":"timepicker.d.ts","sourceRoot":"","sources":["../../../src/types/timepicker.ts"],"names":[],"mappings":"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"}

package/lib/typescript/utils/validation.d.ts

@@ -1,40 +1,60 @@
-import * as v from 'valibot';
 /**
- * Validates an ISO 8601 date string (YYYY-MM-DD)
+ * Simple validation utilities for date/time pickers
+ * No external dependencies - just inline checks
  */
-export declare const isoDateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
 /**
- * Validates an ISO 8601 datetime string with timezone offset
+ * Validates an ISO 8601 date string (YYYY-MM-DD)
  */
-export declare const isoDateTimeSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.IsoTimestampAction<string, undefined>]>;
+export declare function isValidISODate(value: string): boolean;
 /**
- * Validates a date range where start <= end
+ * Validates an ISO 8601 datetime string
  */
-export declare const dateRangeSchema: v.SchemaWithPipe<readonly [v.ObjectSchema<{
-    readonly start: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
-    readonly end: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
-}, undefined>, v.CheckAction<{
-    start: string;
-    end: string;
-}, "Start date must be before or equal to end date">]>;
+export declare function isValidISODateTime(value: string): boolean;
 /**
- * Validates date picker configuration
+ * Validates a time value (24-hour format)
  */
-export declare const datePickerValueSchema: v.ObjectSchema<{
-    readonly selectedDate: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>;
-    readonly minDate: v.OptionalSchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>;
-    readonly maxDate: v.OptionalSchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>;
-    readonly disabledDates: v.OptionalSchema<v.ArraySchema<v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.CheckAction<string, "Invalid ISO 8601 date format">]>, undefined>, undefined>;
-}, undefined>;
+export declare function isValidTime(hours: number, minutes: number): boolean;
 /**
- * Parses an ISO date string to a Date object
- * @deprecated Use parseISODate from date utils instead. Kept for backward compatibility.
+ * Validates a date range where start <= end
  */
-export declare const dateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.TransformAction<string, Date>]>;
+export declare function isValidDateRange(start: string, end: string): boolean;
 /**
- * @deprecated Alias for dateSchema for backward compatibility
+ * Parses an ISO date string to a Date object
+ * Returns null if invalid
  */
-export declare const temporalDateSchema: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.RegexAction<string, "Must be in YYYY-MM-DD format">, v.TransformAction<string, Date>]>;
-export type DatePickerValue = v.InferOutput<typeof datePickerValueSchema>;
-export type DateRange = v.InferOutput<typeof dateRangeSchema>;
+export declare function parseISODateSafe(value: string): Date | null;
+export interface DatePickerValue {
+    selectedDate: string;
+    minDate?: string;
+    maxDate?: string;
+    disabledDates?: string[];
+}
+export interface DateRange {
+    start: string;
+    end: string;
+}
+/** @deprecated Use isValidISODate() instead */
+export declare const isoDateSchema: {
+    parse: (value: string) => string;
+};
+/** @deprecated Use isValidISODateTime() instead */
+export declare const isoDateTimeSchema: {
+    parse: (value: string) => string;
+};
+/** @deprecated Use isValidDateRange() instead */
+export declare const dateRangeSchema: {
+    parse: (value: DateRange) => DateRange;
+};
+/** @deprecated Use DatePickerValue type instead */
+export declare const datePickerValueSchema: {
+    parse: (value: DatePickerValue) => DatePickerValue;
+};
+/** @deprecated Use parseISODateSafe() instead */
+export declare const dateSchema: {
+    parse: (value: string) => Date;
+};
+/** @deprecated Alias for dateSchema */
+export declare const temporalDateSchema: {
+    parse: (value: string) => Date;
+};
 //# sourceMappingURL=validation.d.ts.map

package/lib/typescript/utils/validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/utils/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,CAAC,MAAM,SAAS,CAAC;AAW7B;;GAEG;AACH,eAAO,MAAM,aAAa,sKAYzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iGAAuC,CAAC;AAEtE;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;sDAQ3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;aAKhC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU,gJAOtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,gJAAa,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,WAAW,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/utils/validation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAerD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAIzD;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CASnE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAGpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAQ3D;AAGD,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAKD,+CAA+C;AAC/C,eAAO,MAAM,aAAa;mBACT,MAAM;CAItB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,iBAAiB;mBACb,MAAM;CAItB,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,eAAe;mBACX,SAAS;CAKzB,CAAC;AAEF,mDAAmD;AACnD,eAAO,MAAM,qBAAqB;mBACjB,eAAe;CAC/B,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,UAAU;mBACN,MAAM;CAKtB,CAAC;AAEF,uCAAuC;AACvC,eAAO,MAAM,kBAAkB;mBARd,MAAM;CAQqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamstack-us/kaal",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "High-performance React Native DatePicker with Unistyles v3",
   "type": "module",
   "main": "./lib/module/index.js",
@@ -29,9 +29,7 @@
     "clean": "rm -rf lib",
     "size": "size-limit"
   },
-  "dependencies": {
-    "valibot": "^1.0.0"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.78.0",
@@ -39,15 +37,18 @@
     "react-native-nitro-modules": "0.31.4",
     "react-native-reanimated": ">=3.17.0",
     "react-native-gesture-handler": ">=2.20.0",
-    "react-native-svg": ">=13.0.0"
+    "react-native-svg": ">=13.0.0",
+    "@dreamstack-us/kaal-themes": ">=1.0.0"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
       "optional": true
+    },
+    "@dreamstack-us/kaal-themes": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@dreamstack-us/kaal-themes": "workspace:*",
     "@types/react": "^18.3.0",
     "react": "18.3.1",
     "react-native": "0.78.0",
@@ -57,8 +58,7 @@
     "react-native-reanimated": "^3.17.0",
     "react-native-svg": "^15.15.1",
     "react-native-unistyles": "^3.0.0",
-    "typescript": "^5.7.0",
-    "typescript-config": "workspace:*"
+    "typescript": "^5.7.0"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/CalendarGrid/CalendarGrid.styles.ts

@@ -1,44 +1,48 @@
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native';
 
-export const styles = StyleSheet.create((theme) => ({
+/**
+ * Default styles for CalendarGrid 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,
-    padding: theme.spacing(4),
+    backgroundColor: '#1E1E1E',
+    borderRadius: 16,
+    padding: 16,
   },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: theme.spacing(4),
-    paddingHorizontal: theme.spacing(2),
+    marginBottom: 16,
+    paddingHorizontal: 8,
   },
   navButton: {
     width: 40,
     height: 40,
     justifyContent: 'center',
     alignItems: 'center',
-    borderRadius: theme.radii.button,
+    borderRadius: 8,
   },
   navText: {
     fontSize: 24,
-    color: theme.colors.primary.default,
+    color: '#4DA6FF',
     fontWeight: '600',
   },
   monthTitle: {
-    fontSize: theme.typography.monthHeader.fontSize,
-    fontWeight: theme.typography.monthHeader.fontWeight,
-    color: theme.colors.foreground.default,
+    fontSize: 17,
+    fontWeight: '600',
+    color: '#FFFFFF',
   },
   weekDays: {
     flexDirection: 'row',
-    marginBottom: theme.spacing(2),
+    marginBottom: 8,
   },
   weekDayText: {
     flex: 1,
     textAlign: 'center',
-    fontSize: theme.typography.dayHeader.fontSize,
-    fontWeight: theme.typography.dayHeader.fontWeight,
-    color: theme.colors.foreground.muted,
+    fontSize: 13,
+    fontWeight: '500',
+    color: '#8E8E93',
   },
-}));
+});

package/src/components/CalendarGrid/CalendarGrid.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { FlatList, Pressable, Text, View } from 'react-native';
+import { useDatePickerOverrides } from '../../context/ThemeOverrideContext';
 import {
   addMonths,
   compareDates,
@@ -20,16 +21,60 @@ interface CalendarGridProps {
   maxDate?: Date;
   disabledDates?: Date[];
   themeMode: 'ios' | 'android' | 'custom';
+  /**
+   * 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;
 }
 
 const CELL_SIZE = 44;
-const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-const generateMonthDays = (currentMonth: Date): (Date | null)[] => {
+// Week day labels starting from Sunday
+const WEEK_DAYS_SUNDAY_START = [
+  'Sun',
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+];
+const WEEK_DAYS_MONDAY_START = [
+  'Mon',
+  'Tue',
+  'Wed',
+  'Thu',
+  'Fri',
+  'Sat',
+  'Sun',
+];
+
+/**
+ * Generate padding days for the month grid based on week start day
+ * TODO: This logic should be refactored when adding locale support
+ */
+const generateMonthDays = (
+  currentMonth: Date,
+  weekStartsOn: 0 | 1,
+): (Date | null)[] => {
   const firstDay = getFirstDayOfMonth(currentMonth);
-  // getDayOfWeek returns 0 for Sunday, we want Monday = 0
-  const startOfWeek = getDayOfWeek(firstDay);
-  const paddingDays = startOfWeek === 0 ? 6 : startOfWeek - 1;
+  // getDayOfWeek returns 0 for Sunday, 1 for Monday, etc.
+  const dayOfWeek = getDayOfWeek(firstDay);
+
+  // Calculate padding days based on week start
+  let paddingDays: number;
+  if (weekStartsOn === 0) {
+    // Sunday start: Sunday = 0 padding, Monday = 1, etc.
+    paddingDays = dayOfWeek;
+  } else {
+    // Monday start: Monday = 0 padding, Sunday = 6 padding
+    paddingDays = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+  }
 
   const days: (Date | null)[] = [];
 
@@ -56,12 +101,27 @@ const generateMonthDays = (currentMonth: Date): (Date | null)[] => {
 };
 
 export const CalendarGrid: React.FC<CalendarGridProps> = memo(
-  ({ value, onChange, minDate, maxDate, disabledDates, themeMode }) => {
+  ({
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    disabledDates,
+    themeMode,
+    weekStartsOn = 0,
+  }) => {
+    const overrides = useDatePickerOverrides();
     const [currentMonth, setCurrentMonth] = React.useState(() =>
       getFirstDayOfMonth(value),
     );
 
-    const days = useMemo(() => generateMonthDays(currentMonth), [currentMonth]);
+    const days = useMemo(
+      () => generateMonthDays(currentMonth, weekStartsOn),
+      [currentMonth, weekStartsOn],
+    );
+
+    const weekDays =
+      weekStartsOn === 0 ? WEEK_DAYS_SUNDAY_START : WEEK_DAYS_MONDAY_START;
 
     const todayDate = useMemo(() => today(), []);
 
@@ -111,20 +171,46 @@ export const CalendarGrid: React.FC<CalendarGridProps> = memo(
       [],
     );
 
+    // Build override styles from themeOverrides
+    const containerStyle = useMemo(
+      () => ({
+        backgroundColor: overrides?.backgroundColor ?? '#1E1E1E',
+        borderRadius: overrides?.borderRadius ?? 16,
+        padding: overrides?.padding ?? 16,
+      }),
+      [overrides],
+    );
+
+    const navTextStyle = useMemo(
+      () => ({
+        color: overrides?.primaryColor ?? '#4DA6FF',
+      }),
+      [overrides],
+    );
+
+    const monthTitleStyle = useMemo(
+      () => ({
+        color: overrides?.textColor ?? '#FFFFFF',
+      }),
+      [overrides],
+    );
+
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, containerStyle]}>
         <View style={styles.header}>
           <Pressable onPress={() => navigateMonth(-1)} style={styles.navButton}>
-            <Text style={styles.navText}>‹</Text>
+            <Text style={[styles.navText, navTextStyle]}>‹</Text>
           </Pressable>
-          <Text style={styles.monthTitle}>{formatYearMonth(currentMonth)}</Text>
+          <Text style={[styles.monthTitle, monthTitleStyle]}>
+            {formatYearMonth(currentMonth)}
+          </Text>
           <Pressable onPress={() => navigateMonth(1)} style={styles.navButton}>
-            <Text style={styles.navText}>›</Text>
+            <Text style={[styles.navText, navTextStyle]}>›</Text>
           </Pressable>
         </View>
 
         <View style={styles.weekDays}>
-          {WEEK_DAYS.map((day) => (
+          {weekDays.map((day) => (
             <Text key={day} style={styles.weekDayText}>
               {day}
             </Text>