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

package/src/calendar/CalendarGrid.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+
+export interface CalendarGridProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const CalendarGrid = forwardRef<ComponentRef<typeof View>, CalendarGridProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        accessibilityRole="none"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'calendar-grid' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+CalendarGrid.displayName = 'CalendarGrid';

package/src/calendar/CalendarRoot.tsx

@@ -0,0 +1,138 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  todayMonthId,
+  toMonthId,
+  resolveDateComponentLabels,
+  type DateId,
+  type MonthId,
+} from '@cdx-ui/formatters';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { accessibleLabelAttributes, resolveAccessibleLabel } from '../utils/accessibleLabel';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { CalendarContext, type CalendarView } from './context';
+import type { ICalendarProps } from './types';
+
+export interface CalendarRootProps extends ICalendarProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const CalendarRoot = forwardRef<ComponentRef<typeof View>, CalendarRootProps>(
+  (
+    {
+      asChild,
+      children,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      monthId: monthIdProp,
+      defaultMonthId,
+      onMonthIdChange,
+      minValue,
+      maxValue,
+      disabled = false,
+      locale = 'en-US',
+      labels: labelsProp,
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const accessibilityLabel = resolveAccessibleLabel({
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+    });
+    const [value, setValue] = useControllableState<DateId | undefined>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const [monthId, setMonthId] = useControllableState<MonthId>({
+      prop: monthIdProp,
+      defaultProp: defaultMonthId ?? (value ? toMonthId(value) : todayMonthId()),
+      onChange: onMonthIdChange,
+    });
+
+    const prevValueRef = useRef(value);
+    useEffect(() => {
+      if (monthIdProp !== undefined) {
+        prevValueRef.current = value;
+        return;
+      }
+      if (value === undefined || prevValueRef.current === value) {
+        prevValueRef.current = value;
+        return;
+      }
+      prevValueRef.current = value;
+      setMonthId(toMonthId(value));
+    }, [monthIdProp, setMonthId, value]);
+
+    const [view, setViewState] = useState<CalendarView>('month');
+
+    const setView = useCallback((next: CalendarView) => {
+      setViewState(next);
+    }, []);
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onValueChange: setValue,
+        monthId: monthId ?? todayMonthId(),
+        onMonthIdChange: setMonthId,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        view,
+        setView,
+      }),
+      [
+        value,
+        setValue,
+        monthId,
+        setMonthId,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        view,
+        setView,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <CalendarContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          accessibilityRole="none"
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ disabled }))}
+          {...accessibleLabelAttributes(accessibilityLabel)}
+        >
+          {children}
+        </Comp>
+      </CalendarContext.Provider>
+    );
+  },
+);
+
+CalendarRoot.displayName = 'CalendarRoot';

package/src/calendar/context.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext } from 'react';
+import type { DateComponentLabels, DateId, MonthId } from '@cdx-ui/formatters';
+
+export type CalendarView = 'month' | 'year';
+
+export interface CalendarContextValue {
+  value?: DateId;
+  onValueChange?: (value: DateId | undefined) => void;
+  monthId: MonthId;
+  onMonthIdChange: (monthId: MonthId) => void;
+  minValue?: DateId;
+  maxValue?: DateId;
+  disabled: boolean;
+  locale: string;
+  labels: DateComponentLabels;
+  view: CalendarView;
+  setView: (view: CalendarView) => void;
+}
+
+export const CalendarContext = createContext<CalendarContextValue | null>(null);
+
+export function useCalendarContext(): CalendarContextValue {
+  const ctx = useContext(CalendarContext);
+  if (!ctx) {
+    throw new Error('Calendar compound components must be used within CalendarRoot');
+  }
+  return ctx;
+}

package/src/calendar/index.ts

@@ -0,0 +1,4 @@
+export { CalendarRoot } from './CalendarRoot';
+export { CalendarGrid } from './CalendarGrid';
+export { useCalendarContext, type CalendarView } from './context';
+export type * from './types';

package/src/calendar/types.ts

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+import type { DateComponentLabels, DateId, MonthId } from '@cdx-ui/formatters';
+
+export interface ICalendarProps {
+  /** Selected date as a `YYYY-MM-DD` string. */
+  value?: DateId;
+  /** Uncontrolled initial selection as a `YYYY-MM-DD` string. */
+  defaultValue?: DateId;
+  /** Called with the new selection, or `undefined` when the selection is cleared. */
+  onValueChange?: (value: DateId | undefined) => void;
+  /** Month shown in the grid as a `YYYY-MM-01` string. Follows the selected `value` unless controlled. */
+  monthId?: MonthId;
+  /** Uncontrolled initial month as a `YYYY-MM-01` string. */
+  defaultMonthId?: MonthId;
+  onMonthIdChange?: (monthId: MonthId) => void;
+  /** Earliest selectable date. Build with `dateId(...)` from `@cdx-ui/formatters`. */
+  minValue?: DateId;
+  /** Latest selectable date. Build with `dateId(...)` from `@cdx-ui/formatters`. */
+  maxValue?: DateId;
+  disabled?: boolean;
+  /** BCP 47 locale for weekday and month formatting. Defaults to `en-US`. */
+  locale?: string;
+  labels?: Partial<DateComponentLabels>;
+  /** Accessible name for the calendar region. */
+  accessibilityLabel?: string;
+}
+
+export interface ICalendarGridProps extends ViewProps {
+  className?: string;
+}

package/src/checkbox/CheckboxRoot.web.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Pressable, type PressableProps } from 'react-native';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocusRing } from '@react-native-aria/focus';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
@@ -12,6 +13,14 @@ export interface CheckboxRootProps extends ICheckboxProps {
   asChild?: boolean;
 }
 
+/**
+ * Web Checkbox root.
+ *
+ * On web, `@react-native-aria/checkbox` re-exports `@react-aria/checkbox`'s
+ * `useCheckbox`, whose `inputProps` target a native `<input type="checkbox">`
+ * (selection via `onChange`). Toggle must be applied explicitly on the Pressable —
+ * `inputProps.onPress` does **not** call `toggleState.toggle()`.
+ */
 export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
   ({ asChild, children, ...props }, ref) => {
     const {
@@ -37,18 +46,55 @@ export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, Che
       isHovered,
       mergedRef,
       inputRef,
+      toggle,
     } = useCheckboxRoot(props, ref, { useInputRefForAria: true });
 
     const { focusProps, isFocusVisible } = useFocusRing();
 
+    // Strip native-input / internal props — they must not land on Pressable.
+    const {
+      onPress: _onPress,
+      onChange: _onChange,
+      role: _role,
+      tabIndex: _tabIndex,
+      disabled: _disabled,
+      checked: _checked,
+      value: _value,
+      type: _type,
+      name: _name,
+      form: _form,
+      required: _required,
+      ...inputAriaProps
+    } = groupItemInputProps;
+
+    const resolvedChecked = !!(isChecked || isCheckedProp);
+    const resolvedIndeterminate = !!(isIndeterminate || isIndeterminateProp);
+    const resolvedDisabled = !!(isDisabled || isDisabledProp);
+    const resolvedReadOnly = !!(isReadOnly || isReadOnlyProp);
+    const ariaChecked = resolvedIndeterminate ? 'mixed' : resolvedChecked;
+
+    const handleToggle = () => {
+      if (resolvedDisabled || resolvedReadOnly) {
+        return;
+      }
+      toggle();
+    };
+
+    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {
+      if (event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        handleToggle();
+      }
+    };
+
     const contextValue: ICheckboxContextValue = {
-      isChecked: isChecked || isCheckedProp,
-      isDisabled: isDisabled || isDisabledProp,
+      isChecked: resolvedChecked,
+      isDisabled: resolvedDisabled,
       isFocusVisible: isFocusVisible || isFocusVisibleProp,
       isHovered: isHovered || isHoveredProp,
       isInvalid: isInvalid || isInvalidProp,
-      isReadOnly: isReadOnly || isReadOnlyProp,
-      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isReadOnly: resolvedReadOnly,
+      isIndeterminate: resolvedIndeterminate,
       isPressed,
       isFocused,
     };
@@ -57,33 +103,63 @@ export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, Che
 
     return (
       <CheckboxProvider value={contextValue}>
-        <Comp
-          {...(combinedProps as PressableProps)}
-          ref={mergedRef}
-          tabIndex={-1}
-          role="label"
-          // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
-          accessibilityRole="label"
-          {...mergeDataAttributes(
-            props,
-            dataAttributes({
-              checked: isChecked || isCheckedProp,
-              disabled: isDisabled || isDisabledProp,
-              hover: isHovered || isHoveredProp,
-              invalid: isInvalid || isInvalidProp,
-              readonly: isReadOnly || isReadOnlyProp,
-              active: isPressed,
-              focus: isFocused,
-              indeterminate: isIndeterminate || isIndeterminateProp,
-              focusVisible: isFocusVisible,
-            }),
-          )}
-        >
+        <>
           <VisuallyHidden>
-            <input {...groupItemInputProps} {...focusProps} ref={inputRef} />
+            <input
+              ref={inputRef as React.RefObject<HTMLInputElement>}
+              type="checkbox"
+              value={combinedProps.value}
+              checked={resolvedChecked}
+              disabled={resolvedDisabled}
+              tabIndex={-1}
+              aria-hidden
+              readOnly
+              style={{ pointerEvents: 'none' }}
+            />
           </VisuallyHidden>
-          {children}
-        </Comp>
+          <Comp
+            {...(combinedProps as PressableProps)}
+            {...inputAriaProps}
+            ref={mergedRef}
+            role="checkbox"
+            aria-checked={ariaChecked}
+            aria-disabled={resolvedDisabled || undefined}
+            accessibilityRole="checkbox"
+            accessibilityState={{
+              checked: resolvedIndeterminate ? 'mixed' : resolvedChecked,
+              disabled: resolvedDisabled,
+            }}
+            tabIndex={resolvedDisabled ? -1 : 0}
+            disabled={resolvedDisabled}
+            {...focusProps}
+            onPress={handleToggle}
+            onClick={handleToggle}
+            onKeyDown={composeEventHandlers(
+              (
+                combinedProps as {
+                  onKeyDown?: (e: { key: string; preventDefault: () => void }) => void;
+                }
+              ).onKeyDown,
+              handleKeyDown,
+            )}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                checked: resolvedChecked,
+                disabled: resolvedDisabled,
+                hover: isHovered || isHoveredProp,
+                invalid: isInvalid || isInvalidProp,
+                readonly: resolvedReadOnly,
+                active: isPressed,
+                focus: isFocused,
+                indeterminate: resolvedIndeterminate,
+                focusVisible: isFocusVisible || isFocusVisibleProp,
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </>
       </CheckboxProvider>
     );
   },

package/src/checkbox/useCheckboxRoot.ts

@@ -1,4 +1,4 @@
-import { useContext, useRef } from 'react';
+import { useCallback, useContext, useRef } from 'react';
 import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
 import { useCheckbox } from '@react-native-aria/checkbox';
 import { useHover } from '@react-native-aria/interactions';
@@ -16,29 +16,43 @@ export function useCheckboxRoot(
   { useInputRefForAria = false }: UseCheckboxRootOptions = {},
 ) {
   const formControlContext = useFormControlContext();
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
+
+  // Only pull field-state flags from FormControl — never spread the whole context
+  // (ids, setters, htmlProps) onto the host element.
+  const isInvalid = props.isInvalid ?? formControlContext.isInvalid;
+  const isReadOnly =
+    props.isReadOnly ?? formControlContext.isReadOnly ?? checkboxGroupContext?.state.isReadOnly;
+  const isDisabled =
+    props.isDisabled ?? formControlContext.isDisabled ?? checkboxGroupContext?.state.isDisabled;
+  const isIndeterminate = props.isIndeterminate;
 
-  const { isInvalid, isReadOnly, isIndeterminate, ...combinedProps } = {
-    ...formControlContext,
+  const combinedProps = {
     ...props,
+    isInvalid,
+    isReadOnly,
+    isDisabled,
+    isIndeterminate,
   };
 
-  const checkboxGroupContext = useContext(CheckboxGroupContext);
-
   const state = useToggleState({
-    ...combinedProps,
     defaultSelected: props.defaultIsChecked,
     isSelected: props.isChecked,
+    onChange: props.onChange,
+    isReadOnly,
+    isDisabled,
   });
 
   const rootRef = useRef(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const mergedRootRef = mergeRefs(ref as any, rootRef as any);
-  const ariaLabel = combinedProps['aria-label'] || combinedProps.value || 'Checkbox';
+  const ariaLabel = props['aria-label'] || props.value || 'Checkbox';
 
   const groupToggleState = useToggleState(
     checkboxGroupContext
       ? {
-          isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
+          isReadOnly: !!isReadOnly,
+          isDisabled: !!isDisabled,
           isSelected: checkboxGroupContext.state.isSelected(combinedProps.value),
           onChange(isSelected: boolean) {
             if (isSelected) {
@@ -52,23 +66,30 @@ export function useCheckboxRoot(
       : { isSelected: false },
   );
 
+  const toggleState = checkboxGroupContext ? groupToggleState : state;
+
   const { inputProps: groupItemInputProps } = useCheckbox(
     {
       ...combinedProps,
       'aria-label': ariaLabel,
-      ...(checkboxGroupContext && {
-        isReadOnly: isReadOnly || checkboxGroupContext.state.isReadOnly,
-        isDisabled: combinedProps.isDisabled || checkboxGroupContext.state.isDisabled,
-      }),
+      isReadOnly: !!isReadOnly,
+      isDisabled: !!isDisabled,
     } as any,
-    checkboxGroupContext ? groupToggleState : state,
+    toggleState,
     (useInputRefForAria ? inputRef : rootRef) as any,
   );
 
-  const { checked: isChecked, disabled: isDisabled } = groupItemInputProps;
+  const { checked: isChecked, disabled: isDisabledFromInput } = groupItemInputProps;
 
   const { hoverProps, isHovered } = useHover({}, rootRef);
 
+  const toggle = useCallback(() => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    toggleState.toggle();
+  }, [isDisabled, isReadOnly, toggleState]);
+
   return {
     combinedProps,
     isInvalid,
@@ -76,10 +97,11 @@ export function useCheckboxRoot(
     isIndeterminate,
     groupItemInputProps,
     isChecked,
-    isDisabled,
+    isDisabled: isDisabledFromInput,
     isHovered,
     hoverProps,
     mergedRef: mergedRootRef,
     inputRef,
+    toggle,
   };
 }

package/src/date-field/DateFieldHiddenInput.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef } from 'react';
+import { Platform, TextInput, type TextInputKeyPressEvent } from 'react-native';
+import { useDateFieldContext } from './context';
+
+/**
+ * Invisible input that owns keyboard focus while a segment is active.
+ * Kept always mounted (never conditionally unmounted) so focus/blur races
+ * cannot clear segment focus before keystrokes arrive.
+ *
+ * Value is synced to the segment draft so native backspace shortens the text
+ * via onChangeText (iOS number-pad has no delete key; phone-pad does).
+ */
+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 KEYBOARD_TYPE = Platform.select<'number-pad' | 'phone-pad'>({
+  ios: 'phone-pad',
+  default: 'number-pad',
+});
+
+export function DateFieldHiddenInput({ accessibilityLabel }: { accessibilityLabel: string }) {
+  const {
+    focusedSegmentIndex,
+    disabled,
+    readOnly,
+    segmentDraft,
+    handleSegmentInputChange,
+    handleSegmentBackspace,
+    focusNextEditableSegment,
+    focusPrevEditableSegment,
+    blurSegment,
+  } = useDateFieldContext();
+
+  const inputRef = useRef<TextInput>(null);
+  const suppressBlurRef = useRef(false);
+  const focusedIndexRef = useRef(focusedSegmentIndex);
+  focusedIndexRef.current = focusedSegmentIndex;
+
+  const isActive = focusedSegmentIndex != null && !disabled && !readOnly;
+  const draftDigits = 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') {
+      // When draft still has digits, onChangeText mirrors the shortened value.
+      // Only handle empty-draft backspace here (move to previous / clear).
+      if (draftDigits.length === 0) {
+        handleSegmentBackspace();
+      }
+      return;
+    }
+    if (key === 'ArrowRight') {
+      focusNextEditableSegment();
+      return;
+    }
+    if (key === 'ArrowLeft') {
+      focusPrevEditableSegment();
+    }
+  };
+
+  return (
+    <TextInput
+      testID="date-field-keyboard-input"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      ref={inputRef}
+      value={isActive ? draftDigits : ''}
+      editable={isActive}
+      showSoftInputOnFocus={isActive}
+      pointerEvents="none"
+      caretHidden
+      importantForAutofill="no"
+      autoComplete="off"
+      autoCorrect={false}
+      spellCheck={false}
+      keyboardType={KEYBOARD_TYPE}
+      inputMode="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);
+        });
+      }}
+    />
+  );
+}