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

package/src/date-picker/context.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, type RefObject } from 'react';
+import type { View } from 'react-native';
+import type { DateComponentLabels, DateId } from '@cdx-ui/formatters';
+
+export type PickerSurfaceType = 'popover' | 'dialog' | 'bottomSheet';
+
+export interface DatePickerContextValue {
+  value?: DateId;
+  onValueChange?: (value: DateId | undefined) => void;
+  draftValue?: DateId;
+  setDraftValue: (value: DateId | undefined) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled: boolean;
+  minValue?: DateId;
+  maxValue?: DateId;
+  locale: string;
+  labels: DateComponentLabels;
+  registerSurface: (type: PickerSurfaceType) => void;
+  /** Measured anchor for popover placement (picker root view). */
+  anchorRef: RefObject<View | null>;
+  /** Trigger element — excluded from outside-dismiss handling. */
+  triggerRef: RefObject<View | null>;
+}
+
+export const DatePickerContext = createContext<DatePickerContextValue | null>(null);
+
+export function useDatePickerContext(): DatePickerContextValue {
+  const ctx = useContext(DatePickerContext);
+  if (!ctx) {
+    throw new Error('DatePicker compound components must be used within DatePickerRoot');
+  }
+  return ctx;
+}

package/src/date-picker/index.ts

@@ -0,0 +1,4 @@
+export { DatePickerRoot } from './DatePickerRoot';
+export type { DatePickerRootProps } from './DatePickerRoot';
+export { DatePickerContext, useDatePickerContext, type DatePickerContextValue } from './context';
+export type { PickerSurfaceType } from './context';

package/src/date-range-picker/DateRangePickerRoot.tsx

@@ -0,0 +1,236 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import type { DateComponentLabels, DateId } from '@cdx-ui/formatters';
+import { resolveDateComponentLabels } from '@cdx-ui/formatters';
+import { useControllableState, mergeRefs } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import type { PickerSurfaceType } from '../date-picker/context';
+import type { RangeCalendarFocus } from '../range-calendar/context';
+import { DateRangePickerContext, type DateRangeValue } from './context';
+
+export interface DateRangePickerRootProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+  /**
+   * Controlled range value as `{ startId, endId? }`. Build the ids with
+   * `dateId(...)` from `@cdx-ui/formatters` — a bare string will not type-check.
+   *
+   * @example
+   * value={{ startId: dateId('2026-08-01'), endId: dateId('2026-08-07') }}
+   */
+  value?: DateRangeValue;
+  /** Uncontrolled initial range, in the same shape as `value`. */
+  defaultValue?: DateRangeValue;
+  /**
+   * Called as the range changes. Emits `{ startId, endId? }` during selection —
+   * a **partial** range (with `endId` undefined) is emitted after the first
+   * endpoint is picked — and `undefined` when the range is fully cleared.
+   */
+  onValueChange?: (value: DateRangeValue | undefined) => void;
+  focusedField?: RangeCalendarFocus;
+  defaultFocusedField?: RangeCalendarFocus;
+  onFocusedFieldChange?: (field: RangeCalendarFocus) => void;
+  /** Controlled open state. Use `defaultOpen` for the uncontrolled variant. */
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  locale?: string;
+  labels?: Partial<DateComponentLabels>;
+  /** Form field name used when the selected range is submitted. */
+  name?: string;
+}
+
+export const DateRangePickerRoot = forwardRef<ComponentRef<typeof View>, DateRangePickerRootProps>(
+  (props, ref) => {
+    const {
+      asChild,
+      children,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      focusedField: focusedProp,
+      defaultFocusedField = 'start',
+      onFocusedFieldChange,
+      isOpen: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      isDisabled: disabled = false,
+      isReadOnly = false,
+      isInvalid = false,
+      isRequired = false,
+      locale = 'en-US',
+      labels: labelsProp,
+      ...rest
+    } = props;
+
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+
+    const isRangeControlled = 'value' in props;
+    const [uncontrolledStart, setUncontrolledStart] = useState<DateId | undefined>(
+      defaultValue?.startId,
+    );
+    const [uncontrolledEnd, setUncontrolledEnd] = useState<DateId | undefined>(defaultValue?.endId);
+    const startValue = isRangeControlled ? valueProp?.startId : uncontrolledStart;
+    const endValue = isRangeControlled ? valueProp?.endId : uncontrolledEnd;
+
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const [draftStart, setDraftStart] = useState<DateId | undefined>(startValue);
+    const [draftEnd, setDraftEnd] = useState<DateId | undefined>(endValue);
+
+    const [focusedField, setFocusedField] = useControllableState<RangeCalendarFocus>({
+      prop: focusedProp,
+      defaultProp: defaultFocusedField,
+      onChange: onFocusedFieldChange,
+    });
+
+    const surfacesRef = useRef<Set<PickerSurfaceType>>(new Set());
+    const anchorRef = useRef<ComponentRef<typeof View>>(null);
+    const triggerRef = useRef<ComponentRef<typeof View>>(null);
+
+    const commitRange = useCallback(
+      (range: DateRangeValue | undefined) => {
+        if (!isRangeControlled) {
+          setUncontrolledStart(range?.startId);
+          setUncontrolledEnd(range?.endId);
+        }
+        setDraftStart(range?.startId);
+        setDraftEnd(range?.endId);
+        onValueChange?.(range);
+      },
+      [isRangeControlled, onValueChange],
+    );
+
+    const setDraftRange = useCallback(
+      (range: { startId?: DateId | null; endId?: DateId | null }) => {
+        if (range.startId === null) {
+          setDraftStart(undefined);
+        } else if (range.startId !== undefined) {
+          setDraftStart(range.startId);
+        }
+        if (range.endId === null) {
+          setDraftEnd(undefined);
+        } else if (range.endId !== undefined) {
+          setDraftEnd(range.endId);
+        }
+      },
+      [],
+    );
+
+    // Sync draft from committed values when they change externally (presets, typed fields).
+    useEffect(() => {
+      setDraftStart(startValue);
+      setDraftEnd(endValue);
+    }, [endValue, startValue]);
+
+    const setOpen = useCallback(
+      (next: boolean) => {
+        if (disabled && next) {
+          return;
+        }
+        if (next) {
+          setDraftStart(startValue);
+          setDraftEnd(endValue);
+        }
+        setOpenState(next);
+      },
+      [disabled, endValue, setOpenState, startValue],
+    );
+
+    const registerSurface = useCallback((type: PickerSurfaceType) => {
+      if (surfacesRef.current.has(type)) {
+        return;
+      }
+      surfacesRef.current.add(type);
+      if (surfacesRef.current.size > 1) {
+        console.warn(
+          '[Forge UI] DateRangePicker: multiple presentation surfaces detected. Use only one of Popover, Dialog, or BottomSheet.',
+        );
+      }
+    }, []);
+
+    useEffect(() => {
+      if (!open) {
+        surfacesRef.current.clear();
+      }
+    }, [open]);
+
+    const contextValue = useMemo(
+      () => ({
+        startValue,
+        endValue,
+        onRangeChange: commitRange,
+        draftStart,
+        draftEnd,
+        setDraftRange,
+        focusedField: focusedField ?? 'start',
+        setFocusedField,
+        open: open ?? false,
+        setOpen,
+        disabled,
+        readOnly: isReadOnly,
+        invalid: isInvalid,
+        required: isRequired,
+        locale,
+        labels,
+        registerSurface,
+        anchorRef,
+        triggerRef,
+      }),
+      [
+        startValue,
+        endValue,
+        commitRange,
+        draftStart,
+        draftEnd,
+        setDraftRange,
+        focusedField,
+        setFocusedField,
+        open,
+        setOpen,
+        disabled,
+        isReadOnly,
+        isInvalid,
+        isRequired,
+        locale,
+        labels,
+        registerSurface,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <DateRangePickerContext.Provider value={contextValue}>
+        <Comp
+          ref={mergeRefs(ref, anchorRef)}
+          {...rest}
+          {...mergeDataAttributes(rest, dataAttributes({ disabled, open }))}
+        >
+          {children}
+        </Comp>
+      </DateRangePickerContext.Provider>
+    );
+  },
+);
+
+DateRangePickerRoot.displayName = 'DateRangePickerRoot';

package/src/date-range-picker/context.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, type RefObject } from 'react';
+import type { View } from 'react-native';
+import type { DateComponentLabels, DateId } from '@cdx-ui/formatters';
+import type { RangeCalendarFocus } from '../range-calendar/context';
+import type { PickerSurfaceType } from '../date-picker/context';
+
+/**
+ * A date range value. `endId` is optional: while the user is mid-selection (only
+ * the first endpoint chosen) the range carries `startId` alone. Build the ids
+ * with `dateId(...)` from `@cdx-ui/formatters`.
+ */
+export interface DateRangeValue {
+  startId: DateId;
+  endId?: DateId;
+}
+
+export interface DateRangePickerContextValue {
+  startValue?: DateId;
+  endValue?: DateId;
+  onRangeChange?: (range: DateRangeValue | undefined) => void;
+  draftStart?: DateId;
+  draftEnd?: DateId;
+  /** Sets both draft ends; omit a key to leave it, pass `null` to clear. */
+  setDraftRange: (range: { startId?: DateId | null; endId?: DateId | null }) => void;
+  focusedField: RangeCalendarFocus;
+  setFocusedField: (field: RangeCalendarFocus) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  required: boolean;
+  locale: string;
+  labels: DateComponentLabels;
+  registerSurface: (type: PickerSurfaceType) => void;
+  anchorRef: RefObject<View | null>;
+  triggerRef: RefObject<View | null>;
+}
+
+export const DateRangePickerContext = createContext<DateRangePickerContextValue | null>(null);
+
+export function useDateRangePickerContext(): DateRangePickerContextValue {
+  const ctx = useContext(DateRangePickerContext);
+  if (!ctx) {
+    throw new Error('DateRangePicker compound components must be used within DateRangePickerRoot');
+  }
+  return ctx;
+}

package/src/date-range-picker/index.ts

@@ -0,0 +1,8 @@
+export { DateRangePickerRoot } from './DateRangePickerRoot';
+export type { DateRangePickerRootProps } from './DateRangePickerRoot';
+export {
+  DateRangePickerContext,
+  useDateRangePickerContext,
+  type DateRangePickerContextValue,
+  type DateRangeValue,
+} from './context';

package/src/date-time-field/DateTimeFieldHiddenInput.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef } from 'react';
+import { Platform, TextInput, type TextInputKeyPressEvent } from 'react-native';
+import { useDateTimeFieldContext } from './context';
+
+/**
+ * Invisible input that owns keyboard focus while a segment is active.
+ * Mirrors `DateFieldHiddenInput`; switches to a default keyboard for day-period (A/P).
+ */
+const HIDDEN_INPUT_STYLE = {
+  position: 'absolute' as const,
+  opacity: 0.01,
+  width: '100%' as const,
+  height: '100%' as const,
+  left: 0,
+  top: 0,
+  zIndex: 0,
+  fontSize: 16,
+};
+
+const NUMERIC_KEYBOARD = Platform.select<'number-pad' | 'phone-pad'>({
+  ios: 'phone-pad',
+  default: 'number-pad',
+});
+
+export function DateTimeFieldHiddenInput({ accessibilityLabel }: { accessibilityLabel: string }) {
+  const {
+    focusedSegmentIndex,
+    segments,
+    disabled,
+    readOnly,
+    segmentDraft,
+    handleSegmentInputChange,
+    handleSegmentBackspace,
+    handleDayPeriodKey,
+    focusNextEditableSegment,
+    focusPrevEditableSegment,
+    blurSegment,
+  } = useDateTimeFieldContext();
+
+  const inputRef = useRef<TextInput>(null);
+  const suppressBlurRef = useRef(false);
+  const focusedIndexRef = useRef(focusedSegmentIndex);
+  focusedIndexRef.current = focusedSegmentIndex;
+
+  const focusedSegment = focusedSegmentIndex != null ? segments[focusedSegmentIndex] : undefined;
+  const isDayPeriod = focusedSegment?.type === 'dayPeriod';
+  const isActive = focusedSegmentIndex != null && !disabled && !readOnly;
+  const draftValue = isDayPeriod
+    ? segmentDraft.replace(/[^aApP12]/g, '')
+    : segmentDraft.replace(/\D/g, '');
+
+  useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
+    suppressBlurRef.current = true;
+    const focusInput = () => {
+      inputRef.current?.focus();
+    };
+
+    const frame = requestAnimationFrame(focusInput);
+    const timer = setTimeout(() => {
+      focusInput();
+      suppressBlurRef.current = false;
+    }, 50);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [isActive, focusedSegmentIndex]);
+
+  const onKeyPress = (event: TextInputKeyPressEvent) => {
+    if (!isActive) {
+      return;
+    }
+    const key = event.nativeEvent.key;
+    if (key === 'Backspace') {
+      if (draftValue.length === 0) {
+        handleSegmentBackspace();
+      }
+      return;
+    }
+    if (key === 'ArrowRight') {
+      focusNextEditableSegment();
+      return;
+    }
+    if (key === 'ArrowLeft') {
+      focusPrevEditableSegment();
+      return;
+    }
+    if (isDayPeriod && /^[apAP]$/.test(key)) {
+      handleDayPeriodKey(key);
+    }
+  };
+
+  return (
+    <TextInput
+      testID="date-time-field-keyboard-input"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      ref={inputRef}
+      value={isActive ? draftValue : ''}
+      editable={isActive}
+      showSoftInputOnFocus={isActive}
+      pointerEvents="none"
+      caretHidden
+      importantForAutofill="no"
+      autoComplete="off"
+      autoCorrect={false}
+      spellCheck={false}
+      keyboardType={isDayPeriod ? 'default' : NUMERIC_KEYBOARD}
+      inputMode={isDayPeriod ? 'text' : 'numeric'}
+      style={HIDDEN_INPUT_STYLE}
+      onChangeText={(text) => {
+        if (!isActive) {
+          return;
+        }
+        handleSegmentInputChange(text);
+      }}
+      onKeyPress={onKeyPress}
+      onBlur={() => {
+        if (suppressBlurRef.current) {
+          return;
+        }
+        requestAnimationFrame(() => {
+          if (suppressBlurRef.current) {
+            return;
+          }
+          const index = focusedIndexRef.current;
+          if (index == null) {
+            return;
+          }
+          if (Platform.OS !== 'web') {
+            blurSegment(index);
+            return;
+          }
+          const node = inputRef.current as unknown as { isFocused?: () => boolean } | null;
+          if (node?.isFocused?.()) {
+            return;
+          }
+          const active = typeof document !== 'undefined' ? document.activeElement : null;
+          if (active && (active as HTMLElement).tagName === 'INPUT') {
+            const label = (active as HTMLElement).getAttribute('aria-label');
+            if (label === accessibilityLabel) {
+              return;
+            }
+          }
+          blurSegment(index);
+        });
+      }}
+    />
+  );
+}

package/src/date-time-field/DateTimeFieldInput.tsx

@@ -0,0 +1,119 @@
+import { forwardRef, useEffect, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import type { DateSegment } from '@cdx-ui/formatters';
+import { DateFieldSegmentIndexProvider } from '../date-field/segmentIndex';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDateTimeFieldContext } from './context';
+import { DateTimeFieldHiddenInput } from './DateTimeFieldHiddenInput';
+
+export interface DateTimeFieldInputProps {
+  children: (segment: DateSegment) => React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+  style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+}
+
+export const DateTimeFieldInput = forwardRef<
+  ComponentRef<typeof View>,
+  DateTimeFieldInputProps & Omit<import('react-native').ViewProps, 'children'>
+>(({ asChild, children, className, style, ...props }, ref) => {
+  const ctx = useDateTimeFieldContext();
+  const { segments, labels } = ctx;
+  const keyboardInputLabel = labels.dateFieldKeyboardInput;
+  const Comp = asChild ? Slot : View;
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || ctx.focusedSegmentIndex == null || ctx.disabled || ctx.readOnly) {
+      return;
+    }
+
+    const focusedIndex = ctx.focusedSegmentIndex;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      const activeLabel =
+        typeof document !== 'undefined'
+          ? document.activeElement?.getAttribute?.('aria-label')
+          : null;
+      const inputOwnsFocus = activeLabel === keyboardInputLabel;
+
+      if (event.key === 'Backspace') {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.handleSegmentBackspace();
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.focusNextEditableSegment();
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.focusPrevEditableSegment();
+        return;
+      }
+      if (event.key === 'Tab') {
+        ctx.blurSegment(focusedIndex);
+        return;
+      }
+      if (/^[apAP]$/.test(event.key)) {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.handleDayPeriodKey(event.key);
+        return;
+      }
+      if (/^\d$/.test(event.key)) {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.handleSegmentDigit(event.key);
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [
+    ctx.blurSegment,
+    ctx.disabled,
+    ctx.focusNextEditableSegment,
+    ctx.focusPrevEditableSegment,
+    ctx.focusedSegmentIndex,
+    ctx.handleDayPeriodKey,
+    ctx.handleSegmentBackspace,
+    ctx.handleSegmentDigit,
+    ctx.readOnly,
+    keyboardInputLabel,
+  ]);
+
+  return (
+    <Comp
+      ref={ref}
+      className={className}
+      style={[{ position: 'relative' }, style]}
+      accessibilityRole="none"
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-field-input' }))}
+    >
+      {segments.map((segment: DateSegment, index: number) => (
+        <DateFieldSegmentIndexProvider key={`${segment.type}-${String(index)}`} index={index}>
+          {children(segment)}
+        </DateFieldSegmentIndexProvider>
+      ))}
+      <DateTimeFieldHiddenInput accessibilityLabel={keyboardInputLabel} />
+    </Comp>
+  );
+});
+
+DateTimeFieldInput.displayName = 'DateTimeFieldInput';