@cdx-ui/primitives 0.0.1-beta.6 → 0.0.1-beta.61

package/src/dialog/types.ts

@@ -24,8 +24,19 @@ export interface IDialogTriggerProps extends PressableProps {
   readonly asChild?: boolean;
 }
 
-export interface IDialogContentProps extends ViewProps {
+export interface IDialogPopupProps extends ViewProps {
   readonly forceMount?: boolean;
+  /**
+   * Whether the popup shifts up to clear the on-screen keyboard (native only).
+   * No-op on web. Defaults to `true`.
+   */
+  readonly avoidKeyboard?: boolean;
+  /**
+   * Distance (in px) between the keyboard and the popup when keyboard avoidance
+   * is active. Forwarded to the underlying keyboard-avoiding layer on native.
+   * Defaults to `0`.
+   */
+  readonly keyboardVerticalOffset?: number;
 }
 
 export interface IDialogOverlayProps extends PressableProps {}
@@ -36,7 +47,7 @@ export interface IDialogTitleProps extends TextProps {}
 
 export interface IDialogDescriptionProps extends TextProps {}
 
-export interface IDialogBodyProps extends ViewProps {}
+export interface IDialogContentProps extends ViewProps {}
 
 export interface IDialogFooterProps extends ViewProps {}
 
@@ -48,14 +59,14 @@ export interface IDialogCloseProps extends PressableProps {
 export type IDialogComponentType<
   RootProps,
   TriggerProps,
-  ContentProps,
+  PopupProps,
   HeaderProps,
   TitleProps,
   DescriptionProps,
-  BodyProps,
+  ContentProps,
   FooterProps,
   CloseProps,
-  ContentRef = unknown,
+  PopupRef = unknown,
   TriggerRef = unknown,
   CloseRef = unknown,
 > = React.ForwardRefExoticComponent<
@@ -64,8 +75,8 @@ export type IDialogComponentType<
   Trigger: React.ForwardRefExoticComponent<
     PropsWithoutRef<TriggerProps & IDialogTriggerProps> & RefAttributes<TriggerRef>
   >;
-  Content: React.ForwardRefExoticComponent<
-    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<ContentRef>
+  Popup: React.ForwardRefExoticComponent<
+    PropsWithoutRef<PopupProps & IDialogPopupProps> & RefAttributes<PopupRef>
   >;
   Header: React.ForwardRefExoticComponent<
     PropsWithoutRef<HeaderProps & IDialogHeaderProps> & RefAttributes<unknown>
@@ -76,8 +87,8 @@ export type IDialogComponentType<
   Description: React.ForwardRefExoticComponent<
     PropsWithoutRef<DescriptionProps & IDialogDescriptionProps> & RefAttributes<unknown>
   >;
-  Body: React.ForwardRefExoticComponent<
-    PropsWithoutRef<BodyProps & IDialogBodyProps> & RefAttributes<unknown>
+  Content: React.ForwardRefExoticComponent<
+    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<unknown>
   >;
   Footer: React.ForwardRefExoticComponent<
     PropsWithoutRef<FooterProps & IDialogFooterProps> & RefAttributes<unknown>

package/src/field/createFieldLabel.tsx

@@ -20,7 +20,10 @@ export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
           {...(props as T)}
           id={labelId}
           htmlFor={htmlFor}
-          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+          {...dataAttributes({
+            invalid: field.isInvalid,
+            required: field.isRequired,
+          })}
         >
           {children}
           {field.isRequired ? requiredIndicator : null}

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './avatar';
 export * from './button';
+export * from './chip';
 export * from './checkbox';
 export * from './dialog';
 export * from './field';
@@ -11,6 +12,9 @@ export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './tile';
 export * from './progress';
+export * from './radio';
 export type { InteractionState } from './types';
 export { dataAttributes } from './utils/dataAttributes';
+export { domDataAttributes, type DomDataAttributeValue } from './utils/domDataAttributes';

package/src/input/createInputField.tsx

@@ -49,8 +49,14 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       const field = useFormControlContext();
 
+      const reportLabelFocus = (focused: boolean) => {
+        const active = focused && !(isDisabled || inputProps.disabled);
+        field.setIsLabelFocused?.(active);
+      };
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
+        reportLabelFocus(focusState);
         callback();
       };
 

package/src/link/context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from '@cdx-ui/utils';
+
+export interface LinkInteractionState {
+  hover: boolean;
+  visited: boolean;
+  focusVisible: boolean;
+}
+
+export const [LinkInteractionProvider, useLinkInteractionContext] =
+  createContext<LinkInteractionState>('LinkInteractionContext');

package/src/link/createLink.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { composeEventHandlers } from '@cdx-ui/utils';
 import { useFocusRing, useFocus } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { dataAttributes } from '../utils/dataAttributes';
+import { LinkInteractionProvider } from './context';
 import { useLink } from './useLink';
 import type { ILinkProps } from './types';
 
@@ -15,6 +16,7 @@ export const createLink = <RootT, R = unknown>({ Root }: { Root: React.Component
         isPressed: isPressedProp,
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
+        isVisited: isVisitedProp,
         href,
         onPress,
         action,
@@ -38,34 +40,50 @@ export const createLink = <RootT, R = unknown>({ Root }: { Root: React.Component
         webProps,
       });
 
+      const hover = isHoveredProp || isHovered;
+      const visited = isVisitedProp ?? false;
+      const focusVisible = isFocusVisibleProp || isFocusVisible;
+
+      const interactionState = useMemo(
+        () => ({
+          hover,
+          visited,
+          focusVisible,
+        }),
+        [hover, visited, focusVisible],
+      );
+
       const interactionAttrs = dataAttributes({
-        hover: isHoveredProp || isHovered,
+        hover,
         focus: isFocusedProp || isFocused,
         active: isPressedProp || isPressed,
-        focusVisible: isFocusVisibleProp || isFocusVisible,
+        focusVisible,
+        visited,
       });
 
       return (
-        <Root
-          ref={ref}
-          {...interactionAttrs}
-          {...linkProps}
-          {...(props as RootT)}
-          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
-          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
-          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
-          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
-          onFocus={composeEventHandlers(
-            composeEventHandlers(props?.onFocus, focusProps.onFocus),
-            focusRingProps.onFocus,
-          )}
-          onBlur={composeEventHandlers(
-            composeEventHandlers(props?.onBlur, focusProps.onBlur),
-            focusRingProps.onBlur,
-          )}
-        >
-          {children}
-        </Root>
+        <LinkInteractionProvider value={interactionState}>
+          <Root
+            ref={ref}
+            {...interactionAttrs}
+            {...linkProps}
+            {...(props as RootT)}
+            onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(props?.onFocus, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(props?.onBlur, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+          >
+            {children}
+          </Root>
+        </LinkInteractionProvider>
       );
     },
   );

package/src/link/index.tsx

@@ -1,4 +1,6 @@
 export { createLink } from './createLink';
+export { LinkInteractionProvider, useLinkInteractionContext } from './context';
+export type { LinkInteractionState } from './context';
 export { LinkProvider } from './LinkProvider';
 export type { LinkConfig } from './LinkProvider';
 export { useLink } from './useLink';

package/src/link/types.ts

@@ -32,6 +32,7 @@ export interface ILinkProps extends PressableProps {
   isHovered?: boolean;
   isFocused?: boolean;
   isFocusVisible?: boolean;
+  isVisited?: boolean;
   /**
    * HTML anchor attributes applied only on web. Ignored on native platforms.
    * `target`, `rel`, and `download` are forwarded via react-native-web's `hrefAttrs`.

package/src/list-item/createListItemRoot.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, useMemo } from 'react';
 import type { PressableProps } from 'react-native';
 import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
 import { useHover, usePress } from '@react-native-aria/interactions';
 import { dataAttributes } from '../utils/dataAttributes';
 import { ListItemProvider } from './context';
@@ -8,14 +9,12 @@ import type { IListItemProps, IListItemPressablePassthrough } from './types';
 
 function listItemRootDataAttrs(
   size: IListItemProps['size'],
-  surface: IListItemProps['surface'],
   showSeparator: boolean | undefined,
   crossAlign: IListItemProps['crossAlign'],
 ) {
   return dataAttributes({
     slot: 'list-item',
     size: size ?? 'default',
-    surface: surface ?? 'default',
     separator: showSeparator ?? true,
     crossAlign: crossAlign ?? 'center',
   });
@@ -40,48 +39,79 @@ export const createListItemRoot = <V, P>(
         children,
         onPress,
         size = 'default',
-        surface = 'default',
         showSeparator = true,
         crossAlign = 'center',
-        disabled = false,
+        isDisabled = false,
         style,
         ...restProps
       }: IListItemProps,
       ref: React.Ref<unknown>,
     ) => {
-      const asChildInteractive = asChild && !!onPress && React.isValidElement(children);
+      const childOnPress = React.isValidElement(children)
+        ? ((children.props as { onPress?: unknown }).onPress as
+            | IListItemProps['onPress']
+            | undefined)
+        : undefined;
+
+      // asChild always wins when explicitly set with a valid element — even when the press
+      // surface is built internally by the child (e.g. `Link` adds its onPress via `useLink`,
+      // not as a JSX-level prop). The clone path below preserves the child's own press by
+      // *omitting* `onPress` when there is nothing to compose.
+      const asChildInteractive = asChild && React.isValidElement(children);
       const isPressableRoot = !!onPress && !asChildInteractive;
 
       const pressState = usePress({
-        isDisabled: !isPressableRoot || disabled,
+        isDisabled: !isPressableRoot || isDisabled,
       });
       const isPressed = pressState.isPressed;
       const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
       const { hoverProps, isHovered } = useHover();
+      const { isFocused, focusProps } = useFocus();
+      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+        isFocusVisible: boolean;
+        focusProps: typeof focusProps;
+      };
 
-      const slotAttrs = listItemRootDataAttrs(size, surface, showSeparator, crossAlign);
+      const slotAttrs = listItemRootDataAttrs(size, showSeparator, crossAlign);
 
       const contextValue = useMemo(
         () => ({
           isPressed: isPressableRoot ? isPressed : false,
           isHovered,
-          isDisabled: disabled,
+          isDisabled,
           crossAlign: crossAlign ?? 'center',
         }),
-        [isPressableRoot, isPressed, isHovered, disabled, crossAlign],
+        [isPressableRoot, isPressed, isHovered, isDisabled, crossAlign],
       );
 
       if (asChildInteractive) {
         const child = children as React.ReactElement<Record<string, unknown>>;
 
-        const mergedOnPress = composeEventHandlers(
-          child.props.onPress as IListItemProps['onPress'],
-          onPress,
-        );
+        const childProps = child.props as { disabled?: boolean; isDisabled?: boolean };
+        const childDisabled = !!(childProps.isDisabled ?? childProps.disabled);
+        const resolvedDisabled = isDisabled || childDisabled;
 
-        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
+        const cloneProps: Record<string, unknown> = {
+          ...restProps,
+          ...slotAttrs,
+          ...dataAttributes({
+            disabled: resolvedDisabled,
+          }),
+          ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+          disabled: resolvedDisabled,
+          ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
+          style: [rowStyleForCrossAlign(crossAlign), style, child.props.style],
+        };
 
-        const resolvedDisabled = disabled || childDisabled;
+        // Only override the child's `onPress` when we have something to add (a parent handler)
+        // or need to suppress (disabled). Otherwise leave the child's own onPress alone — e.g.
+        // `Link` builds its navigation handler inside `useLink`, not as a JSX-level prop, and
+        // overriding here would shadow it.
+        if (resolvedDisabled) {
+          cloneProps.onPress = undefined;
+        } else if (onPress) {
+          cloneProps.onPress = composeEventHandlers(childOnPress, onPress);
+        }
 
         return (
           <ListItemProvider
@@ -92,20 +122,7 @@ export const createListItemRoot = <V, P>(
               crossAlign: crossAlign ?? 'center',
             }}
           >
-            {React.cloneElement(child, {
-              ...restProps,
-              ...slotAttrs,
-              ...dataAttributes({
-                active: false,
-                hovered: false,
-                disabled: resolvedDisabled,
-              }),
-              ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
-              disabled: resolvedDisabled,
-              onPress: resolvedDisabled ? undefined : mergedOnPress,
-              ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
-              style: [rowStyleForCrossAlign(crossAlign), style, child.props.style],
-            })}
+            {React.cloneElement(child, cloneProps)}
           </ListItemProvider>
         );
       }
@@ -113,8 +130,10 @@ export const createListItemRoot = <V, P>(
       if (isPressableRoot) {
         const interactionAttrs = dataAttributes({
           active: isPressed,
-          hovered: isHovered,
-          disabled,
+          hover: isHovered,
+          focus: isFocused,
+          focusVisible: isFocusVisible,
+          disabled: isDisabled,
         });
 
         const {
@@ -122,7 +141,12 @@ export const createListItemRoot = <V, P>(
           onPressOut: onPressOutProp,
           onHoverIn: onHoverInProp,
           onHoverOut: onHoverOutProp,
-        } = restProps as IListItemPressablePassthrough;
+          onFocus: onFocusProp,
+          onBlur: onBlurProp,
+        } = restProps as IListItemPressablePassthrough & {
+          onFocus?: (...args: unknown[]) => unknown;
+          onBlur?: (...args: unknown[]) => unknown;
+        };
 
         return (
           <ListItemProvider value={contextValue}>
@@ -130,15 +154,23 @@ export const createListItemRoot = <V, P>(
               {...(restProps as P)}
               {...slotAttrs}
               {...interactionAttrs}
-              {...(disabled && { accessibilityState: { disabled: true } })}
-              disabled={disabled}
+              {...(isDisabled && { accessibilityState: { disabled: true } })}
+              disabled={isDisabled}
               ref={ref as React.Ref<P>}
               style={[rowStyleForCrossAlign(crossAlign), style]}
-              onPress={disabled ? undefined : onPress}
+              onPress={isDisabled ? undefined : onPress}
               onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
               onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
               onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
               onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+              onFocus={composeEventHandlers(
+                composeEventHandlers(onFocusProp, focusProps.onFocus),
+                focusRingProps.onFocus,
+              )}
+              onBlur={composeEventHandlers(
+                composeEventHandlers(onBlurProp, focusProps.onBlur),
+                focusRingProps.onBlur,
+              )}
             >
               {children}
             </BasePressable>
@@ -151,7 +183,7 @@ export const createListItemRoot = <V, P>(
           <BaseView
             {...(restProps as V)}
             {...slotAttrs}
-            {...(disabled ? dataAttributes({ disabled: true }) : undefined)}
+            {...(isDisabled ? dataAttributes({ disabled: true }) : undefined)}
             ref={ref as React.Ref<V>}
             style={[rowStyleForCrossAlign(crossAlign), style]}
           >

package/src/list-item/index.ts

@@ -23,7 +23,6 @@ export type {
   IListItemTrailingSlotProps,
   ListItemCrossAlign,
   ListItemSize,
-  ListItemSurface,
 } from './types';
 
 export { ListItemProvider, useListItemContext } from './context';

package/src/list-item/types.ts

@@ -3,8 +3,6 @@ import type { PressableProps, TextProps, ViewProps } from 'react-native';
 
 export type ListItemSize = 'default' | 'compact';
 
-export type ListItemSurface = 'default' | 'negative';
-
 /**
  * Cross-axis alignment for the row (`flex-direction: row`).
  * - **center**: Leading, content, and trailing are vertically centered (typical transactions).
@@ -20,7 +18,7 @@ export interface IListItemProps extends ViewProps, IListItemPressablePassthrough
   /**
    * Disables press handling when the root is pressable (maps to Pressable `disabled`).
    */
-  disabled?: boolean;
+  isDisabled?: boolean;
   /**
    * When set (and `asChild` is not used), root renders as pressable with interaction props.
    */
@@ -30,11 +28,6 @@ export interface IListItemProps extends ViewProps, IListItemPressablePassthrough
    * @default 'default'
    */
   size?: ListItemSize;
-  /**
-   * Semantic row surface (e.g. canceled transaction); mapped via `data-surface`.
-   * @default 'default'
-   */
-  surface?: ListItemSurface;
   /**
    * Whether the row shows a bottom separator; mapped via `data-separator`.
    * @default true

package/src/radio/context.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { RadioGroupState } from '@react-stately/radio';
+import type { IRadioContextValue } from './types';
+
+export const [RadioProvider, useRadioContext] = createContext<IRadioContextValue>('RadioContext');
+
+export interface IRadioGroupState {
+  isReadOnly: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isRequired: boolean;
+  isSelected: (value: string) => boolean;
+  selectValue: (value: string) => void;
+}
+
+export const RadioGroupContext = React.createContext<{
+  state: IRadioGroupState;
+  radioGroupState: RadioGroupState;
+  name?: string;
+} | null>(null);

package/src/radio/createRadioGroup.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { dataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext } from './context';
+import type { IRadioGroupProps } from './types';
+
+export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
+  forwardRef(({ children, ...props }: IRadioGroupProps, ref?: React.Ref<T>) => {
+    const formControlContext = useFormControlContext();
+
+    const combinedProps = {
+      ...formControlContext,
+      ...props,
+    };
+
+    const radioGroupState = useRadioGroupState({
+      ...combinedProps,
+      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
+    });
+
+    const { radioGroupProps } = useRadioGroup(
+      {
+        ...combinedProps,
+        'aria-label': combinedProps['aria-label'],
+      },
+      radioGroupState,
+    );
+
+    const isDisabled = combinedProps.isDisabled ?? false;
+    const isInvalid = combinedProps.isInvalid ?? false;
+    const isRequired = combinedProps.isRequired ?? false;
+    const isReadOnly = combinedProps.isReadOnly ?? false;
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          state: {
+            isDisabled,
+            isInvalid,
+            isRequired,
+            isReadOnly,
+            isSelected: (value: string) => radioGroupState.selectedValue === value,
+            selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+          },
+          radioGroupState,
+          name: combinedProps.name,
+        }}
+      >
+        <BaseRadioGroup
+          {...radioGroupProps}
+          {...(combinedProps as unknown as T)}
+          ref={ref}
+          aria-required={isRequired || undefined}
+          aria-readonly={isReadOnly || undefined}
+          {...dataAttributes({
+            slot: 'radio-group',
+            disabled: isDisabled,
+            invalid: isInvalid,
+          })}
+        >
+          {children}
+        </BaseRadioGroup>
+      </RadioGroupContext.Provider>
+    );
+  });

package/src/radio/createRadioIndicator.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useRadioContext } from './context';
+import type { IRadioIndicatorProps } from './types';
+
+export const createRadioIndicator = <T,>(BaseRadioIndicator: React.ComponentType<T>) =>
+  forwardRef<unknown, IRadioIndicatorProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly, isPressed, isFocusVisible } =
+        useRadioContext();
+
+      return (
+        <BaseRadioIndicator
+          className={className}
+          {...dataAttributes({
+            slot: 'radio-indicator',
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            focusVisible: isFocusVisible,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+            active: isPressed,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseRadioIndicator>
+      );
+    },
+  );

package/src/radio/createRadioLabel.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useRadioContext } from './context';
+import type { IRadioLabelProps } from './types';
+
+export const createRadioLabel = <T,>(BaseRadioLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, IRadioLabelProps & { className?: string }>(
+    ({ children, className, ...props }, ref) => {
+      const { isChecked, isDisabled, isHovered, isInvalid, isReadOnly } = useRadioContext();
+
+      return (
+        <BaseRadioLabel
+          className={className}
+          {...dataAttributes({
+            hover: isHovered,
+            checked: isChecked,
+            disabled: isDisabled,
+            invalid: isInvalid,
+            readonly: isReadOnly,
+          })}
+          {...(props as T)}
+          ref={ref}
+        >
+          {children}
+        </BaseRadioLabel>
+      );
+    },
+  );