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

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

@@ -0,0 +1,68 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { useCheckboxGroup } from '@react-native-aria/checkbox';
+import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { Slot } from '../slot';
+import { CheckboxGroupContext } from './context';
+import type { ICheckboxGroupProps } from './types';
+
+export interface CheckboxGroupRootProps extends ICheckboxGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+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',
+    });
+
+    const { groupProps } = useCheckboxGroup(
+      {
+        ...props,
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+      },
+      state,
+    );
+
+    const contextValue = useMemo(
+      () => ({ state: { ...formControlContext, ...state } }),
+      [formControlContext, state],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <CheckboxGroupContext.Provider value={contextValue}>
+        <Comp
+          {...groupProps}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
+          className={className}
+          style={style}
+          ref={ref}
+        >
+          {children}
+        </Comp>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/src/checkbox/CheckboxRoot.tsx

@@ -0,0 +1,102 @@
+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 { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+export interface CheckboxRootProps extends ICheckboxProps {
+  asChild?: boolean;
+}
+
+export const CheckboxRoot = forwardRef<React.ComponentRef<typeof Pressable>, CheckboxRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useCheckboxRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp || isReadOnly || isReadOnlyProp,
+    });
+
+    const contextValue: ICheckboxContextValue = {
+      isChecked: isChecked || isCheckedProp,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isIndeterminate: isIndeterminate || isIndeterminateProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...(combinedProps as PressableProps)}
+          {...groupItemInputProps}
+          ref={mergedRef}
+          role="checkbox"
+          {...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: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(composeEventHandlers(onFocus, focusProps.onFocus))}
+          onBlur={composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur))}
+        >
+          {children}
+        </Comp>
+      </CheckboxProvider>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/CheckboxRoot.web.tsx

@@ -0,0 +1,168 @@
+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';
+import { CheckboxProvider } from './context';
+import type { ICheckboxProps, ICheckboxContextValue } from './types';
+import { useCheckboxRoot } from './useCheckboxRoot';
+
+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 {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isChecked: isCheckedProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isIndeterminate: isIndeterminateProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      isIndeterminate,
+      groupItemInputProps,
+      isChecked,
+      isDisabled,
+      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: resolvedChecked,
+      isDisabled: resolvedDisabled,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: resolvedReadOnly,
+      isIndeterminate: resolvedIndeterminate,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <CheckboxProvider value={contextValue}>
+        <>
+          <VisuallyHidden>
+            <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>
+          <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>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'CheckboxRoot';

package/src/checkbox/index.ts

@@ -1,43 +1,5 @@
-import type React from 'react';
-import { createCheckboxGroup } from './createCheckboxGroup';
-import { createCheckboxIcon } from './createCheckboxIcon';
-import { createCheckboxIndicator } from './createCheckboxIndicator';
-import { createCheckboxLabel } from './createCheckboxLabel';
-import { createCheckboxRoot } from './createCheckboxRoot';
-import type { ICheckboxComponentType } from './types';
+export type { ICheckboxContextValue, ICheckboxGroupProps, ICheckboxProps } from './types';
 
-export type {
-  ICheckboxComponentType,
-  ICheckboxGroupProps,
-  ICheckboxIconProps,
-  ICheckboxIndicatorProps,
-  ICheckboxLabelProps,
-  ICheckboxProps,
-} from './types';
-
-export function createCheckbox<Root, Indicator, Icon, Label, Group>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Indicator: React.ComponentType<Indicator>;
-  Icon: React.ComponentType<Icon>;
-  Label: React.ComponentType<Label>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Checkbox = createCheckboxRoot(BaseComponents.Root);
-  const Indicator = createCheckboxIndicator(BaseComponents.Indicator);
-  const Icon = createCheckboxIcon(BaseComponents.Icon);
-  const Label = createCheckboxLabel(BaseComponents.Label);
-  const Group = createCheckboxGroup(BaseComponents.Group);
-
-  Checkbox.displayName = 'CheckboxPrimitive';
-  Indicator.displayName = 'CheckboxPrimitive.Indicator';
-  Icon.displayName = 'CheckboxPrimitive.Icon';
-  Label.displayName = 'CheckboxPrimitive.Label';
-  Group.displayName = 'CheckboxPrimitive.Group';
-
-  return Object.assign(Checkbox, {
-    Indicator,
-    Icon,
-    Label,
-    Group,
-  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
-}
+export { useCheckboxContext } from './context';
+export { CheckboxRoot, type CheckboxRootProps } from './CheckboxRoot';
+export { CheckboxGroup, type CheckboxGroupRootProps } from './CheckboxGroup';

package/src/checkbox/types.ts

@@ -1,4 +1,5 @@
 import type { PressableProps } from 'react-native';
+
 export interface InterfaceCheckbox extends PressableProps {
   value: string;
   onChange?: (isSelected: boolean) => void;
@@ -25,38 +26,7 @@ export interface ICheckboxGroupProps {
   isReadOnly?: boolean;
   isRequired?: boolean;
   'aria-label'?: string;
-}
-
-export type ICheckboxComponentType<Root, Indicator, Icon, Label, Group> =
-  React.ForwardRefExoticComponent<
-    React.RefAttributes<Root> & React.PropsWithoutRef<Root> & InterfaceCheckbox
-  > & {
-    Indicator: React.ForwardRefExoticComponent<
-      React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & ICheckboxIndicatorProps
-    >;
-    Icon: React.ForwardRefExoticComponent<
-      React.RefAttributes<Icon> & React.PropsWithoutRef<Icon> & ICheckboxIconProps
-    >;
-    Label: React.ForwardRefExoticComponent<
-      React.RefAttributes<Label> & React.PropsWithoutRef<Label> & ICheckboxLabelProps
-    >;
-    Group: React.ForwardRefExoticComponent<
-      React.RefAttributes<Group> & React.PropsWithoutRef<Group> & ICheckboxGroupProps
-    >;
-  };
-
-export interface ICheckboxIndicatorProps {
-  children?: React.ReactNode;
-}
-
-export interface ICheckboxIconProps {
-  children?: React.ReactNode;
-  /** Render the icon even when unchecked */
-  forceMount?: boolean;
-}
-
-export interface ICheckboxLabelProps {
-  children?: React.ReactNode;
+  '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,
   };
 }