@cdx-ui/primitives 0.0.1-beta.98 → 0.1.0

package/src/radio/useRadioGroupNavigation.ts

@@ -0,0 +1,104 @@
+import { useCallback, useRef } from 'react';
+import type { RegisteredRadio } from './types';
+
+// Web-only — native platforms rely on OS-managed sequential focus (VoiceOver/TalkBack).
+
+function isEnabledRadioValue(
+  value: string | null | undefined,
+  enabledRadios: [string, RegisteredRadio][],
+): value is string {
+  return value != null && enabledRadios.some(([radioValue]) => radioValue === value);
+}
+
+/** Resolves which radio value should hold the roving tab stop / keyboard focus anchor. */
+export function getRovingFocusValue(
+  focusedValue: string | undefined,
+  selectedValue: string | null | undefined,
+  enabledRadios: [string, RegisteredRadio][],
+): string | undefined {
+  const defaultFocusValue = isEnabledRadioValue(selectedValue, enabledRadios)
+    ? selectedValue
+    : enabledRadios[0]?.[0];
+
+  const resolvedFocusedValue = isEnabledRadioValue(focusedValue, enabledRadios)
+    ? focusedValue
+    : undefined;
+
+  return resolvedFocusedValue ?? defaultFocusValue;
+}
+
+export interface UseRadioGroupNavigationOptions {
+  getRadios: () => [string, RegisteredRadio][];
+  focusedValue: string | undefined;
+  setFocusedValue: (value: string | undefined) => void;
+  selectedValue: string | null | undefined;
+  selectValue: (value: string) => void;
+}
+
+export function useRadioGroupNavigation({
+  getRadios,
+  focusedValue,
+  setFocusedValue,
+  selectedValue,
+  selectValue,
+}: UseRadioGroupNavigationOptions) {
+  const selectValueRef = useRef(selectValue);
+  selectValueRef.current = selectValue;
+
+  const getEnabledRadios = useCallback(
+    () => getRadios().filter(([, entry]) => !entry.disabled),
+    [getRadios],
+  );
+
+  const moveFocus = useCallback(
+    ([targetValue, targetEntry]: [string, RegisteredRadio]) => {
+      setFocusedValue(targetValue);
+      targetEntry.node?.focus?.();
+      selectValueRef.current(targetValue);
+    },
+    [setFocusedValue],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: { key: string; preventDefault: () => void }) => {
+      const enabledRadios = getEnabledRadios();
+      if (enabledRadios.length === 0) {
+        return;
+      }
+
+      const currentValue = getRovingFocusValue(focusedValue, selectedValue, enabledRadios);
+      const idx = enabledRadios.findIndex(([value]) => value === currentValue);
+
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowRight': {
+          e.preventDefault();
+          moveFocus(enabledRadios[idx < enabledRadios.length - 1 ? idx + 1 : 0]);
+          break;
+        }
+        case 'ArrowUp':
+        case 'ArrowLeft': {
+          e.preventDefault();
+          moveFocus(enabledRadios[idx > 0 ? idx - 1 : enabledRadios.length - 1]);
+          break;
+        }
+        case 'Home': {
+          e.preventDefault();
+          moveFocus(enabledRadios[0]);
+          break;
+        }
+        case 'End': {
+          e.preventDefault();
+          const last = enabledRadios.at(-1);
+          if (last) {
+            moveFocus(last);
+          }
+          break;
+        }
+      }
+    },
+    [focusedValue, selectedValue, getEnabledRadios, moveFocus],
+  );
+
+  return { handleKeyDown };
+}

package/src/radio/useRadioRoot.ts

@@ -15,12 +15,6 @@ export function useRadioRoot(
   { useInputRefForAria = false }: UseRadioRootOptions = {},
 ) {
   const formControlContext = useFormControlContext();
-
-  const { isInvalid, isReadOnly, ...combinedProps } = {
-    ...formControlContext,
-    ...props,
-  };
-
   const radioGroupContext = useContext(RadioGroupContext);
 
   if (!radioGroupContext) {
@@ -29,17 +23,30 @@ export function useRadioRoot(
     );
   }
 
+  const isInvalid = props.isInvalid ?? formControlContext.isInvalid;
+  const isReadOnly =
+    props.isReadOnly ?? formControlContext.isReadOnly ?? radioGroupContext.state.isReadOnly;
+  const isDisabled =
+    props.isDisabled ?? formControlContext.isDisabled ?? radioGroupContext.state.isDisabled;
+
+  const combinedProps = {
+    ...props,
+    isInvalid,
+    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 || 'Radio';
+  const ariaLabel = props['aria-label'] || props.value || 'Radio';
 
   const radio = useRadio(
     {
       ...combinedProps,
       'aria-label': ariaLabel,
-      isReadOnly: isReadOnly || radioGroupContext.state.isReadOnly,
-      isDisabled: combinedProps.isDisabled || radioGroupContext.state.isDisabled,
+      isReadOnly,
+      isDisabled,
     } as any,
     radioGroupContext.radioGroupState,
     (useInputRefForAria ? inputRef : rootRef) as any,
@@ -49,7 +56,7 @@ export function useRadioRoot(
     labelProps?: Record<string, unknown>;
   };
 
-  const { checked: isChecked, disabled: isDisabled } = inputProps;
+  const { checked: isChecked, disabled: isDisabledFromInput } = inputProps;
 
   const { hoverProps, isHovered } = useHover({}, rootRef);
 
@@ -60,7 +67,7 @@ export function useRadioRoot(
     inputProps,
     labelProps: labelProps ?? {},
     isChecked,
-    isDisabled,
+    isDisabled: isDisabledFromInput,
     isHovered,
     hoverProps,
     mergedRef: mergedRootRef,

package/src/range-calendar/RangeCalendarRoot.tsx

@@ -0,0 +1,213 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  normalizeDateRange,
+  resolveDateComponentLabels,
+  todayMonthId,
+  toMonthId,
+  type DateComponentLabels,
+  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 type { CalendarView } from '../calendar/context';
+import { RangeCalendarContext, type RangeCalendarFocus } from './context';
+
+export interface RangeCalendarRootProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+  startValue?: DateId;
+  endValue?: DateId;
+  defaultStartValue?: DateId;
+  defaultEndValue?: DateId;
+  onRangeChange?: (range: { startId?: DateId; endId?: DateId }) => void;
+  monthId?: MonthId;
+  defaultMonthId?: MonthId;
+  onMonthIdChange?: (monthId: MonthId) => void;
+  focusedField?: RangeCalendarFocus;
+  defaultFocusedField?: RangeCalendarFocus;
+  onFocusedFieldChange?: (field: RangeCalendarFocus) => 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;
+  locale?: string;
+  labels?: Partial<DateComponentLabels>;
+  /** Accessible name for the range-calendar region. */
+  accessibilityLabel?: string;
+}
+
+export const RangeCalendarRoot = forwardRef<ComponentRef<typeof View>, RangeCalendarRootProps>(
+  (props, ref) => {
+    const {
+      asChild,
+      children,
+      startValue: startProp,
+      endValue: endProp,
+      defaultStartValue,
+      defaultEndValue,
+      onRangeChange,
+      monthId: monthIdProp,
+      defaultMonthId,
+      onMonthIdChange,
+      focusedField: focusedProp,
+      defaultFocusedField = 'start',
+      onFocusedFieldChange,
+      minValue,
+      maxValue,
+      disabled = false,
+      locale = 'en-US',
+      labels: labelsProp,
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+      ...rest
+    } = props;
+
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+    const accessibilityLabel = resolveAccessibleLabel({
+      accessibilityLabel: accessibilityLabelProp,
+      'aria-label': ariaLabelProp,
+    });
+
+    const isRangeControlled = 'startValue' in props || 'endValue' in props;
+    const [uncontrolledStart, setUncontrolledStart] = useState<DateId | undefined>(
+      defaultStartValue,
+    );
+    const [uncontrolledEnd, setUncontrolledEnd] = useState<DateId | undefined>(defaultEndValue);
+
+    const startId = isRangeControlled ? startProp : uncontrolledStart;
+    const endId = isRangeControlled ? endProp : uncontrolledEnd;
+
+    const [monthId, setMonthId] = useControllableState<MonthId>({
+      prop: monthIdProp,
+      defaultProp:
+        defaultMonthId ??
+        (startId ? toMonthId(startId) : endId ? toMonthId(endId) : todayMonthId()),
+      onChange: onMonthIdChange,
+    });
+
+    const prevRangeRef = useRef({ startId, endId });
+    useEffect(() => {
+      if (monthIdProp !== undefined) {
+        prevRangeRef.current = { startId, endId };
+        return;
+      }
+      if (prevRangeRef.current.startId === startId && prevRangeRef.current.endId === endId) {
+        return;
+      }
+      prevRangeRef.current = { startId, endId };
+      const anchor = startId ?? endId;
+      if (anchor !== undefined) {
+        setMonthId(toMonthId(anchor));
+      }
+    }, [endId, monthIdProp, setMonthId, startId]);
+
+    const [focusedField, setFocusedField] = useControllableState<RangeCalendarFocus>({
+      prop: focusedProp,
+      defaultProp: defaultFocusedField,
+      onChange: onFocusedFieldChange,
+    });
+
+    const [view, setViewState] = useState<CalendarView>('month');
+
+    const setView = useCallback((next: CalendarView) => {
+      setViewState(next);
+    }, []);
+
+    const onDayPress = useCallback(
+      (dateId: DateId) => {
+        if (disabled) {
+          return;
+        }
+
+        let next: { startId: DateId; endId?: DateId };
+
+        // Empty or complete range → start a new selection at this day.
+        if (!startId || endId) {
+          next = { startId: dateId, endId: undefined };
+          setFocusedField('end');
+        } else {
+          // Incomplete range (start only) → set end and normalize order.
+          next = normalizeDateRange({ startId, endId: dateId });
+          setFocusedField('start');
+        }
+
+        if (!isRangeControlled) {
+          setUncontrolledStart(next.startId);
+          setUncontrolledEnd(next.endId);
+        }
+        onRangeChange?.(next);
+      },
+      [disabled, endId, isRangeControlled, onRangeChange, setFocusedField, startId],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        startId,
+        endId,
+        onRangeChange,
+        monthId: monthId ?? todayMonthId(),
+        onMonthIdChange: setMonthId,
+        focusedField: focusedField ?? 'start',
+        onFocusedFieldChange: setFocusedField,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        onDayPress,
+        view,
+        setView,
+      }),
+      [
+        startId,
+        endId,
+        onRangeChange,
+        monthId,
+        setMonthId,
+        focusedField,
+        setFocusedField,
+        minValue,
+        maxValue,
+        disabled,
+        locale,
+        labels,
+        onDayPress,
+        view,
+        setView,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <RangeCalendarContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          accessibilityRole="none"
+          {...rest}
+          {...mergeDataAttributes(rest, dataAttributes({ disabled }))}
+          {...accessibleLabelAttributes(accessibilityLabel)}
+        >
+          {children}
+        </Comp>
+      </RangeCalendarContext.Provider>
+    );
+  },
+);
+
+RangeCalendarRoot.displayName = 'RangeCalendarRoot';

package/src/range-calendar/context.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react';
+import type { DateComponentLabels, DateId, MonthId } from '@cdx-ui/formatters';
+import type { CalendarView } from '../calendar/context';
+
+export type RangeCalendarFocus = 'start' | 'end';
+
+export interface RangeCalendarContextValue {
+  startId?: DateId;
+  endId?: DateId;
+  onRangeChange?: (range: { startId?: DateId; endId?: DateId }) => void;
+  monthId: MonthId;
+  onMonthIdChange: (monthId: MonthId) => void;
+  focusedField: RangeCalendarFocus;
+  onFocusedFieldChange: (field: RangeCalendarFocus) => void;
+  minValue?: DateId;
+  maxValue?: DateId;
+  disabled: boolean;
+  locale: string;
+  labels: DateComponentLabels;
+  onDayPress: (dateId: DateId) => void;
+  view: CalendarView;
+  setView: (view: CalendarView) => void;
+}
+
+export const RangeCalendarContext = createContext<RangeCalendarContextValue | null>(null);
+
+export function useRangeCalendarContext(): RangeCalendarContextValue {
+  const ctx = useContext(RangeCalendarContext);
+  if (!ctx) {
+    throw new Error('RangeCalendar compound components must be used within RangeCalendarRoot');
+  }
+  return ctx;
+}

package/src/range-calendar/index.ts

@@ -0,0 +1,4 @@
+export { RangeCalendarRoot } from './RangeCalendarRoot';
+export type { RangeCalendarRootProps } from './RangeCalendarRoot';
+export { useRangeCalendarContext } from './context';
+export type { RangeCalendarFocus } from './context';

package/src/select/SelectContent.tsx

@@ -1,13 +1,8 @@
 import React, { forwardRef, useCallback, useRef, type ComponentRef } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
-import {
-  OverlayContainer,
-  useAnchorPosition,
-  useDismissOverlay,
-  useOverlayPosition,
-} from '../overlay';
+import { OverlayContainer, useAnchoredOverlay, useDismissOverlay } from '../overlay';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { useSelectContext } from './context';
@@ -21,7 +16,21 @@ export interface SelectContentProps extends ISelectContentProps {
 }
 
 export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContentProps>(
-  ({ asChild, children, enteringAnimation, exitingAnimation, ...props }, ref) => {
+  (
+    {
+      asChild,
+      children,
+      enteringAnimation,
+      exitingAnimation,
+      onLayout,
+      style,
+      placement = 'bottom-start',
+      offset = 4,
+      crossOffset = 0,
+      ...props
+    },
+    ref,
+  ) => {
     const {
       open,
       setOpen,
@@ -49,14 +58,24 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       }
     }, []);
 
-    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>);
-
     const dismiss = useCallback(() => setOpen(false), [setOpen]);
 
-    const anchorLayout = useAnchorPosition(triggerRef, open);
-    const position = useOverlayPosition(anchorLayout);
+    const overlayOpen = open && !native;
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: overlayStyle,
+      position,
+    } = useAnchoredOverlay(triggerRef, overlayOpen, {
+      placement,
+      offset,
+      crossOffset,
+      collisionBehavior: 'flip-shift',
+      width: 'anchor',
+    });
+    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>, floatingRef);
 
-    useDismissOverlay(open, contentRef, [triggerRef], dismiss);
+    useDismissOverlay(overlayOpen, contentRef, [triggerRef], dismiss);
 
     const { handleKeyDown } = useListboxNavigation({
       items,
@@ -77,7 +96,7 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       setActiveValue,
     });
 
-    if (native || !open || !position) {
+    if (!overlayOpen) {
       return null;
     }
 
@@ -99,18 +118,26 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
         onDismiss={dismiss}
         entering={enteringAnimation ?? FadeIn.duration(150)}
         exiting={exitingAnimation ?? FadeOut.duration(100)}
-        style={position.style}
       >
         <Comp
           ref={mergedRef}
+          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+          style={[style, overlayStyle]}
           role="listbox"
           id={contentId}
           aria-labelledby={triggerId}
           {...props}
-          {...mergeDataAttributes(props, dataAttributes({ state: 'open' }))}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              state: 'open',
+              side: position?.resolvedPlacement.side,
+              align: position?.resolvedPlacement.align,
+            }),
+          )}
           {...webProps}
         >
-          <ScrollView scrollEventThrottle={16}>{children}</ScrollView>
+          {children}
         </Comp>
       </OverlayContainer>
     );

package/src/select/SelectRoot.tsx

@@ -28,7 +28,7 @@ export const SelectRoot = forwardRef<ComponentRef<typeof View>, SelectRootProps>
       value: valueProp,
       defaultValue,
       onValueChange,
-      open: openProp,
+      isOpen: openProp,
       defaultOpen = false,
       onOpenChange,
       disabled = false,

package/src/select/SelectTrigger.web.tsx

@@ -3,7 +3,12 @@ import { type PressableProps, StyleSheet } from 'react-native';
 import { Slot } from '../slot';
 import type { InteractionState } from '../types';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
-import { domDataAttributes } from '../utils/domDataAttributes';
+import {
+  domDataAttributes,
+  mergeDomDataAttributes,
+  type DomDataAttributeValue,
+} from '../utils/domDataAttributes';
+import { mapViewPropsToDom } from '../utils/mapViewPropsToDom';
 import type { ISelectTriggerProps } from './types';
 import { useSelectTrigger } from './useSelectTrigger';
 
@@ -12,55 +17,8 @@ export interface SelectTriggerProps extends Omit<ISelectTriggerProps, 'children'
   children?: ((state: InteractionState) => ReactNode) | ReactNode;
 }
 
-/** Props that must not be forwarded to a DOM `<button>`. */
-const OMIT = new Set<string>([
-  'hitSlop',
-  'pressRetentionOffset',
-  'android_ripple',
-  'android_disableSound',
-  'unstable_pressDelay',
-  'onLongPress',
-  'delayLongPress',
-  'onPress',
-  'onPressIn',
-  'onPressOut',
-  'onHoverIn',
-  'onHoverOut',
-  'onKeyDown',
-  'onFocus',
-  'onBlur',
-  'disabled',
-  'style',
-  'className',
-  'testID',
-  'children',
-  'accessible',
-  'accessibilityActions',
-  'accessibilityElementsHidden',
-  'accessibilityHint',
-  'accessibilityIgnoresInvertColors',
-  'accessibilityLabel',
-  'accessibilityLabelledBy',
-  'accessibilityLiveRegion',
-  'accessibilityRole',
-  'accessibilityState',
-  'accessibilityValue',
-  'accessibilityViewIsModal',
-  'importantForAccessibility',
-  'needsOffscreenAlphaCompositing',
-  'collapsable',
-  'shouldRasterizeIOS',
-  'removeClippedSubviews',
-  'onAccessibilityAction',
-  'onAccessibilityEscape',
-  'onAccessibilityTap',
-  'dataSet',
-]);
-
-function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
-  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
-  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
-}
+/** Host keys remapped onto the native `<button>` after `mapViewPropsToDom`. */
+const SELECT_TRIGGER_DOM_OMIT = ['onKeyDown', 'onFocus', 'onBlur', 'disabled'] as const;
 
 /** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
 const webButtonLayoutStyle: React.CSSProperties = {
@@ -172,33 +130,31 @@ export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
       );
     }
 
-    const dataAttrs = domDataAttributes(
-      dataAttrValues as unknown as Record<string, boolean | string | undefined>,
-    );
-
     /**
      * Native `<button>` host so the trigger is HTML-labelable. We map Pressable-style handlers
      * to DOM events at the boundary, filter out RN-only props, and apply the layout shim that
      * neutralizes UA `<button>` defaults that fight our flex + `justify-between` layout.
      */
-    const { style, className, testID, ...buttonRest } = rest as PressableProps & {
+    const { style, className, ...buttonRest } = rest as PressableProps & {
       className?: string;
-      testID?: string;
     };
 
-    const domProps = filterDomProps(buttonRest);
+    const mapped = mapViewPropsToDom(buttonRest, { extraOmit: SELECT_TRIGGER_DOM_OMIT });
     const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
 
     return (
       <button
         ref={mergedRef as React.Ref<HTMLButtonElement>}
-        {...domProps}
-        {...dataAttrs}
+        {...mapped}
+        {...mergeDomDataAttributes(
+          buttonRest as Record<string, unknown>,
+          mapped,
+          domDataAttributes(dataAttrValues as unknown as Record<string, DomDataAttributeValue>),
+        )}
         type="button"
         {...ariaProps}
         className={typeof className === 'string' ? className : undefined}
         style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
-        data-testid={testID}
         onClick={(e) => {
           if (!ariaProps.disabled) {
             handlers.onPress(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);