rn-grid-date-time-picker 1.0.0 → 1.2.0

package/src/core/numerals.ts

@@ -0,0 +1,35 @@
+/**
+ * Which digits the picker shows: 0–9, Arabic-Indic (١٢٣) in any language, or
+ * the locale's own (١٢٣ for 'ar-SA', ۱۲۳ for 'fa-IR', 123 for 'en-US').
+ */
+export type Numerals = 'latin' | 'arabic' | 'locale';
+
+export const latinDigits = (text: string): string => text;
+
+/** Swaps 0–9 in a text for Arabic-Indic digits (٠–٩). */
+export const arabicDigits = (text: string): string =>
+  text.replace(/[0-9]/g, (d) => String.fromCharCode(0x0660 + Number(d)));
+
+const cache = new Map<string, (text: string) => string>();
+
+/**
+ * Swaps 0–9 in a text for the locale's own digits, as `Intl` writes them
+ * ('ar-SA' → ٠–٩, 'fa' → ۰–۹). Latin when the locale uses 0–9 or `Intl` can't
+ * tell.
+ */
+export const localeDigits = (locale: string): ((text: string) => string) => {
+  const hit = cache.get(locale);
+  if (hit) return hit;
+  let swap = latinDigits;
+  try {
+    const f = new Intl.NumberFormat(locale, { useGrouping: false });
+    const digits = Array.from({ length: 10 }, (_, i) => f.format(i));
+    if (digits[0] !== '0' && digits.every((d) => [...d].length === 1)) {
+      swap = (text) => text.replace(/[0-9]/g, (d) => digits[Number(d)]!);
+    }
+  } catch {
+    // An engine without this locale keeps 0–9.
+  }
+  cache.set(locale, swap);
+  return swap;
+};

package/src/core/segmentEditor.ts

@@ -87,6 +87,9 @@ const nextKey = (
 };
 
 /** Pads the segment being left, then focuses `to`. */
+/** Characters that end a segment when typed or pasted between numbers. */
+const SEPARATOR = /^[/\-.:\s]$/;
+
 const moveFocus = (
   state: SegmentEditorState,
   to: SegmentKey | null
@@ -136,6 +139,16 @@ export const segmentEditorReducer = (
       const key = state.focused;
       const spec = key ? specOf(state, key) : undefined;
       if (!key || !spec || spec.key === 'period') return state;
+      // A separator typed or pasted after some digits ('1/12/2025') ends the
+      // segment, as moving on would: 1 becomes 01 and the next segment starts.
+      if (SEPARATOR.test(action.digit)) {
+        if (!state.values[key]) return state;
+        const following = nextKey(state, key, 1);
+        return withParsed(
+          moveFocus(state, following === 'period' ? null : following),
+          opts
+        );
+      }
       const { next, advance } = inputDigit(
         state.values[key] ?? '',
         action.digit,

package/src/core/segments.ts

@@ -153,14 +153,6 @@ export const inputDigit = (
   return { next, advance: cannotGrow };
 };
 
-/** 'a' / 'A' → AM, 'p' / 'P' → PM, anything else → null. */
-export const inputPeriod = (char: string): Period | null => {
-  const c = char.toLowerCase();
-  if (c === 'a') return 'AM';
-  if (c === 'p') return 'PM';
-  return null;
-};
-
 /** Pads a one-digit entry when leaving the segment ("7" → "07"); the year is never padded. */
 export const padSegment = (text: string, spec: SegmentSpec): string => {
   if (

package/src/core/selectionRules.ts

@@ -7,7 +7,8 @@ import type { CalendarDate } from './types';
  * - range: once a start is picked and the end is being chosen, days closer than
  *   `minDays` or further than `maxDays` are greyed (lengths count calendar
  *   days with both ends included, so a same-day range is 1 day); in the From/To layout, days
- *   before the start are greyed too (in the single field a tap there restarts);
+ *   before the start are greyed too once the To field is tapped (otherwise a tap
+ *   there moves the start);
  * - multiple: once `maxSelections` is reached, only selected days can be tapped.
  * Validation on Confirm (validateDraft) still checks the same rules.
  */
@@ -16,7 +17,7 @@ export interface SelectionRules {
   rangeStart?: CalendarDate | null;
   minDays?: number;
   maxDays?: number;
-  /** From/To layout editing the end: days before the start can't be the end. */
+  /** From/To layout, the To field tapped: days before the start can't be the end. */
   blockBeforeStart?: boolean;
   /** Multiple mode with the cap reached. */
   maxReached?: boolean;

package/src/core/timeEntry.ts

@@ -1,8 +1,7 @@
+import { toLatinDigits } from './digits';
 import type { TimeBounds } from './constraints';
 import {
   from12Hour,
-  inputDigit,
-  padSegment,
   to12Hour,
   type Period,
   type SegmentSpec,
@@ -23,19 +22,6 @@ export interface TimeEntryValues {
   period?: Period;
 }
 
-export interface TimeEntryState {
-  values: TimeEntryValues;
-  focused: TimeKey | null;
-}
-
-export type TimeEntryAction =
-  | { type: 'focus'; key: TimeKey }
-  | { type: 'digit'; digit: string }
-  | { type: 'backspace' }
-  | { type: 'period'; period: Period }
-  | { type: 'blur' }
-  | { type: 'reset'; time: Time | null };
-
 export type TimeEntryIssue =
   'INCOMPLETE' | 'INVALID' | 'OFF_STEP' | 'BEFORE_MIN' | 'AFTER_MAX';
 
@@ -73,85 +59,6 @@ export const formatTimeEntry = (
   return { hour: pad2(hour12), minute: pad2(time.minute), period };
 };
 
-export const createTimeEntry = (
-  time: Time | null,
-  timeFormat: TimeFormat
-): TimeEntryState => {
-  return { values: formatTimeEntry(time, timeFormat), focused: null };
-};
-
-const leave = (
-  state: TimeEntryState,
-  to: TimeKey | null,
-  timeFormat: TimeFormat
-): TimeEntryState => {
-  const from = state.focused;
-  if (!from) return { ...state, focused: to };
-  const text = state.values[from] ?? '';
-  return {
-    values: {
-      ...state.values,
-      [from]: padSegment(text, timeSpecs(timeFormat)[from]),
-    },
-    focused: to,
-  };
-};
-
-export const timeEntryReducer = (
-  state: TimeEntryState,
-  action: TimeEntryAction,
-  timeFormat: TimeFormat
-): TimeEntryState => {
-  switch (action.type) {
-    case 'focus':
-      return leave(state, action.key, timeFormat);
-    case 'blur':
-      return leave(state, null, timeFormat);
-    case 'digit': {
-      const key = state.focused;
-      if (!key) return state;
-      const { next, advance } = inputDigit(
-        state.values[key] ?? '',
-        action.digit,
-        timeSpecs(timeFormat)[key]
-      );
-      const typed = { ...state, values: { ...state.values, [key]: next } };
-      // Two hour digits jump to the minutes; a full minute box stays put.
-      if (!advance) return typed;
-      return leave(typed, key === 'hour' ? 'minute' : null, timeFormat);
-    }
-    case 'backspace': {
-      const key = state.focused;
-      if (!key) return state;
-      const current = state.values[key] ?? '';
-      if (current)
-        return {
-          ...state,
-          values: { ...state.values, [key]: current.slice(0, -1) },
-        };
-      if (key === 'minute') {
-        return {
-          values: {
-            ...state.values,
-            hour: (state.values.hour ?? '').slice(0, -1),
-          },
-          focused: 'hour',
-        };
-      }
-      return state;
-    }
-    case 'period':
-      return { ...state, values: { ...state.values, period: action.period } };
-    case 'reset':
-      return {
-        values: formatTimeEntry(action.time, timeFormat),
-        focused: state.focused,
-      };
-    default:
-      return state;
-  }
-};
-
 const readNumber = (text?: string): number | null =>
   text && /^\d+$/.test(text) ? Number(text) : null;
 
@@ -213,9 +120,12 @@ export const isPeriodAllowed = (
   return true;
 };
 
-/** Digits only, at most two (what a time box accepts while typing). */
+/**
+ * Digits only, at most two (what a time box accepts while typing). Digits
+ * typed in another script count too ('٠٩' → '09').
+ */
 export const cleanBoxText = (raw: string): string =>
-  raw.replace(/\D/g, '').slice(0, 2);
+  toLatinDigits(raw).replace(/\D/g, '').slice(0, 2);
 
 /**
  * The boxes as they are saved when focus leaves them: a one-digit entry gets a

package/src/icons/index.tsx

@@ -37,6 +37,8 @@ export type IconSet = Record<IconName, IconComponent | null>;
 
 const s = StyleSheet.create({
   box: { alignItems: 'center', justifyContent: 'center' },
+  // RTL swaps left and right borders, which would move a chevron's corner.
+  ltr: { direction: 'ltr' },
   bar: { position: 'absolute' },
   frame: { overflow: 'hidden' },
 });
@@ -53,7 +55,7 @@ const Chevron: React.FC<IconRenderProps & { rotate: string }> = ({
 }) => {
   const side = size * 0.4;
   return (
-    <View style={[s.box, { width, height }]}>
+    <View style={[s.box, s.ltr, { width, height }]}>
       <View
         style={{
           width: side,

package/src/index.tsx

@@ -31,6 +31,8 @@ export {
   todayIn,
   weekdayOf,
 } from './core/calendarDate';
+export { hijriDateText, hijriPeriods } from './core/calendarSystem';
+export { arabicDigits } from './core/numerals';
 
 // Types
 export type {
@@ -56,6 +58,8 @@ export type {
   TimeBounds,
 } from './core/constraints';
 export type {
+  CalendarSwitchRenderProps,
+  ChangeInfo,
   ConstraintContext,
   DateTimePickerProps,
   InstructionRenderProps,
@@ -67,10 +71,16 @@ export type {
   SheetSize,
   Slot,
 } from './components/types';
+export type { CalendarSystem, Periods } from './core/calendarSystem';
+export type { Numerals } from './core/numerals';
 export type { PickerStrings } from './components/theme/defaultStrings';
-export type { PickerStyles } from './components/theme/styleKeys';
+export type {
+  PickerStyles,
+  PickerStyleValue,
+  StyleKey,
+} from './components/theme/styleKeys';
 export type { ThemeTokens } from './components/theme/tokens';
-export type { DayCellState } from './components/calendar/DayCell';
+export type { DayCellState, RangeRole } from './components/calendar/DayCell';
 export type { PeriodItem } from './components/calendar/PeriodGrid';
 export type {
   IconComponent,