@cdx-ui/primitives 0.0.1-beta.10 → 0.0.1-beta.101

package/src/list-item/ListItemRoot.tsx

@@ -0,0 +1,183 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ListItemProvider } from './context';
+import type { IListItemPressablePassthrough, IListItemProps, ListItemCrossAlign } from './types';
+
+function rowStyleForCrossAlign(crossAlign: ListItemCrossAlign) {
+  return {
+    flexDirection: 'row' as const,
+    alignSelf: 'stretch' as const,
+    alignItems: crossAlign === 'start' ? ('flex-start' as const) : ('center' as const),
+  };
+}
+
+export interface ListItemRootProps extends IListItemProps {}
+
+export const ListItemRoot = forwardRef<ComponentRef<typeof View>, ListItemRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      crossAlign = 'center',
+      isDisabled = false,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      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 childDisabled =
+      asChildInteractive &&
+      !!(
+        (children as React.ReactElement<{ disabled?: boolean; isDisabled?: boolean }>).props
+          .isDisabled ??
+        (children as React.ReactElement<{ disabled?: boolean; isDisabled?: boolean }>).props
+          .disabled
+      );
+    const resolvedDisabled = isDisabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: isPressableRoot ? isDisabled : resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [
+        isPressableRoot,
+        isHovered,
+        isFocused,
+        isPressed,
+        isDisabled,
+        resolvedDisabled,
+        isFocusVisible,
+      ],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyleForCrossAlign(crossAlign), style],
+      };
+
+      // Only set onPress when we have a parent handler to compose. Slot merges this
+      // with the child's own onPress (child first, then ours). When there is no parent
+      // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+      // When disabled, `disabled` prop suppresses press events on the child.
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ListItemProvider value={contextValue}>
+          <Slot
+            ref={ref as React.Ref<View>}
+            {...(slotMergeProps as PressableProps)}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: false,
+                hover: false,
+                focus: false,
+                focusVisible: false,
+                disabled: resolvedDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Slot>
+        </ListItemProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IListItemPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ListItemProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            {...(isDisabled && { accessibilityState: { disabled: true } })}
+            disabled={isDisabled}
+            style={[rowStyleForCrossAlign(crossAlign), style]}
+            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,
+            )}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: isPressed,
+                hover: isHovered,
+                focus: isFocused,
+                focusVisible: isFocusVisible,
+                disabled: isDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ListItemProvider>
+      );
+    }
+
+    return (
+      <ListItemProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyleForCrossAlign(crossAlign), style]}
+          {...mergeDataAttributes(
+            restProps,
+            isDisabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ListItemProvider>
+    );
+  },
+);
+
+ListItemRoot.displayName = 'ListItemRoot';

package/src/list-item/context.tsx

@@ -1,5 +1,5 @@
 import { createContext } from '@cdx-ui/utils';
-import type { IListItemContextValue } from './types';
+import type { InteractionState } from '../types';
 
 export const [ListItemProvider, useListItemContext] =
-  createContext<IListItemContextValue>('ListItemContext');
+  createContext<InteractionState>('ListItemContext');

package/src/list-item/index.ts

@@ -1,88 +1,9 @@
-import type React from 'react';
-import { createListItemContent } from './createListItemContent';
-import { createListItemDescription } from './createListItemDescription';
-import { createListItemLeadingSlot } from './createListItemLeadingSlot';
-import { createListItemMeta } from './createListItemMeta';
-import { createListItemRoot } from './createListItemRoot';
-import { createListItemSectionHeader } from './createListItemSectionHeader';
-import { createListItemTitle } from './createListItemTitle';
-import { createListItemTrailingSlot } from './createListItemTrailingSlot';
-import type { IListItemComponentType } from './types';
-
 export type {
-  IListItemComponentType,
-  IListItemContentProps,
-  IListItemContextValue,
-  IListItemDescriptionProps,
-  IListItemLeadingSlotProps,
-  IListItemMetaProps,
   IListItemPressablePassthrough,
   IListItemProps,
-  IListItemSectionHeaderProps,
-  IListItemTitleProps,
-  IListItemTrailingSlotProps,
   ListItemCrossAlign,
   ListItemSize,
-  ListItemSurface,
 } from './types';
 
 export { ListItemProvider, useListItemContext } from './context';
-
-export function createListItem<
-  ViewComponent,
-  PressableComponent,
-  LeadingSlot,
-  Content,
-  Title,
-  Description,
-  Meta,
-  TrailingSlot,
-  SectionHeader,
->(BaseComponents: {
-  View: React.ComponentType<ViewComponent>;
-  Pressable: React.ComponentType<PressableComponent>;
-  LeadingSlot: React.ComponentType<LeadingSlot>;
-  Content: React.ComponentType<Content>;
-  Title: React.ComponentType<Title>;
-  Description: React.ComponentType<Description>;
-  Meta: React.ComponentType<Meta>;
-  TrailingSlot: React.ComponentType<TrailingSlot>;
-  SectionHeader: React.ComponentType<SectionHeader>;
-}) {
-  const ListItem = createListItemRoot(BaseComponents.View, BaseComponents.Pressable);
-  const LeadingSlot = createListItemLeadingSlot(BaseComponents.LeadingSlot);
-  const Content = createListItemContent(BaseComponents.Content);
-  const Title = createListItemTitle(BaseComponents.Title);
-  const Description = createListItemDescription(BaseComponents.Description);
-  const Meta = createListItemMeta(BaseComponents.Meta);
-  const TrailingSlot = createListItemTrailingSlot(BaseComponents.TrailingSlot);
-  const SectionHeader = createListItemSectionHeader(BaseComponents.SectionHeader);
-
-  ListItem.displayName = 'ListItemPrimitive';
-  LeadingSlot.displayName = 'ListItemPrimitive.LeadingSlot';
-  Content.displayName = 'ListItemPrimitive.Content';
-  Title.displayName = 'ListItemPrimitive.Title';
-  Description.displayName = 'ListItemPrimitive.Description';
-  Meta.displayName = 'ListItemPrimitive.Meta';
-  TrailingSlot.displayName = 'ListItemPrimitive.TrailingSlot';
-  SectionHeader.displayName = 'ListItemPrimitive.SectionHeader';
-
-  return Object.assign(ListItem, {
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Meta,
-    TrailingSlot,
-    SectionHeader,
-  }) as IListItemComponentType<
-    ViewComponent | PressableComponent,
-    LeadingSlot,
-    Content,
-    Title,
-    Description,
-    Meta,
-    TrailingSlot,
-    SectionHeader
-  >;
-}
+export { ListItemRoot, type ListItemRootProps } from './ListItemRoot';

package/src/list-item/types.ts

@@ -1,10 +1,7 @@
-import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
-import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type { PressableProps, 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).
@@ -16,32 +13,18 @@ export type IListItemPressablePassthrough = Partial<
   Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
 >;
 
-export interface IListItemProps extends ViewProps, IListItemPressablePassthrough {
+export interface InterfaceListItemProps 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.
    */
   onPress?: PressableProps['onPress'];
-  /**
-   * Vertical density; mapped at styled layer via `data-size`.
-   * @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
-   */
-  showSeparator?: boolean;
   /**
    * Vertical alignment of leading / content / trailing along the row cross axis.
+   * Drives the primitive's inline row style and the styled-layer CVA in tandem.
    * @default 'center'
    */
   crossAlign?: ListItemCrossAlign;
@@ -52,71 +35,4 @@ export interface IListItemProps extends ViewProps, IListItemPressablePassthrough
   asChild?: boolean;
 }
 
-export interface IListItemContextValue {
-  isPressed: boolean;
-  isHovered: boolean;
-  isDisabled: boolean;
-  crossAlign: ListItemCrossAlign;
-}
-
-export interface IListItemLeadingSlotProps extends ViewProps {
-  /**
-   * Decorative leading content defaults to hidden from the accessibility tree.
-   * Set to `false` when the leading region contains meaningful controls.
-   * @default true
-   */
-  'aria-hidden'?: boolean;
-}
-
-export type IListItemContentProps = ViewProps;
-
-export type IListItemTitleProps = TextProps;
-
-export type IListItemDescriptionProps = TextProps;
-
-export type IListItemMetaProps = TextProps;
-
-export type IListItemTrailingSlotProps = ViewProps;
-
-export interface IListItemSectionHeaderProps extends ViewProps {
-  /** Primary section label (e.g. date heading). */
-  children: ReactNode;
-  /** Optional right-aligned adornment (e.g. section Chip). */
-  trailing?: ReactNode;
-  /**
-   * Whether to expose the top divider marker for styling (`data-divider`).
-   * @default true
-   */
-  showDivider?: boolean;
-}
-
-export type IListItemComponentType<
-  RootRef,
-  LeadingSlot,
-  Content,
-  Title,
-  Description,
-  Meta,
-  TrailingSlot,
-  SectionHeader,
-> = ForwardRefExoticComponent<RefAttributes<RootRef> & IListItemProps> & {
-  LeadingSlot: ForwardRefExoticComponent<
-    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & IListItemLeadingSlotProps
-  >;
-  Content: ForwardRefExoticComponent<
-    RefAttributes<Content> & PropsWithoutRef<Content> & IListItemContentProps
-  >;
-  Title: ForwardRefExoticComponent<
-    RefAttributes<Title> & PropsWithoutRef<Title> & IListItemTitleProps
-  >;
-  Description: ForwardRefExoticComponent<
-    RefAttributes<Description> & PropsWithoutRef<Description> & IListItemDescriptionProps
-  >;
-  Meta: ForwardRefExoticComponent<RefAttributes<Meta> & PropsWithoutRef<Meta> & IListItemMetaProps>;
-  TrailingSlot: ForwardRefExoticComponent<
-    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & IListItemTrailingSlotProps
-  >;
-  SectionHeader: ForwardRefExoticComponent<
-    RefAttributes<SectionHeader> & PropsWithoutRef<SectionHeader> & IListItemSectionHeaderProps
-  >;
-};
+export type IListItemProps = InterfaceListItemProps;

package/src/otp-input/OtpInputField.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, useMemo } from 'react';
+import {
+  Platform,
+  TextInput,
+  type TextInputKeyPressEvent,
+  type TextInputProps,
+} from 'react-native';
+import { mergeRefs } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useOtpCellIndexContext, useOtpInputContext } from './context';
+import type { IOtpInputFieldProps } from './types';
+
+export interface OtpInputFieldProps extends IOtpInputFieldProps {
+  asChild?: boolean;
+}
+
+/**
+ * Concrete per-cell TextInput primitive for OTP input.
+ *
+ * Reads OtpInput context (state machine) and OtpCellIndex context (position) to
+ * wire ref registration, accessibility labels, autofill hints, and key-press/
+ * change-text handlers. Renders a `TextInput` by default; supports `asChild` via
+ * `Slot` for element substitution (Standard 2).
+ *
+ * Standards mapping:
+ *   - Standard 3 #1 — behavioral state (ref registration, focus, change handling).
+ *   - Standard 3 #2 — non-host a11y (computed accessibilityLabel, SMS autofill).
+ */
+export const OtpInputField = forwardRef<TextInput, OtpInputFieldProps>((props, ref) => {
+  const { asChild, ...restProps } = props;
+  const { cellIndex } = useOtpCellIndexContext();
+  const {
+    value,
+    cellCount,
+    isDisabled,
+    isReadOnly,
+    smsOtpAutofill,
+    getCellProps,
+    cellTestIdPrefix,
+    rootAccessibilityLabel,
+    setFieldRef,
+    handleFieldChange,
+    handleFieldKeyPress,
+  } = useOtpInputContext();
+
+  const char = cellIndex < value.length ? (value[cellIndex] ?? '') : '';
+  const extra = getCellProps?.(cellIndex) ?? {};
+
+  const accessibilityLabel = useMemo(() => {
+    const fromExtra = extra.accessibilityLabel;
+    if (typeof fromExtra === 'string' && fromExtra !== '') {
+      return fromExtra;
+    }
+    if (rootAccessibilityLabel) {
+      return `${rootAccessibilityLabel}, ${String(cellIndex + 1)} of ${String(cellCount)}`;
+    }
+    return `OTP digit ${String(cellIndex + 1)} of ${String(cellCount)}`;
+  }, [cellCount, cellIndex, extra.accessibilityLabel, rootAccessibilityLabel]);
+
+  const autofillProps = useMemo(() => {
+    if (!smsOtpAutofill || cellIndex !== 0) {
+      return {};
+    }
+    return Platform.select<Record<string, unknown>>({
+      web: { autoComplete: 'one-time-code' },
+      ios: { textContentType: 'oneTimeCode' },
+      android: { autoComplete: 'sms-otp' },
+      default: {},
+    });
+  }, [cellIndex, smsOtpAutofill]);
+
+  const editable = !(isDisabled || isReadOnly);
+
+  const { style: extraStyle, accessibilityLabel: _omitExtraA11y, ...extraRest } = extra;
+  void _omitExtraA11y;
+  const {
+    style: incomingStyle,
+    value: _omitValue,
+    defaultValue: _omitDefault,
+    onChangeText: _omitOnChange,
+    ...incomingRest
+  } = restProps as TextInputProps;
+  void _omitValue;
+  void _omitDefault;
+  void _omitOnChange;
+
+  const Comp = asChild ? Slot : TextInput;
+
+  return (
+    <Comp
+      ref={mergeRefs(ref, (el: TextInput | null) => {
+        setFieldRef(cellIndex, el);
+      })}
+      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
+      accessible
+      autoFocus={cellIndex === 0 && editable && value.length === 0}
+      editable={editable}
+      keyboardType="number-pad"
+      returnKeyType="done"
+      selectTextOnFocus
+      testID={
+        cellTestIdPrefix
+          ? `${cellTestIdPrefix}:${String(cellIndex)}:textField:changeText`
+          : undefined
+      }
+      value={char}
+      onChangeText={(text: string) => {
+        handleFieldChange(cellIndex, text);
+      }}
+      onKeyPress={(e: TextInputKeyPressEvent) => {
+        handleFieldKeyPress(cellIndex, e.nativeEvent.key);
+      }}
+      {...autofillProps}
+      {...(extraRest as object)}
+      {...(incomingRest as TextInputProps)}
+      style={[extraStyle, incomingStyle]}
+    />
+  );
+});
+
+OtpInputField.displayName = 'OtpInputField';

package/src/otp-input/index.ts

@@ -0,0 +1,16 @@
+export { applyOtpInputChange } from './utils/applyValueChange';
+export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+export { OtpInputField, type OtpInputFieldProps } from './OtpInputField';
+export { useOtpInput, type UseOtpInputProps, type UseOtpInputReturn } from './useOtpInput';
+export {
+  OtpInputProvider,
+  useOtpInputContext,
+  OtpCellIndexProvider,
+  useOtpCellIndexContext,
+} from './context';
+export type {
+  IOtpInputRootProps,
+  IOtpInputFieldProps,
+  OtpInputContextValue,
+  OtpInputCellIndexContextValue,
+} from './types';

package/src/otp-input/types.ts

@@ -1,5 +1,3 @@
-import type React from 'react';
-import type { ReactNode } from 'react';
 import type { TextInputProps, ViewProps } from 'react-native';
 
 export interface IOtpInputRootProps extends ViewProps {
@@ -48,10 +46,6 @@ export interface IOtpInputRootProps extends ViewProps {
   cellTestIdPrefix?: string;
 }
 
-export interface IOtpInputCellProps extends ViewProps {
-  children?: ReactNode;
-}
-
 export type IOtpInputFieldProps = TextInputProps;
 
 export interface OtpInputCellIndexContextValue {
@@ -73,20 +67,3 @@ export interface OtpInputContextValue {
   handleFieldChange: (index: number, text: string) => void;
   handleFieldKeyPress: (index: number, key: string) => void;
 }
-
-export type IOtpInputComponentType<
-  RootProps,
-  CellProps,
-  FieldProps,
-  RootRef = unknown,
-  FieldRef = unknown,
-> = React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<RootProps & IOtpInputRootProps> & React.RefAttributes<RootRef>
-> & {
-  Cell: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<CellProps & IOtpInputCellProps> & React.RefAttributes<unknown>
-  >;
-  Field: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<FieldProps & IOtpInputFieldProps> & React.RefAttributes<FieldRef>
-  >;
-};