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

package/src/button/ButtonRoot.tsx

@@ -59,11 +59,51 @@ export const ButtonRoot = forwardRef<React.ComponentRef<typeof Pressable>, Butto
       isFocusVisibleProp,
     ]);
 
-    const Comp = asChild ? Slot : Pressable;
+    if (asChild) {
+      // Dedicated asChild path: composing Button onto a child (e.g. `<Link>`) must not
+      // force `role="button"` or leak ButtonRoot's internal usePress/useHover/useFocus
+      // handlers onto it — doing so overrides the child's own role and behavior (DEVEX-6442).
+      // The hooks above still run unconditionally (rules of hooks) so ButtonProvider can
+      // expose interaction state to sub-components, but their handler props are
+      // intentionally not spread onto the child here.
+      const { onPress, ...restProps } = props;
+
+      const slotProps: Record<string, unknown> = {
+        ...restProps,
+        disabled: isDisabled,
+      };
+
+      // Only pass onPress when Button itself was given one — preserves the child's own
+      // handler (e.g. Link's navigation onPress) when Button has none of its own.
+      if (onPress) {
+        slotProps.onPress = onPress;
+      }
+
+      return (
+        <ButtonProvider value={contextValue}>
+          <Slot
+            ref={ref}
+            {...(slotProps as PressableProps)}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                hover: isHoveredProp || isHovered,
+                focus: isFocusedProp || isFocused,
+                active: isActiveProp || isActive,
+                disabled: !!isDisabled,
+                focusVisible: isFocusVisibleProp || isFocusVisible,
+              }),
+            )}
+          >
+            {typeof children === 'function' ? children(contextValue) : children}
+          </Slot>
+        </ButtonProvider>
+      );
+    }
 
     return (
       <ButtonProvider value={contextValue}>
-        <Comp
+        <Pressable
           ref={ref}
           role={props?.role || 'button'}
           disabled={isDisabled}
@@ -106,7 +146,7 @@ export const ButtonRoot = forwardRef<React.ComponentRef<typeof Pressable>, Butto
                 focusVisible: isFocusVisibleProp || isFocusVisible,
               })
             : children}
-        </Comp>
+        </Pressable>
       </ButtonProvider>
     );
   },

package/src/button/types.ts

@@ -3,18 +3,22 @@ import type { PressableProps } from 'react-native';
 export interface InterfaceButtonProps extends PressableProps {
   /**
    * If true, the button will be in hovered state.
+   * @internal
    */
   isHovered?: boolean;
   /**
    * If true, the button will be in pressed state.
+   * @internal
    */
   isActive?: boolean;
   /**
    * If true, the button will be focused.
+   * @internal
    */
   isFocused?: boolean;
   /**
    * If true, the button focus ring will be visible.
+   * @internal
    */
   isFocusVisible?: boolean;
   /**

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/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { useFormControlContext } from '@cdx-ui/utils';
+import { useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { useCheckboxGroup } from '@react-native-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { Slot } from '../slot';
@@ -15,6 +15,17 @@ export interface CheckboxGroupRootProps extends ICheckboxGroupProps {
 
 export const CheckboxGroup = forwardRef<View, CheckboxGroupRootProps>(
   ({ 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 ariaLabel = props['aria-label'];
+    const ariaLabelledBy = props['aria-labelledby'] ?? formControlProps['aria-labelledby'];
+    const ariaDescribedBy = formControlProps['aria-describedby'];
+
     const state = useCheckboxGroupState({
       ...props,
       validationState: props.isInvalid ? 'invalid' : 'valid',
@@ -23,13 +34,12 @@ export const CheckboxGroup = forwardRef<View, CheckboxGroupRootProps>(
     const { groupProps } = useCheckboxGroup(
       {
         ...props,
-        'aria-label': props['aria-label'],
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
       },
       state,
     );
 
-    const formControlContext = useFormControlContext();
-
     const contextValue = useMemo(
       () => ({ state: { ...formControlContext, ...state } }),
       [formControlContext, state],
@@ -39,7 +49,15 @@ export const CheckboxGroup = forwardRef<View, CheckboxGroupRootProps>(
 
     return (
       <CheckboxGroupContext.Provider value={contextValue}>
-        <Comp {...groupProps} className={className} style={style} ref={ref}>
+        <Comp
+          {...groupProps}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          className={className}
+          style={style}
+          ref={ref}
+        >
           {children}
         </Comp>
       </CheckboxGroupContext.Provider>

package/src/checkbox/CheckboxRoot.tsx

@@ -46,7 +46,7 @@ export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, Che
     const { focusProps, isFocused } = useFocus();
 
     const { pressProps, isPressed } = usePress({
-      isDisabled: isDisabled || isDisabledProp,
+      isDisabled: isDisabled || isDisabledProp || isReadOnly || isReadOnlyProp,
     });
 
     const contextValue: ICheckboxContextValue = {

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/types.ts

@@ -26,6 +26,7 @@ export interface ICheckboxGroupProps {
   isReadOnly?: boolean;
   isRequired?: boolean;
   'aria-label'?: string;
+  'aria-labelledby'?: string;
 }
 
 export type ICheckboxProps = InterfaceCheckbox;

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,34 +66,48 @@ 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 resolvedGroupItemInputProps = {
+    ...groupItemInputProps,
+    ...(isReadOnly && { 'aria-readonly': true }),
+  };
 
-  const { hoverProps, isHovered } = useHover({}, rootRef);
+  const { checked: isChecked, disabled: isDisabledFromInput } = resolvedGroupItemInputProps;
+
+  const { hoverProps, isHovered: isHoveredState } = useHover({}, rootRef);
+  const isHovered = isReadOnly ? false : isHoveredState;
+
+  const toggle = useCallback(() => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    toggleState.toggle();
+  }, [isDisabled, isReadOnly, toggleState]);
 
   return {
     combinedProps,
     isInvalid,
     isReadOnly,
     isIndeterminate,
-    groupItemInputProps,
+    groupItemInputProps: resolvedGroupItemInputProps,
     isChecked,
-    isDisabled,
+    isDisabled: isDisabledFromInput,
     isHovered,
     hoverProps,
     mergedRef: mergedRootRef,
     inputRef,
+    toggle,
   };
 }