@cdx-ui/primitives 0.0.1-beta.140 → 0.0.1-beta.141

package/src/date-field/context.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, type Dispatch, type SetStateAction } from 'react';
+import type {
+  DateComponentLabels,
+  DateFieldMode,
+  DateId,
+  DateSegment,
+  MonthId,
+} from '@cdx-ui/formatters';
+
+/** A `DateField` carries a `DateId` in date mode and a `MonthId` in month mode. */
+export type DateFieldValue = DateId | MonthId | undefined;
+
+export interface DateFieldContextValue {
+  value: DateFieldValue;
+  onValueChange?: (value: DateFieldValue) => void;
+  mode: DateFieldMode;
+  locale: string;
+  labels: DateComponentLabels;
+  segments: DateSegment[];
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  focusedSegmentIndex: number | null;
+  focusSegment: (index: number) => void;
+  blurSegment: (index: number) => void;
+  focusNextEditableSegment: () => void;
+  focusPrevEditableSegment: () => void;
+  handleSegmentDigit: (digits: string) => void;
+  /** Sync draft from the hidden TextInput (append / replace / delete). */
+  handleSegmentInputChange: (raw: string) => void;
+  handleSegmentBackspace: () => void;
+  /** Current draft text for the focused segment (digits while editing). */
+  segmentDraft: string;
+  getSegmentDisplayText: (index: number) => string;
+  onSegmentChange: (segmentType: DateSegment['type'], value: number) => void;
+  /** @deprecated Use focusSegment / blurSegment */
+  setFocusedSegmentIndex?: Dispatch<SetStateAction<number | null>>;
+}
+
+export const DateFieldContext = createContext<DateFieldContextValue | null>(null);
+
+export function useDateFieldContext(): DateFieldContextValue {
+  const ctx = useContext(DateFieldContext);
+  if (!ctx) {
+    throw new Error('DateField compound components must be used within DateFieldRoot');
+  }
+  return ctx;
+}

package/src/date-field/index.ts

@@ -0,0 +1,8 @@
+export { DateFieldRoot } from './DateFieldRoot';
+export type { DateFieldRootProps } from './DateFieldRoot';
+export { DateFieldInput } from './DateFieldInput';
+export type { DateFieldInputProps } from './DateFieldInput';
+export { DateFieldSegment } from './DateFieldSegment';
+export type { DateFieldSegmentProps } from './DateFieldSegment';
+export { useDateFieldContext } from './context';
+export type * from './types';

package/src/date-field/segmentIndex.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const SegmentIndexContext = createContext<number>(0);
+
+export function DateFieldSegmentIndexProvider({
+  index,
+  children,
+}: {
+  index: number;
+  children: ReactNode;
+}) {
+  return <SegmentIndexContext.Provider value={index}>{children}</SegmentIndexContext.Provider>;
+}
+
+export function useDateFieldSegmentIndex(): number {
+  return useContext(SegmentIndexContext);
+}

package/src/date-field/segmentKeyboard.ts

@@ -0,0 +1,207 @@
+import { parseDateSegment, type DateSegment, type DateSegmentType } from '@cdx-ui/formatters';
+
+export interface SegmentKeyboardOptions {
+  /** When true, hour segments are 1–12; otherwise 0–23. */
+  hour12?: boolean;
+}
+
+export const SEGMENT_MAX_LENGTH: Partial<Record<DateSegmentType, number>> = {
+  month: 2,
+  day: 2,
+  year: 4,
+  hour: 2,
+  minute: 2,
+  second: 2,
+  dayPeriod: 1,
+};
+
+export function getSegmentMaxLength(type: DateSegmentType): number {
+  return SEGMENT_MAX_LENGTH[type] ?? 4;
+}
+
+/** True when another digit cannot produce a different valid value (auto-advance). */
+export function isSegmentDraftComplete(
+  type: DateSegmentType,
+  draft: string,
+  options?: SegmentKeyboardOptions,
+): boolean {
+  if (!draft) {
+    return false;
+  }
+  const maxLength = getSegmentMaxLength(type);
+  if (draft.length >= maxLength) {
+    return true;
+  }
+
+  const value = Number(draft);
+  if (Number.isNaN(value)) {
+    return false;
+  }
+
+  // Month 1-12: 2-9 cannot be a leading digit of a two-digit month.
+  if (type === 'month') {
+    return value >= 2 && value <= 9;
+  }
+
+  // Day 1-31: 4-9 cannot be a leading digit of a two-digit day.
+  if (type === 'day') {
+    return value >= 4 && value <= 9;
+  }
+
+  if (type === 'hour') {
+    if (options?.hour12) {
+      return value >= 2 && value <= 9;
+    }
+    // 0-23: 3-9 cannot start a valid two-digit hour.
+    return value >= 3 && value <= 9;
+  }
+
+  // Minute / second 0-59: 6-9 cannot start a valid two-digit value.
+  if (type === 'minute' || type === 'second') {
+    return value >= 6 && value <= 9;
+  }
+
+  return false;
+}
+
+function isValidSegmentDraft(
+  type: DateSegmentType,
+  draft: string,
+  options?: SegmentKeyboardOptions,
+): boolean {
+  if (!draft) {
+    return true;
+  }
+  const value = Number(draft);
+  if (Number.isNaN(value)) {
+    return false;
+  }
+  if (type === 'month') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 1 && value <= 12;
+  }
+  if (type === 'day') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 1 && value <= 31;
+  }
+  if (type === 'year') {
+    return draft.length <= 4;
+  }
+  if (type === 'hour') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    if (options?.hour12) {
+      return value >= 1 && value <= 12;
+    }
+    return value >= 0 && value <= 23;
+  }
+  if (type === 'minute' || type === 'second') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 0 && value <= 59;
+  }
+  return true;
+}
+
+export function applySegmentDigit(
+  draft: string,
+  _committedText: string,
+  isDraftDirty: boolean,
+  digit: string,
+  type: DateSegmentType,
+  options?: SegmentKeyboardOptions,
+): {
+  draft: string;
+  isDraftDirty: boolean;
+  shouldCommit: boolean;
+  /** When set, commit `draft` then apply this digit to the next segment. */
+  spillDigit?: string;
+} {
+  const maxLength = getSegmentMaxLength(type);
+  const base = isDraftDirty ? draft : '';
+  const candidate = `${base}${digit}`.slice(0, maxLength + 1);
+
+  // e.g. month "1" + "5" → invalid 15: commit 1, spill 5 into day.
+  if (
+    base.length > 0 &&
+    candidate.length <= maxLength &&
+    !isValidSegmentDraft(type, candidate, options) &&
+    isValidSegmentDraft(type, base, options) &&
+    Number(base) >= 1
+  ) {
+    return {
+      draft: base,
+      isDraftDirty: true,
+      shouldCommit: true,
+      spillDigit: digit,
+    };
+  }
+
+  const nextDraft = candidate.slice(0, maxLength);
+  if (!isValidSegmentDraft(type, nextDraft, options)) {
+    // Replace with the new digit alone (e.g. starting fresh).
+    return {
+      draft: digit,
+      isDraftDirty: true,
+      shouldCommit: isSegmentDraftComplete(type, digit, options),
+    };
+  }
+
+  return {
+    draft: nextDraft,
+    isDraftDirty: true,
+    shouldCommit: isSegmentDraftComplete(type, nextDraft, options),
+  };
+}
+
+export function commitSegmentDraft(segment: DateSegment, draft: string): number | null {
+  const parsed = parseDateSegment(segment.type, draft || segment.text);
+  return parsed;
+}
+
+/** Parses day-period input (`A`/`P`/`1`/`2`) into 0 (AM) or 1 (PM). */
+export function commitDayPeriodDraft(draft: string): number | null {
+  const trimmed = draft.trim().toLowerCase();
+  if (!trimmed) {
+    return null;
+  }
+  if (trimmed === 'a' || trimmed === 'am' || trimmed === '1') {
+    return 0;
+  }
+  if (trimmed === 'p' || trimmed === 'pm' || trimmed === '2') {
+    return 1;
+  }
+  return null;
+}
+
+export function findAdjacentEditableIndex(
+  segments: DateSegment[],
+  fromIndex: number,
+  direction: -1 | 1,
+): number | null {
+  for (
+    let i = fromIndex + direction;
+    direction < 0 ? i >= 0 : i < segments.length;
+    i += direction
+  ) {
+    if (segments[i]?.isEditable) {
+      return i;
+    }
+  }
+  return null;
+}
+
+export function toHour24(hour12: number, period: number): number {
+  const normalized = hour12 % 12;
+  return normalized + (period === 1 ? 12 : 0);
+}
+
+export function toHour12(hour24: number): number {
+  return hour24 % 12 || 12;
+}

package/src/date-field/types.ts

@@ -0,0 +1,40 @@
+import type { ViewProps } from 'react-native';
+import type { DateComponentLabels, DateFieldMode, DateId, MonthId } from '@cdx-ui/formatters';
+
+export interface IDateFieldProps {
+  /**
+   * Controlled value: a `DateId` (`YYYY-MM-DD`) in date mode, or a `MonthId`
+   * (`YYYY-MM-01`) in month mode. Build one with `dateId(...)` / `monthId(...)`
+   * from `@cdx-ui/formatters` — a bare string will not type-check.
+   */
+  value?: DateId | MonthId;
+  /** Uncontrolled initial value, in the same format as `value`. */
+  defaultValue?: DateId | MonthId;
+  /** Called with the new value once every segment is filled, or `undefined` when the field is cleared. */
+  onValueChange?: (value: DateId | MonthId | undefined) => void;
+  /** Which segments to render: `date` shows month, day, and year; `month` shows month and year only. */
+  mode?: DateFieldMode;
+  /** BCP-47 locale that controls segment order and separators. Defaults to `en-US`. */
+  locale?: string;
+  /** Overrides the accessible labels announced for each segment. */
+  labels?: Partial<DateComponentLabels>;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+}
+
+export interface IDateFieldInputProps extends Omit<ViewProps, 'children'> {
+  children: (segment: import('@cdx-ui/formatters').DateSegment) => React.ReactNode;
+  /**
+   * Range-composition hint. Only meaningful when a `DateField.Input` is rendered
+   * inside a `DateRangePicker` — it binds the input to the range's start or end
+   * endpoint via the internal range bridge. Ignored for a standalone `DateField`.
+   */
+  slot?: 'start' | 'end';
+}
+
+export interface IDateFieldSegmentProps {
+  segment: import('@cdx-ui/formatters').DateSegment;
+  segmentIndex?: number;
+}