@cdx-ui/primitives 0.0.1-alpha.4 → 0.0.1-alpha.40

package/src/otp-input/index.tsx

@@ -0,0 +1,34 @@
+import type React from 'react';
+import { createOtpInputCell } from './createOtpInputCell';
+import { createOtpInputField } from './createOtpInputField';
+import { createOtpInputRoot } from './createOtpInputRoot';
+import type { IOtpInputComponentType } from './types';
+
+export { applyOtpInputChange } from './utils/applyValueChange';
+export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+export type * from './types';
+
+export function createOtpInput<
+  RootProps,
+  CellProps,
+  FieldProps,
+  RootRef = unknown,
+  FieldRef = unknown,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Cell: React.ComponentType<CellProps>;
+  Field: React.ComponentType<FieldProps>;
+}) {
+  const Cell = createOtpInputCell(BaseComponents.Cell);
+  const Field = createOtpInputField(BaseComponents.Field);
+  const Root = createOtpInputRoot(BaseComponents.Root, Cell, Field);
+
+  Root.displayName = 'OtpInputPrimitive';
+  Cell.displayName = 'OtpInputPrimitive.Cell';
+  Field.displayName = 'OtpInputPrimitive.Field';
+
+  return Object.assign(Root, {
+    Cell,
+    Field,
+  }) as IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
+}

package/src/otp-input/types.ts

@@ -0,0 +1,92 @@
+import type React from 'react';
+import type { ReactNode } from 'react';
+import type { TextInputProps, ViewProps } from 'react-native';
+
+export interface IOtpInputRootProps extends ViewProps {
+  /** Number of OTP cells (fixed). */
+  cellCount: number;
+  /** Controlled value: characters in order, length 0..`cellCount` (prefix fill). */
+  value: string;
+  onChangeText: (value: string) => void;
+  /**
+   * Called when the code is ready to verify again:
+   * - `value` becomes full (`length === cellCount`) after being shorter, or
+   * - `value` stays full but the string changes (user corrected a digit without dropping below full length).
+   * Does not fire on mount when `value` is already full and unchanged, nor on re-renders with the same full `value`.
+   */
+  onComplete?: () => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  /** When false, no SMS / Web OTP autofill hints on the first cell. @default true */
+  smsOtpAutofill?: boolean;
+  /**
+   * Override default digit-only filtering.
+   * Takes priority over `allowedCharacters` and `characterPattern` when truthy.
+   * Does not change the default `keyboardType` (`number-pad`); use `getCellProps` if the allowed
+   * character set needs a different keyboard.
+   */
+  filterInput?: (input: string) => string;
+  /**
+   * Keep only characters present in this string (treated as a set of code units).
+   * Used when `filterInput` is not provided. Takes priority over `characterPattern`.
+   * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` when allowing letters/symbols.
+   */
+  allowedCharacters?: string;
+  /**
+   * Keep only characters matching this pattern (tested per code unit).
+   * Used when neither `filterInput` nor `allowedCharacters` is provided.
+   * Default keyboard remains numeric; use `getCellProps` to set `keyboardType` for non-digit input.
+   */
+  characterPattern?: RegExp;
+  /**
+   * Spread onto each cell after built-in field props (including `keyboardType="number-pad"`),
+   * so consumers can override `keyboardType`, `autoCapitalize`, etc. for non-digit OTPs.
+   */
+  getCellProps?: (index: number) => Partial<TextInputProps>;
+  /** Optional prefix for `testID` on each field: `${cellTestIdPrefix}:${index}:...` */
+  cellTestIdPrefix?: string;
+}
+
+export interface IOtpInputCellProps extends ViewProps {
+  children?: ReactNode;
+}
+
+export type IOtpInputFieldProps = TextInputProps;
+
+export interface OtpInputCellIndexContextValue {
+  cellIndex: number;
+}
+
+export interface OtpInputContextValue {
+  cellCount: number;
+  value: string;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  isReadOnly: boolean;
+  smsOtpAutofill: boolean;
+  filter: (input: string) => string;
+  getCellProps?: (index: number) => Partial<TextInputProps>;
+  cellTestIdPrefix?: string;
+  rootAccessibilityLabel?: string;
+  setFieldRef: (index: number, el: import('react-native').TextInput | null) => void;
+  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/utils/applyValueChange.ts

@@ -0,0 +1,56 @@
+/**
+ * Pure OTP value transition for a controlled prefix string (no explicit empty slots).
+ * - Single-character edits use index-based replace/append (no reorder).
+ * - Multi-character input (paste/autofill) writes at `index` forward, then packs left.
+ */
+export function applyOtpInputChange(
+  value: string,
+  index: number,
+  rawText: string,
+  cellCount: number,
+  filter: (input: string) => string,
+): { nextValue: string; focusIndex: number } {
+  const text = filter(rawText);
+
+  if (text.length === 0) {
+    if (index < value.length) {
+      const next = (value.slice(0, index) + value.slice(index + 1)).slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.max(0, index - 1) };
+    }
+    return { nextValue: value, focusIndex: index };
+  }
+
+  if (text.length === 1) {
+    if (index < value.length) {
+      const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+    }
+    if (value.length < cellCount) {
+      if (index === value.length) {
+        const next = (value + text).slice(0, cellCount);
+        return { nextValue: next, focusIndex: Math.min(next.length, cellCount - 1) };
+      }
+      const arr = Array.from({ length: cellCount }, (_, i) => (i < value.length ? value[i] : ''));
+      arr[index] = text;
+      const next = arr
+        .filter((c) => c)
+        .join('')
+        .slice(0, cellCount);
+      return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+    }
+    const next = (value.slice(0, index) + text + value.slice(index + 1)).slice(0, cellCount);
+    return { nextValue: next, focusIndex: Math.min(index + 1, cellCount - 1) };
+  }
+
+  const arr = Array.from({ length: cellCount }, (_, i) => (i < value.length ? value[i] : ''));
+  for (let k = 0; k < text.length && index + k < cellCount; k++) {
+    arr[index + k] = text.charAt(k);
+  }
+  const next = arr
+    .filter((c) => c)
+    .join('')
+    .slice(0, cellCount);
+  const lastWritten = Math.min(index + text.length - 1, cellCount - 1);
+  const focusIndex = Math.min(Math.max(lastWritten, next.length - 1), cellCount - 1);
+  return { nextValue: next, focusIndex: Math.max(0, focusIndex) };
+}

package/src/otp-input/utils/filterValue.ts

@@ -0,0 +1,37 @@
+/** Strip to digits (default OTP behavior). */
+export function filterDigits(input: string): string {
+  return input.replace(/\D/g, '');
+}
+
+/** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
+export function filterAllowedCharacters(allowed: string) {
+  const allowedSet = new Set<string>();
+  for (let i = 0; i < allowed.length; i++) {
+    allowedSet.add(allowed.charAt(i));
+  }
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      if (allowedSet.has(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}
+
+/** Keep only characters matching `re` (tested per UTF-16 code unit). */
+export function filterByRegExp(re: RegExp) {
+  return (input: string) => {
+    let out = '';
+    for (let i = 0; i < input.length; i++) {
+      const ch = input.charAt(i);
+      re.lastIndex = 0;
+      if (re.test(ch)) {
+        out += ch;
+      }
+    }
+    return out;
+  };
+}

package/src/overlay/OverlayContainer.tsx

@@ -3,20 +3,13 @@ import {
   Modal,
   Platform,
   Pressable,
-  type StyleProp,
   StyleSheet,
+  View,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
-
-let createPortalFn:
-  | ((children: React.ReactNode, container: Element) => React.ReactPortal)
-  | undefined;
-if (Platform.OS === 'web') {
-  try {
-    createPortalFn = require('react-dom').createPortal;
-  } catch {}
-}
+import { createPortalFn } from '../utils/createPortal';
 
 export interface OverlayContainerProps {
   onDismiss: () => void;
@@ -30,7 +23,11 @@ export interface OverlayContainerProps {
  * Cross-platform overlay container.
  *
  * - Web: renders children into a `createPortal` at `document.body` with
- *   `position: fixed` and `zIndex: 50`.
+ *   `position: fixed` and `zIndex: 50`. Uses a plain `View` rather than
+ *   Reanimated's `Animated.View` because Reanimated's layout animations
+ *   (`entering`/`exiting`) rely on `require()` calls that break silently
+ *   in Vite production bundles, leaving elements stuck at opacity 0.
+ *   See: https://github.com/software-mansion/react-native-reanimated/issues/6775
  * - Native: renders children inside a transparent `<Modal>` with a
  *   backdrop `<Pressable>` that calls `onDismiss` on press.
  *
@@ -46,13 +43,7 @@ export function OverlayContainer({
 }: Readonly<OverlayContainerProps>) {
   if (Platform.OS === 'web' && createPortalFn) {
     return createPortalFn(
-      <Animated.View
-        entering={entering}
-        exiting={exiting}
-        style={[{ position: 'fixed' as any, zIndex: 50 }, style]}
-      >
-        {children}
-      </Animated.View>,
+      <View style={[{ position: 'fixed' as any, zIndex: 50 }, style]}>{children}</View>,
       document.body,
     );
   }

package/src/overlay/index.ts

@@ -2,6 +2,7 @@ export { OverlayContainer } from './OverlayContainer';
 export type { OverlayContainerProps } from './OverlayContainer';
 export { useAnchorPosition, type AnchorLayout } from './useAnchorPosition';
 export { useDismissOverlay } from './useDismissOverlay';
+export { useEscapeKey } from './useEscapeKey';
 export {
   useOverlayPosition,
   type OverlayPosition,

package/src/overlay/useEscapeKey.ts

@@ -0,0 +1,7 @@
+/* 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.
+ */
+export function useEscapeKey(_open: boolean, _onEscape: () => void) {}

package/src/overlay/useEscapeKey.web.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Closes an overlay when the user presses the Escape key.
+ * Web-only — native platforms use Modal's `onRequestClose` for back/dismiss.
+ */
+export function useEscapeKey(open: boolean, onEscape: () => void) {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onEscapeRef.current();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+}

package/src/progress/context.tsx

@@ -0,0 +1,13 @@
+import { createContext } from '@cdx-ui/utils';
+import type { ProgressDataState } from './types';
+
+export interface ProgressContextValue {
+  /** Clamped value in [0, max], or null when indeterminate */
+  readonly value: number | null;
+  readonly max: number;
+  readonly percent: number;
+  readonly state: ProgressDataState;
+}
+
+export const [ProgressProvider, useProgressContext] =
+  createContext<ProgressContextValue>('ProgressContext');

package/src/progress/createProgressIndicator.tsx

@@ -0,0 +1,35 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+import type { ViewStyle } from 'react-native';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useProgressContext } from './context';
+
+type PercentString = `${number}%`;
+
+export const createProgressIndicator = <T, R = unknown>(BaseIndicator: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T>>((props, ref) => {
+    const { style, ...rest } = props as PropsWithoutRef<T> & { style?: object };
+    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),
+    });
+
+    return (
+      <BaseIndicator
+        ref={ref as React.Ref<R>}
+        {...({
+          ...rest,
+          ...dataAttrs,
+          style: [filledStyle, style],
+        } as T)}
+      />
+    );
+  });

package/src/progress/createProgressRoot.tsx

@@ -0,0 +1,109 @@
+import type React from 'react';
+import { forwardRef, useMemo, type PropsWithoutRef } from 'react';
+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 createProgressRoot = <T, R = unknown>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef<R, PropsWithoutRef<T> & InterfaceProgressProps>((props, ref) => {
+    const {
+      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]);
+
+    return (
+      <ProgressProvider value={contextValue}>
+        <BaseRoot
+          ref={ref as React.Ref<R>}
+          {...(restProps as T)}
+          role={role}
+          accessibilityRole={accessibilityRole}
+          accessibilityValue={accessibilityValue}
+          {...dataAttrs}
+        >
+          {children}
+        </BaseRoot>
+      </ProgressProvider>
+    );
+  });

package/src/progress/index.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { createProgressIndicator } from './createProgressIndicator';
+import { createProgressRoot } from './createProgressRoot';
+import type { IProgressComponentType } from './types';
+
+export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+
+export function createProgress<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+>(components: {
+  Root: React.ComponentType<RootProps>;
+  Indicator: React.ComponentType<IndicatorProps>;
+}) {
+  const Progress = createProgressRoot<RootProps, RootRef>(components.Root);
+  const Indicator = createProgressIndicator<IndicatorProps, IndicatorRef>(components.Indicator);
+
+  Progress.displayName = 'ProgressPrimitive';
+  Indicator.displayName = 'ProgressPrimitive.Indicator';
+
+  return Object.assign(Progress, {
+    Indicator,
+  }) as IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
+}

package/src/progress/types.ts

@@ -0,0 +1,37 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } 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 IProgressComponentType<
+  RootProps,
+  IndicatorProps,
+  RootRef = unknown,
+  IndicatorRef = unknown,
+> = ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & InterfaceProgressProps> & RefAttributes<RootRef>
+> & {
+  Indicator: ForwardRefExoticComponent<
+    PropsWithoutRef<IndicatorProps> & RefAttributes<IndicatorRef>
+  >;
+};
+
+export type IProgressProps = InterfaceProgressProps;

package/src/select/context.tsx

@@ -1,56 +1,21 @@
-import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
-const defaultContextValue: SelectContextValue = {
-  open: false,
-  items: [],
-  setOpen: () => {},
-  value: undefined,
-  onValueChange: () => {},
-  disabled: false,
-  required: false,
-  invalid: false,
-  readOnly: false,
-  native: false,
-  triggerRef: { current: null },
-  contentId: '',
-  triggerId: '',
-  activeValue: undefined,
-  setActiveValue: () => {}, // TODO: Is this needed? At the very least it could be moved to SelectContent
-  accessibilityLabel: undefined,
-};
-
-export const SelectContext = createContext<SelectContextValue>(defaultContextValue);
-
-export const useSelectContext = () => useContext(SelectContext);
+export const [SelectProvider, useSelectContext] =
+  createContext<SelectContextValue>('SelectContext');
 
 /**
  * Propagates the trigger's interaction state (hover, focus, active, etc.) to
  * child components like SelectValue and SelectIcon so they can apply matching
  * data-attribute styles.
  */
-export const SelectTriggerContext = createContext<InteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-});
-
-export const useSelectTriggerContext = () => useContext(SelectTriggerContext);
+export const [SelectTriggerProvider, useSelectTriggerContext] =
+  createContext<InteractionState>('SelectTriggerContext');
 
 /**
  * Propagates the item's interaction and selection state (hover, focus, active,
  * highlighted, checked, etc.) to child components like SelectItemLabel.
  */
-export const SelectItemContext = createContext<SelectItemInteractionState>({
-  hover: false,
-  focus: false,
-  active: false,
-  disabled: false,
-  focusVisible: false,
-  highlighted: false,
-  checked: false,
-});
-
-export const useSelectItemContext = () => useContext(SelectItemContext);
+export const [SelectItemProvider, useSelectItemContext] =
+  createContext<SelectItemInteractionState>('SelectItemContext');

package/src/select/createSelectItem.tsx

@@ -4,7 +4,7 @@ import { composeEventHandlers } 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 { SelectItemContext, useSelectContext } from './context';
+import { SelectItemProvider, useSelectContext } from './context';
 import type { ISelectItemProps } from './types';
 
 export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
@@ -74,7 +74,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
       );
 
       return (
-        <SelectItemContext.Provider value={interactionState}>
+        <SelectItemProvider value={interactionState}>
           <BaseItem
             ref={ref}
             role="option"
@@ -115,7 +115,7 @@ export const createSelectItem = <T,>(BaseItem: React.ComponentType<T>) =>
           >
             {children}
           </BaseItem>
-        </SelectItemContext.Provider>
+        </SelectItemProvider>
       );
     },
   );