@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.121

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>
-  >;
-};

package/src/otp-input/useOtpInput.ts

@@ -0,0 +1,156 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import type { TextInput, TextInputProps } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { applyOtpInputChange } from './utils/applyValueChange';
+import { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+import type { IOtpInputRootProps, OtpInputContextValue } from './types';
+
+export type UseOtpInputProps = Omit<IOtpInputRootProps, keyof import('react-native').ViewProps> & {
+  accessibilityLabel?: string;
+};
+
+export interface UseOtpInputReturn extends OtpInputContextValue {}
+
+/**
+ * Headless behavioral primitive for OTP input.
+ *
+ * Owns the controlled value, focus management, masked-input handling, and the
+ * `onComplete` lifecycle. Exposes the context value the styled layer must provide
+ * to `OtpInputField` primitives via `OtpInputProvider`.
+ *
+ * Standards mapping:
+ *   - Standard 3 #1 — controlled state + focus management state machine.
+ *   - Standard 3 #4 — compound contract ownership (context value for Fields).
+ */
+export function useOtpInput(props: UseOtpInputProps): UseOtpInputReturn {
+  const {
+    cellCount,
+    value,
+    onChangeText,
+    onComplete,
+    isDisabled: isDisabledProp,
+    isInvalid: isInvalidProp,
+    isReadOnly: isReadOnlyProp,
+    smsOtpAutofill = true,
+    filterInput,
+    allowedCharacters,
+    characterPattern,
+    getCellProps,
+    cellTestIdPrefix,
+    accessibilityLabel: rootAccessibilityLabel,
+  } = props;
+
+  const form = useFormControlContext();
+  const isDisabled = isDisabledProp ?? form.isDisabled ?? false;
+  const isInvalid = isInvalidProp ?? form.isInvalid ?? false;
+  const isReadOnly = isReadOnlyProp ?? form.isReadOnly ?? false;
+
+  const fieldRefs = useRef<(TextInput | null)[]>([]);
+  const focusAfterApply = useRef<number | null>(null);
+  const prevLenRef = useRef(value.length);
+  const prevValueRef = useRef(value);
+
+  const filter = useMemo(() => {
+    if (filterInput) {
+      return filterInput;
+    }
+    if (allowedCharacters !== undefined) {
+      return filterAllowedCharacters(allowedCharacters);
+    }
+    if (characterPattern !== undefined) {
+      return filterByRegExp(characterPattern);
+    }
+    return filterDigits;
+  }, [filterInput, allowedCharacters, characterPattern]);
+
+  const setFieldRef = useCallback((index: number, el: TextInput | null) => {
+    fieldRefs.current[index] = el;
+  }, []);
+
+  const focusCell = useCallback(
+    (index: number) => {
+      const safe = Math.max(0, Math.min(index, cellCount - 1));
+      fieldRefs.current[safe]?.focus();
+    },
+    [cellCount],
+  );
+
+  const handleFieldChange = useCallback(
+    (index: number, text: string) => {
+      const { nextValue, focusIndex } = applyOtpInputChange(value, index, text, cellCount, filter);
+      if (nextValue !== value) {
+        onChangeText(nextValue);
+      }
+      focusAfterApply.current = focusIndex;
+    },
+    [cellCount, filter, onChangeText, value],
+  );
+
+  const handleFieldKeyPress = useCallback(
+    (index: number, key: string) => {
+      if (key !== 'Backspace') {
+        return;
+      }
+      const char = index < value.length ? value[index] : '';
+      if (!char && index > 0) {
+        focusCell(index - 1);
+      }
+    },
+    [focusCell, value],
+  );
+
+  useLayoutEffect(() => {
+    if (focusAfterApply.current !== null) {
+      const i = focusAfterApply.current;
+      focusAfterApply.current = null;
+      fieldRefs.current[i]?.focus();
+    }
+  });
+
+  useEffect(() => {
+    const prevLen = prevLenRef.current;
+    const prevVal = prevValueRef.current;
+    const isFull = value.length === cellCount;
+    const becameFullByLength = isFull && prevLen < cellCount;
+    const correctedWhileFull = isFull && prevLen === cellCount && prevVal !== value;
+
+    if (becameFullByLength || correctedWhileFull) {
+      onComplete?.();
+    }
+    prevLenRef.current = value.length;
+    prevValueRef.current = value;
+  }, [cellCount, onComplete, value]);
+
+  return useMemo<OtpInputContextValue>(
+    () => ({
+      cellCount,
+      value,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filter,
+      getCellProps: getCellProps as ((index: number) => Partial<TextInputProps>) | undefined,
+      cellTestIdPrefix,
+      rootAccessibilityLabel,
+      setFieldRef,
+      handleFieldChange,
+      handleFieldKeyPress,
+    }),
+    [
+      cellCount,
+      value,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filter,
+      getCellProps,
+      cellTestIdPrefix,
+      rootAccessibilityLabel,
+      setFieldRef,
+      handleFieldChange,
+      handleFieldKeyPress,
+    ],
+  );
+}

package/src/overlay/useAnchorPosition.ts

@@ -16,32 +16,79 @@ function measureWeb(element: any): AnchorLayout {
   return { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
 }
 
+function setLayoutIfChanged(
+  setLayout: React.Dispatch<React.SetStateAction<AnchorLayout | null>>,
+  next: AnchorLayout,
+) {
+  setLayout((prev) => {
+    if (
+      prev?.x === next.x &&
+      prev.y === next.y &&
+      prev.width === next.width &&
+      prev.height === next.height
+    ) {
+      return prev;
+    }
+    return next;
+  });
+}
+
+export interface UseAnchorPositionOptions {
+  /** Re-run layout measurement when this value changes (e.g. slider value percent). */
+  remeasureKey?: unknown;
+  /** Poll anchor position each animation frame while open (for anchors that move). */
+  trackWhileOpen?: boolean;
+}
+
 /**
  * Measures an anchor element's position and size, re-measuring on scroll/resize
  * (web) so a positioned overlay can track its anchor across layout changes.
  *
  * Returns `null` until the first measurement completes.
  */
-export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): AnchorLayout | null {
+export function useAnchorPosition(
+  anchorRef: RefObject<any>,
+  open: boolean,
+  options?: UseAnchorPositionOptions,
+): AnchorLayout | null {
+  const { remeasureKey, trackWhileOpen = false } = options ?? {};
   const [layout, setLayout] = useState<AnchorLayout | null>(null);
 
+  const measureAnchor = () => {
+    const anchor = anchorRef.current;
+    if (!anchor) {
+      return;
+    }
+
+    if (Platform.OS === 'web') {
+      setLayoutIfChanged(setLayout, measureWeb(anchor));
+      return;
+    }
+
+    anchor.measureInWindow((x: number, y: number, width: number, height: number) => {
+      setLayoutIfChanged(setLayout, { x, y, width, height });
+    });
+  };
+
   useIsomorphicLayoutEffect(() => {
     if (!open) {
       setLayout(null);
       return;
     }
 
-    const anchor = anchorRef.current;
-    if (!anchor) return;
-
     let cancelled = false;
 
     if (Platform.OS === 'web') {
-      setLayout(measureWeb(anchor));
+      measureAnchor();
     } else {
+      const anchor = anchorRef.current;
+      if (!anchor) {
+        return;
+      }
+
       anchor.measureInWindow((x: number, y: number, width: number, height: number) => {
         if (!cancelled) {
-          setLayout({ x, y, width, height });
+          setLayoutIfChanged(setLayout, { x, y, width, height });
         }
       });
     }
@@ -49,15 +96,36 @@ export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): Anc
     return () => {
       cancelled = true;
     };
-  }, [open, anchorRef]);
+  }, [open, anchorRef, remeasureKey]);
 
   useEffect(() => {
-    if (!open || Platform.OS !== 'web') return;
+    if (!open || !trackWhileOpen) {
+      return;
+    }
+
+    let frameId = 0;
+    const tick = () => {
+      measureAnchor();
+      frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [open, anchorRef, remeasureKey, trackWhileOpen]);
+
+  useEffect(() => {
+    if (!open || Platform.OS !== 'web' || trackWhileOpen) {
+      return;
+    }
 
     const anchor = anchorRef.current;
-    if (!anchor) return;
+    if (!anchor) {
+      return;
+    }
 
-    const update = () => setLayout(measureWeb(anchor));
+    const update = () => setLayoutIfChanged(setLayout, measureWeb(anchor));
 
     window.addEventListener('scroll', update, true);
     window.addEventListener('resize', update);
@@ -66,7 +134,7 @@ export function useAnchorPosition(anchorRef: RefObject<any>, open: boolean): Anc
       window.removeEventListener('scroll', update, true);
       window.removeEventListener('resize', update);
     };
-  }, [open, anchorRef]);
+  }, [open, anchorRef, remeasureKey, trackWhileOpen]);
 
   return layout;
 }

package/src/overlay/useDismissOverlay.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import type { RefObject } from 'react';
 
 /**

package/src/overlay/useEscapeKey.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 /**
  * No-op on native — Escape key dismissal is not applicable.
  * Native uses the system back gesture / hardware button via Modal.

package/src/portal/index.ts

@@ -0,0 +1 @@
+export * from './portal';