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

package/lib/typescript/radio/useRadioRoot.d.ts

@@ -4,8 +4,10 @@ interface UseRadioRootOptions {
 }
 export declare function useRadioRoot(props: IRadioProps, ref?: React.Ref<unknown>, { useInputRefForAria }?: UseRadioRootOptions): {
     combinedProps: {
+        isInvalid: boolean | undefined;
+        isReadOnly: boolean;
+        isDisabled: boolean;
         value: string;
-        isDisabled?: boolean | undefined;
         isHovered?: boolean;
         isFocused?: boolean;
         isPressed?: boolean;
@@ -68,7 +70,7 @@ export declare function useRadioRoot(props: IRadioProps, ref?: React.Ref<unknown
         accessibilityShowsLargeContentViewer?: boolean | undefined;
         accessibilityLargeContentTitle?: string | undefined;
         accessibilityRespondsToUserInteraction?: boolean | undefined;
-        id?: string | undefined;
+        id?: string | undefined | undefined;
         onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined | undefined;
         testID?: string | undefined | undefined;
         nativeID?: string | undefined | undefined;
@@ -116,22 +118,6 @@ export declare function useRadioRoot(props: IRadioProps, ref?: React.Ref<unknown
         onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
         onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
         onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined | undefined;
-        hasFeedbackText?: boolean | undefined;
-        hasHelpText?: boolean | undefined;
-        setHasFeedbackText?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
-        setHasHelpText?: import("react").Dispatch<import("react").SetStateAction<boolean>> | undefined;
-        name?: string | undefined;
-        labelId?: string | undefined;
-        feedbackId?: string | undefined;
-        helpTextId?: string | undefined;
-        htmlProps?: {
-            [x: string]: unknown;
-        } | undefined;
-        inputRef?: React.RefObject<import("@cdx-ui/utils").Focusable | null> | undefined;
-        focusInput?: (() => void) | undefined;
-        isLabelFocused?: boolean | undefined;
-        setIsLabelFocused?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
-        isRequired?: boolean | undefined;
     };
     isInvalid: boolean;
     isReadOnly: boolean;

package/lib/typescript/radio/useRadioRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRadioRoot.d.ts","sourceRoot":"","sources":["../../../src/radio/useRadioRoot.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,WAAW,EAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EACxB,EAAE,kBAA0B,EAAE,GAAE,mBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDzD"}
+{"version":3,"file":"useRadioRoot.d.ts","sourceRoot":"","sources":["../../../src/radio/useRadioRoot.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,YAAY,CAC1B,KAAK,EAAE,WAAW,EAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EACxB,EAAE,kBAA0B,EAAE,GAAE,mBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6DzD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.141",
+  "version": "0.0.1-beta.142",
   "license": "MIT",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -61,8 +61,8 @@
     "@react-stately/checkbox": "3.7.4",
     "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/formatters": "0.0.1-beta.132",
-    "@cdx-ui/utils": "0.0.1-beta.141"
+    "@cdx-ui/formatters": "0.0.1-beta.133",
+    "@cdx-ui/utils": "0.0.1-beta.142"
   },
   "devDependencies": {
     "@types/react": "19.1.17",

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/radio/RadioGroup.tsx

@@ -1,12 +1,13 @@
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
-import { useFormControlContext } from '@cdx-ui/utils';
+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 } from './types';
+import type { IRadioGroupProps, RegisteredRadio } from './types';
+import { useRadioGroupNavigation } from './useRadioGroupNavigation';
 
 export interface RadioGroupRootProps extends IRadioGroupProps {
   asChild?: boolean;
@@ -16,30 +17,86 @@ export interface RadioGroupRootProps extends IRadioGroupProps {
 
 export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
   ({ asChild, children, className, style, ...props }, ref) => {
-    const formControlContext = useFormControlContext();
+    const formControlProps = useFormControl({
+      isDisabled: props.isDisabled,
+      isRequired: props.isRequired,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    });
 
-    const combinedProps = {
-      ...formControlContext,
-      ...props,
-    };
+    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({
-      ...combinedProps,
-      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
+      name,
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      validationState: isInvalid ? 'invalid' : 'valid',
     });
 
     const { radioGroupProps } = useRadioGroup(
       {
-        ...combinedProps,
-        'aria-label': combinedProps['aria-label'],
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        isDisabled,
       },
       radioGroupState,
     );
 
-    const isDisabled = combinedProps.isDisabled ?? false;
-    const isInvalid = combinedProps.isInvalid ?? false;
-    const isRequired = combinedProps.isRequired ?? false;
-    const isReadOnly = combinedProps.isReadOnly ?? false;
+    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;
 
@@ -55,18 +112,25 @@ export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
             selectValue: (value: string) => radioGroupState.setSelectedValue(value),
           },
           radioGroupState,
-          name: combinedProps.name,
+          name,
+          focusedValue,
+          setFocusedValue,
+          registerRadio,
+          unregisterRadio,
+          getRadios,
         }}
       >
         <Comp
           {...radioGroupProps}
-          aria-label={combinedProps['aria-label']}
-          aria-labelledby={combinedProps['aria-labelledby']}
+          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({