@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.180

package/src/radio/RadioGroup.tsx

@@ -0,0 +1,149 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { composeEventHandlers, useFormControl } from '@cdx-ui/utils';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext } from './context';
+import type { IRadioGroupProps, RegisteredRadio } from './types';
+import { useRadioGroupNavigation } from './useRadioGroupNavigation';
+
+export interface RadioGroupRootProps extends IRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const formControlProps = useFormControl({
+      isDisabled: props.isDisabled,
+      isRequired: props.isRequired,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    });
+
+    const isDisabled = props.isDisabled ?? Boolean(formControlProps.disabled);
+    const isInvalid = props.isInvalid ?? Boolean(formControlProps['aria-invalid']);
+    const isRequired = props.isRequired ?? Boolean(formControlProps.required);
+    const isReadOnly = props.isReadOnly ?? Boolean(formControlProps.readOnly);
+    const name = props.name ?? formControlProps.name;
+    const ariaLabel = props['aria-label'];
+    const ariaLabelledBy = props['aria-labelledby'] ?? formControlProps['aria-labelledby'];
+    const ariaDescribedBy = formControlProps['aria-describedby'];
+
+    const radioGroupState = useRadioGroupState({
+      name,
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      validationState: isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { radioGroupProps } = useRadioGroup(
+      {
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        isDisabled,
+      },
+      radioGroupState,
+    );
+
+    const [focusedValue, setFocusedValue] = useState<string | undefined>(undefined);
+    // Identity of getRadios depends on this so roving tabIndex recomputes after register/unregister.
+    const [registrationEpoch, setRegistrationEpoch] = useState(0);
+    const radiosRef = useRef<Map<string, RegisteredRadio>>(new Map());
+
+    useEffect(() => {
+      setFocusedValue((prev) =>
+        prev !== undefined && prev !== radioGroupState.selectedValue ? undefined : prev,
+      );
+    }, [radioGroupState.selectedValue]);
+
+    const registerRadio = useCallback((value: string, entry: RegisteredRadio) => {
+      radiosRef.current.set(value, entry);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const unregisterRadio = useCallback((value: string) => {
+      radiosRef.current.delete(value);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const getRadios = useCallback(
+      () => Array.from(radiosRef.current.entries()),
+      [registrationEpoch],
+    );
+
+    const { handleKeyDown } = useRadioGroupNavigation({
+      getRadios,
+      focusedValue,
+      setFocusedValue,
+      selectedValue: radioGroupState.selectedValue,
+      selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+    });
+
+    const webProps =
+      Platform.OS === 'web'
+        ? {
+            onKeyDown: composeEventHandlers(
+              (props as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+          }
+        : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          state: {
+            isDisabled,
+            isInvalid,
+            isRequired,
+            isReadOnly,
+            isSelected: (value: string) => radioGroupState.selectedValue === value,
+            selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+          },
+          radioGroupState,
+          name,
+          focusedValue,
+          setFocusedValue,
+          registerRadio,
+          unregisterRadio,
+          getRadios,
+        }}
+      >
+        <Comp
+          {...radioGroupProps}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          aria-required={isRequired || undefined}
+          aria-readonly={isReadOnly || undefined}
+          className={className}
+          style={style}
+          ref={ref}
+          {...webProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              invalid: isInvalid,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/radio/RadioRoot.tsx

@@ -0,0 +1,98 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      inputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useRadioRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp,
+    });
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as PressableProps)}
+          {...inputProps}
+          ref={mergedRef}
+          role="radio"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(onFocus, focusProps.onFocus)}
+          onBlur={composeEventHandlers(onBlur, focusProps.onBlur)}
+        >
+          {children}
+        </Comp>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/RadioRoot.web.tsx

@@ -0,0 +1,195 @@
+import { forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
+import { Pressable } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext, RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+import { getRovingFocusValue } from './useRadioGroupNavigation';
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+/**
+ * Web Radio root.
+ *
+ * On web, `@react-native-aria/radio` re-exports `@react-aria/radio`'s `useRadio`,
+ * whose `inputProps` target a native `<input type="radio">` (selection via
+ * `onChange`). Selection must be applied explicitly on the Pressable —
+ * `inputProps.onPress` does **not** call `setSelectedValue`.
+ */
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const radioGroupContext = useContext(RadioGroupContext);
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      inputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useRadioRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    const nodeRef = useRef<React.ComponentRef<typeof Pressable> | null>(null);
+    const setRefs = mergeRefs(mergedRef, nodeRef);
+
+    // 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
+    } = inputProps;
+
+    const resolvedDisabled = !!(isDisabled || isDisabledProp);
+    const resolvedReadOnly = !!(isReadOnly || isReadOnlyProp);
+
+    const selectThis = () => {
+      if (resolvedDisabled || resolvedReadOnly) {
+        return;
+      }
+      radioGroupContext?.radioGroupState.setSelectedValue(combinedProps.value);
+    };
+
+    const selectedValue = radioGroupContext?.radioGroupState.selectedValue;
+    const focusedValue = radioGroupContext?.focusedValue;
+    const registerRadio = radioGroupContext?.registerRadio;
+    const unregisterRadio = radioGroupContext?.unregisterRadio;
+    const getRadios = radioGroupContext?.getRadios;
+    const groupName = radioGroupContext?.name;
+
+    useEffect(() => {
+      if (!registerRadio || !unregisterRadio) {
+        return;
+      }
+
+      registerRadio(combinedProps.value, {
+        disabled: !!resolvedDisabled,
+        node: nodeRef.current as { focus?: () => void } | null,
+      });
+
+      return () => unregisterRadio(combinedProps.value);
+    }, [combinedProps.value, resolvedDisabled, registerRadio, unregisterRadio]);
+
+    const isRovingTabStop = useMemo(() => {
+      if (resolvedDisabled) {
+        return false;
+      }
+
+      const enabledRadios = getRadios?.().filter(([, entry]) => !entry.disabled) ?? [];
+      const rovingValue = getRovingFocusValue(focusedValue, selectedValue, enabledRadios);
+
+      return combinedProps.value === rovingValue;
+    }, [combinedProps.value, focusedValue, getRadios, resolvedDisabled, selectedValue]);
+
+    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {
+      if (event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        selectThis();
+      }
+    };
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: resolvedDisabled,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: resolvedReadOnly,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <>
+          <VisuallyHidden>
+            <input
+              ref={inputRef as React.RefObject<HTMLInputElement>}
+              type="radio"
+              name={groupName}
+              value={combinedProps.value}
+              checked={!!isChecked}
+              disabled={resolvedDisabled}
+              tabIndex={-1}
+              aria-hidden
+              readOnly
+              // Decorative form mirror — pointer events must not steal clicks from Pressable.
+              style={{ pointerEvents: 'none' }}
+            />
+          </VisuallyHidden>
+          <Comp
+            {...(combinedProps as object)}
+            {...inputAriaProps}
+            ref={setRefs}
+            role="radio"
+            aria-checked={isChecked}
+            aria-disabled={resolvedDisabled || undefined}
+            accessibilityRole="radio"
+            accessibilityState={{ checked: isChecked, disabled: resolvedDisabled }}
+            tabIndex={resolvedDisabled ? -1 : isRovingTabStop ? 0 : -1}
+            disabled={resolvedDisabled}
+            {...focusProps}
+            onPress={selectThis}
+            onClick={selectThis}
+            onKeyDown={composeEventHandlers(
+              (
+                combinedProps as {
+                  onKeyDown?: (e: { key: string; preventDefault: () => void }) => void;
+                }
+              ).onKeyDown,
+              handleKeyDown,
+            )}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                checked: isChecked,
+                disabled: resolvedDisabled,
+                hover: isHovered || isHoveredProp,
+                invalid: isInvalid || isInvalidProp,
+                readonly: resolvedReadOnly,
+                active: isPressed,
+                focus: isFocused,
+                focusVisible: isFocusVisible || isFocusVisibleProp,
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/context.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createContext } from '@cdx-ui/utils';
 import type { RadioGroupState } from '@react-stately/radio';
-import type { IRadioContextValue } from './types';
+import type { IRadioContextValue, RegisteredRadio } from './types';
 
 export const [RadioProvider, useRadioContext] = createContext<IRadioContextValue>('RadioContext');
 
@@ -18,4 +18,9 @@ export const RadioGroupContext = React.createContext<{
   state: IRadioGroupState;
   radioGroupState: RadioGroupState;
   name?: string;
+  focusedValue?: string | undefined;
+  setFocusedValue?: (value: string | undefined) => void;
+  registerRadio?: (value: string, entry: RegisteredRadio) => void;
+  unregisterRadio?: (value: string) => void;
+  getRadios?: () => [string, RegisteredRadio][];
 } | null>(null);

package/src/radio/index.ts

@@ -1,37 +1,5 @@
-import type React from 'react';
-import { createRadioGroup } from './createRadioGroup';
-import { createRadioIndicator } from './createRadioIndicator';
-import { createRadioLabel } from './createRadioLabel';
-import { createRadioRoot } from './createRadioRoot';
-import type { IRadioComponentType } from './types';
+export type { IRadioProps, IRadioGroupProps, IRadioContextValue } from './types';
 
-export type {
-  IRadioComponentType,
-  IRadioGroupProps,
-  IRadioIndicatorProps,
-  IRadioLabelProps,
-  IRadioProps,
-} from './types';
-
-export function createRadio<Root, Indicator, Label, Group>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Indicator: React.ComponentType<Indicator>;
-  Label: React.ComponentType<Label>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Indicator = createRadioIndicator(BaseComponents.Indicator);
-  const Radio = createRadioRoot(BaseComponents.Root, Indicator);
-  const Label = createRadioLabel(BaseComponents.Label);
-  const Group = createRadioGroup(BaseComponents.Group);
-
-  Radio.displayName = 'RadioPrimitive';
-  Indicator.displayName = 'RadioPrimitive.Indicator';
-  Label.displayName = 'RadioPrimitive.Label';
-  Group.displayName = 'RadioPrimitive.Group';
-
-  return Object.assign(Radio, {
-    Indicator,
-    Label,
-    Group,
-  }) as IRadioComponentType<Root, Indicator, Label, Group>;
-}
+export { useRadioContext } from './context';
+export { RadioRoot, type RadioRootProps } from './RadioRoot';
+export { RadioGroup, type RadioGroupRootProps } from './RadioGroup';

package/src/radio/types.ts

@@ -33,28 +33,6 @@ export interface IRadioGroupProps {
   children?: React.ReactNode;
 }
 
-export interface IRadioIndicatorProps {
-  children?: React.ReactNode;
-}
-
-export interface IRadioLabelProps {
-  children?: React.ReactNode;
-}
-
-export type IRadioComponentType<Root, Indicator, Label, Group> = React.ForwardRefExoticComponent<
-  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IRadioProps
-> & {
-  Indicator: React.ForwardRefExoticComponent<
-    React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & IRadioIndicatorProps
-  >;
-  Label: React.ForwardRefExoticComponent<
-    React.RefAttributes<Label> & React.PropsWithoutRef<Label> & IRadioLabelProps
-  >;
-  Group: React.ForwardRefExoticComponent<
-    React.RefAttributes<Group> & React.PropsWithoutRef<Group> & IRadioGroupProps
-  >;
-};
-
 export interface IRadioContextValue {
   isChecked?: boolean;
   isDisabled?: boolean;
@@ -65,3 +43,9 @@ export interface IRadioContextValue {
   isHovered?: boolean;
   isPressed?: boolean;
 }
+
+/** Web roving-focus registration entry for a single radio item. */
+export interface RegisteredRadio {
+  disabled: boolean;
+  node: { focus?: () => void } | null;
+}

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 };
+}