@cdx-ui/primitives 0.0.1-beta.7 → 0.0.1-beta.70

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/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/progress-bar/ProgressBarIndicator.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useProgressContext } from './context';
+
+type PercentString = `${number}%`;
+
+export interface ProgressBarIndicatorProps extends ViewProps {
+  readonly asChild?: boolean;
+}
+
+export const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+  ({ asChild, style, ...rest }, ref) => {
+    const { percent, state, max, value } = useProgressContext();
+
+    const filledStyle = useMemo((): ViewStyle => {
+      const pct = `${String(percent)}%` as PercentString;
+      return { width: pct, height: '100%' };
+    }, [percent]);
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: value === null ? undefined : String(value),
+      max: String(max),
+    });
+
+    const Comp = asChild ? Slot : View;
+
+    return <Comp ref={ref} {...rest} {...dataAttrs} style={[filledStyle, style]} />;
+  },
+);
+
+ProgressBarIndicator.displayName = 'ProgressBarIndicator';

package/src/progress-bar/ProgressBarRoot.tsx

@@ -0,0 +1,117 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes } from '../utils/dataAttributes';
+import { ProgressProvider } from './context';
+import type { InterfaceProgressProps, ProgressDataState } from './types';
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+function resolveState(
+  value: number | null,
+  max: number,
+  clamped: number | null,
+): ProgressDataState {
+  if (value === null) {
+    return 'indeterminate';
+  }
+  if (max <= 0) {
+    return 'complete';
+  }
+  if (clamped !== null && clamped >= max) {
+    return 'complete';
+  }
+  return 'loading';
+}
+
+function defaultGetValueLabel(value: number, max: number): string {
+  if (max <= 0) {
+    return '0%';
+  }
+  return `${String(Math.round((value / max) * 100))}%`;
+}
+
+export const ProgressBarRoot = forwardRef<View, InterfaceProgressProps & { asChild?: boolean }>(
+  (props, ref) => {
+    const {
+      asChild,
+      value: valueProp = 0,
+      max: maxProp = 100,
+      getValueLabel = defaultGetValueLabel,
+      children,
+      accessibilityRole = 'progressbar',
+      accessibilityValue: accessibilityValueProp,
+      role = 'progressbar',
+      ...restProps
+    } = props;
+
+    const max = maxProp > 0 ? maxProp : 0;
+    const isIndeterminate = valueProp === null;
+    const clampedValue =
+      valueProp === null ? null : clamp(Number.isFinite(valueProp) ? valueProp : 0, 0, max);
+
+    const percent = useMemo(() => {
+      if (clampedValue === null || max <= 0) {
+        return 0;
+      }
+      return (clampedValue / max) * 100;
+    }, [clampedValue, max]);
+
+    const state = useMemo(
+      () => resolveState(valueProp, max, clampedValue),
+      [valueProp, max, clampedValue],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value: clampedValue,
+        max,
+        percent,
+        state,
+      }),
+      [clampedValue, max, percent, state],
+    );
+
+    const dataAttrs = dataAttributes({
+      state,
+      value: clampedValue === null ? undefined : String(clampedValue),
+      max: String(max),
+    });
+
+    const accessibilityValue = useMemo(() => {
+      if (accessibilityValueProp !== undefined) {
+        return accessibilityValueProp;
+      }
+      if (isIndeterminate || clampedValue === null) {
+        return { min: 0, max, text: 'Indeterminate' };
+      }
+      return {
+        min: 0,
+        max,
+        now: clampedValue,
+        text: getValueLabel(clampedValue, max),
+      };
+    }, [accessibilityValueProp, isIndeterminate, clampedValue, max, getValueLabel]);
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ProgressProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(restProps as ViewProps)}
+          role={role}
+          accessibilityRole={accessibilityRole}
+          accessibilityValue={accessibilityValue}
+          {...dataAttrs}
+        >
+          {children}
+        </Comp>
+      </ProgressProvider>
+    );
+  },
+);
+
+ProgressBarRoot.displayName = 'ProgressBarRoot';

package/src/progress-bar/index.ts

@@ -0,0 +1,5 @@
+export type { IProgressProps, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+export { ProgressBarRoot } from './ProgressBarRoot';
+export { ProgressBarIndicator, type ProgressBarIndicatorProps } from './ProgressBarIndicator';

package/src/progress-bar/types.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type ProgressDataState = 'complete' | 'indeterminate' | 'loading';
+
+export interface InterfaceProgressProps extends Omit<ViewProps, 'children'> {
+  /**
+   * Current value in the range [0, max], or `null` for indeterminate progress.
+   * Omit or use a number for determinate progress; default is `0`.
+   */
+  readonly value?: number | null;
+  /**
+   * Maximum value (minimum is always 0).
+   * @default 100
+   */
+  readonly max?: number;
+  /**
+   * Optional label for `accessibilityValue.text` when determinate.
+   */
+  readonly getValueLabel?: (value: number, max: number) => string;
+  readonly children?: ReactNode;
+}
+
+export type IProgressProps = InterfaceProgressProps;

package/src/radio/RadioGroup.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { useRadioGroup } from '@react-native-aria/radio';
+import { useRadioGroupState } from '@react-stately/radio';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioGroupContext } from './context';
+import type { IRadioGroupProps } from './types';
+
+export interface RadioGroupRootProps extends IRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    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;
+
+    const Comp = asChild ? Slot : View;
+
+    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,
+        }}
+      >
+        <Comp
+          {...radioGroupProps}
+          aria-label={combinedProps['aria-label']}
+          aria-labelledby={combinedProps['aria-labelledby']}
+          aria-required={isRequired || undefined}
+          aria-readonly={isReadOnly || undefined}
+          className={className}
+          style={style}
+          ref={ref}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              invalid: isInvalid,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';