@cdx-ui/primitives 0.0.1-alpha.35 → 0.0.1-alpha.37

package/lib/typescript/index.d.ts

@@ -2,8 +2,10 @@ export * from './avatar';
 export * from './button';
 export * from './checkbox';
 export * from './dialog';
-export * from './form-control';
+export * from './field';
+export * from './form';
 export * from './input';
+export * from './otp-input';
 export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,KAAK,UAAU,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACnE,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/typescript/otp-input/context.d.ts

@@ -0,0 +1,10 @@
+import type { OtpInputCellIndexContextValue, OtpInputContextValue } from './types';
+export declare const OtpInputProvider: import("react").FunctionComponent<{
+    children: import("react").ReactNode;
+    value: OtpInputContextValue;
+}>, useOtpInputContext: () => OtpInputContextValue;
+export declare const OtpCellIndexProvider: import("react").FunctionComponent<{
+    children: import("react").ReactNode;
+    value: OtpInputCellIndexContextValue;
+}>, useOtpCellIndexContext: () => OtpInputCellIndexContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/otp-input/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/otp-input/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEnF,eAAO,MAAO,gBAAgB;;;IAAE,kBAAkB,4BACM,CAAC;AAEzD,eAAO,MAAO,oBAAoB;;;IAAE,sBAAsB,qCACW,CAAC"}

package/lib/typescript/otp-input/createOtpInputCell.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { IOtpInputCellProps } from './types';
+export declare const createOtpInputCell: <T>(BaseCell: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithChildren<IOtpInputCellProps & T>> & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createOtpInputCell.d.ts.map

package/lib/typescript/otp-input/createOtpInputCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOtpInputCell.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAG,UAAU,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,2IAenE,CAAC"}

package/lib/typescript/otp-input/createOtpInputField.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import { type TextInput } from 'react-native';
+export declare const createOtpInputField: <T>(BaseField: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<import("react-native").TextInputProps & Omit<T, keyof import("react-native").TextInputProps>> & React.RefAttributes<TextInput>>;
+//# sourceMappingURL=createOtpInputField.d.ts.map

package/lib/typescript/otp-input/createOtpInputField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOtpInputField.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,KAAK,SAAS,EAA+B,MAAM,cAAc,CAAC;AAKrF,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAG,WAAW,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,0LA0FrE,CAAC"}

package/lib/typescript/otp-input/createOtpInputRoot.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { IOtpInputRootProps } from './types';
+export declare const createOtpInputRoot: <RootProps>(BaseRoot: React.ComponentType<RootProps>, OtpCell: React.ComponentType<any>, OtpField: React.ComponentType<any>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<IOtpInputRootProps & RootProps> & React.RefAttributes<unknown>>;
+//# sourceMappingURL=createOtpInputRoot.d.ts.map

package/lib/typescript/otp-input/createOtpInputRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOtpInputRoot.d.ts","sourceRoot":"","sources":["../../../src/otp-input/createOtpInputRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,kBAAkB,GAAI,SAAS,EAC1C,UAAU,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,EAExC,SAAS,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAEjC,UAAU,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,0HAoKjC,CAAC"}

package/lib/typescript/otp-input/index.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import type { IOtpInputComponentType } from './types';
+export { applyOtpInputChange } from './utils/applyValueChange';
+export { filterAllowedCharacters, filterByRegExp, filterDigits } from './utils/filterValue';
+export type * from './types';
+export declare function createOtpInput<RootProps, CellProps, FieldProps, RootRef = unknown, FieldRef = unknown>(BaseComponents: {
+    Root: React.ComponentType<RootProps>;
+    Cell: React.ComponentType<CellProps>;
+    Field: React.ComponentType<FieldProps>;
+}): IOtpInputComponentType<RootProps, CellProps, FieldProps, RootRef, FieldRef>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/otp-input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC5F,mBAAmB,SAAS,CAAC;AAE7B,wBAAgB,cAAc,CAC5B,SAAS,EACT,SAAS,EACT,UAAU,EACV,OAAO,GAAG,OAAO,EACjB,QAAQ,GAAG,OAAO,EAClB,cAAc,EAAE;IAChB,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;CACxC,GAYO,sBAAsB,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAClF"}

package/lib/typescript/otp-input/types.d.ts

@@ -0,0 +1,75 @@
+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>>;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/otp-input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/otp-input/types.ts"],"names":[],"mappings":"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"}

package/lib/typescript/otp-input/utils/applyValueChange.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function applyOtpInputChange(value: string, index: number, rawText: string, cellCount: number, filter: (input: string) => string): {
+    nextValue: string;
+    focusIndex: number;
+};
+//# sourceMappingURL=applyValueChange.d.ts.map

package/lib/typescript/otp-input/utils/applyValueChange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyValueChange.d.ts","sourceRoot":"","sources":["../../../../src/otp-input/utils/applyValueChange.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAChC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CA4C3C"}

package/lib/typescript/otp-input/utils/filterValue.d.ts

@@ -0,0 +1,7 @@
+/** Strip to digits (default OTP behavior). */
+export declare function filterDigits(input: string): string;
+/** Keep only characters present in `allowed` (treat as a set of UTF-16 code units). */
+export declare function filterAllowedCharacters(allowed: string): (input: string) => string;
+/** Keep only characters matching `re` (tested per UTF-16 code unit). */
+export declare function filterByRegExp(re: RegExp): (input: string) => string;
+//# sourceMappingURL=filterValue.d.ts.map

package/lib/typescript/otp-input/utils/filterValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterValue.d.ts","sourceRoot":"","sources":["../../../../src/otp-input/utils/filterValue.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,uFAAuF;AACvF,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,MAAM,IAK7C,OAAO,MAAM,YAUtB;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,IAC/B,OAAO,MAAM,YAWtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-alpha.35",
+  "version": "0.0.1-alpha.37",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -57,7 +57,7 @@
     "@react-native-aria/interactions": "^0.2.16",
     "@react-stately/checkbox": "3.7.4",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-alpha.35"
+    "@cdx-ui/utils": "0.0.1-alpha.37"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/{form-control/createFormError.tsx → field/createFieldError.tsx}

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useFormControlContext } from '@cdx-ui/utils';
 
-export const createFormError = <T,>(BaseFormError: React.ComponentType<T>) =>
+export const createFieldError = <T,>(BaseFormError: React.ComponentType<T>) =>
   forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
     const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
 

package/src/{form-control/createFormErrorIcon.tsx → field/createFieldErrorIcon.tsx}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { forwardRef } from 'react';
 
-export const createFormErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
+export const createFieldErrorIcon = <T,>(BaseFormErrorIcon: React.ComponentType<T>) =>
   forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
     <BaseFormErrorIcon ref={ref} {...(props as T)}>
       {children}

package/src/{form-control/createFormErrorText.tsx → field/createFieldErrorText.tsx}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { forwardRef } from 'react';
 
-export const createFormErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
+export const createFieldErrorText = <T,>(BaseFormErrorText: React.ComponentType<T>) =>
   forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
     <BaseFormErrorText ref={ref} {...(props as T)}>
       {children}

package/src/{form-control/createFormHelper.tsx → field/createFieldHelper.tsx}

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useFormControlContext } from '@cdx-ui/utils';
 
-export const createFormHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
+export const createFieldHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
   forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
     const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
 

package/src/{form-control/createFormHelperText.tsx → field/createFieldHelperText.tsx}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import { forwardRef } from 'react';
 
-export const createFormHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
+export const createFieldHelperText = <T,>(BaseFormHelperText: React.ComponentType<T>) =>
   forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => (
     <BaseFormHelperText ref={ref} {...(props as T)}>
       {children}

package/src/{form-control/createFormLabel.tsx → field/createFieldLabel.tsx}

@@ -2,10 +2,10 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import { useFormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
-import type { IFormLabelProps } from './types';
+import type { IFieldLabelProps } from './types';
 
-export const createFormLabel = <T,>({ Label: BaseFormLabel }: { Label: React.ComponentType<T> }) =>
-  forwardRef<unknown, IFormLabelProps & { children?: React.ReactNode }>(
+export const createFieldLabel = <T,>(BaseFormLabel: React.ComponentType<T>) =>
+  forwardRef<unknown, IFieldLabelProps & { children?: React.ReactNode }>(
     ({ children, htmlFor: htmlForProp, requiredIndicator, ...props }, ref) => {
       const field = useFormControlContext();
       const fieldId = field.id;

package/src/{form-control/createFormField.tsx → field/createFieldRoot.tsx}

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
-import type { IFormFieldProps } from './types';
+import type { IFieldRootProps } from './types';
 
-export const createFormField = <T,>(BaseFormField: React.ComponentType<T>) =>
+export const createFieldRoot = <T,>(BaseFormField: React.ComponentType<T>) =>
   forwardRef(
-    ({ children, ...props }: IFormFieldProps & { children?: React.ReactNode }, ref?: unknown) => {
+    ({ children, ...props }: IFieldRootProps & { children?: React.ReactNode }, ref?: unknown) => {
       const { htmlProps, ...context } = useFormControlRoot(props);
 
       return (

package/src/field/index.tsx

@@ -0,0 +1,68 @@
+import type React from 'react';
+import { createFieldError } from './createFieldError';
+import { createFieldErrorIcon } from './createFieldErrorIcon';
+import { createFieldErrorText } from './createFieldErrorText';
+import { createFieldRoot } from './createFieldRoot';
+import { createFieldHelper } from './createFieldHelper';
+import { createFieldHelperText } from './createFieldHelperText';
+import { createFieldLabel } from './createFieldLabel';
+import type { IFieldComponentType } from './types';
+
+export type {
+  IFieldRootProps,
+  IFieldLabelProps,
+  IFieldHelperProps,
+  IFieldHelperTextProps,
+  IFieldErrorProps,
+  IFieldErrorTextProps,
+  IFieldErrorIconProps,
+  IFieldComponentType,
+} from './types';
+
+export function createField<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon>({
+  Root,
+  Label,
+  Helper,
+  HelperText,
+  Error,
+  ErrorText,
+  ErrorIcon,
+}: {
+  Root: React.ComponentType<Root>;
+  Label: React.ComponentType<Label>;
+  Helper: React.ComponentType<Helper>;
+  HelperText: React.ComponentType<HelperText>;
+  Error: React.ComponentType<Error>;
+  ErrorText: React.ComponentType<ErrorText>;
+  ErrorIcon: React.ComponentType<ErrorIcon>;
+}) {
+  const FieldRoot = createFieldRoot(Root);
+  FieldRoot.displayName = 'FieldPrimitive';
+
+  const FieldLabel = createFieldLabel(Label);
+  FieldLabel.displayName = 'FieldPrimitive.Label';
+
+  const FieldHelper = createFieldHelper(Helper);
+  FieldHelper.displayName = 'FieldPrimitive.Helper';
+
+  const FieldHelperText = createFieldHelperText(HelperText);
+  FieldHelperText.displayName = 'FieldPrimitive.HelperText';
+
+  const FieldError = createFieldError(Error);
+  FieldError.displayName = 'FieldPrimitive.Error';
+
+  const FieldErrorText = createFieldErrorText(ErrorText);
+  FieldErrorText.displayName = 'FieldPrimitive.ErrorText';
+
+  const FieldErrorIcon = createFieldErrorIcon(ErrorIcon);
+  FieldErrorIcon.displayName = 'FieldPrimitive.ErrorIcon';
+
+  return Object.assign(FieldRoot, {
+    Label: FieldLabel,
+    Helper: FieldHelper,
+    HelperText: FieldHelperText,
+    Error: FieldError,
+    ErrorText: FieldErrorText,
+    ErrorIcon: FieldErrorIcon,
+  }) as IFieldComponentType<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon>;
+}

package/src/{form-control → field}/types.tsx

@@ -1,15 +1,6 @@
 import type React from 'react';
 import type { TextProps, ViewProps } from 'react-native';
 
-/**
- * Props for the Form container (`<form>` on web, `<View>` on RN).
- * Does NOT provide field-level context — use `Form.Field` for that.
- *
- * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
- * platform-specific base component (`FormRoot.web.tsx`), not here.
- */
-export interface IFormProps {}
-
 /**
  * Props for a single form field (`Form.Field`).
  * Provides field-level context (name, validation state, ids) to children.
@@ -20,7 +11,7 @@ export interface IFormProps {}
  *
  * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
  */
-export interface IFormFieldProps extends ViewProps {
+export interface IFieldRootProps extends ViewProps {
   /** Unique id for this field. Auto-generated if not provided. */
   readonly id?: string;
   /**
@@ -38,7 +29,7 @@ export interface IFormFieldProps extends ViewProps {
   readonly isReadOnly?: boolean;
 }
 
-export interface IFormLabelProps extends TextProps {
+export interface IFieldLabelProps extends TextProps {
   /**
    * Associates the label with a control `id` on web (`<label htmlFor>`).
    * If omitted, defaults to the same id `Input.Field` gets from form context: `fieldId + "-input"`.
@@ -52,41 +43,36 @@ export interface IFormLabelProps extends TextProps {
   readonly requiredIndicator?: React.ReactNode;
 }
 
-export interface IFormHelperProps extends ViewProps {}
+export interface IFieldHelperProps extends ViewProps {}
 
-export interface IFormHelperTextProps extends TextProps {}
+export interface IFieldHelperTextProps extends TextProps {}
 
-export interface IFormErrorProps extends ViewProps {}
+export interface IFieldErrorProps extends ViewProps {}
 
-export interface IFormErrorTextProps extends TextProps {}
+export interface IFieldErrorTextProps extends TextProps {}
 
-export interface IFormErrorIconProps extends ViewProps {}
+export interface IFieldErrorIconProps extends ViewProps {}
 
-export type IFormComponentType<
-  Root,
-  Field,
-  Error,
-  ErrorText,
-  ErrorIcon,
-  Label,
-  Helper,
-  HelperText,
-> = React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFormProps> & {
-  Field: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Field> & IFormFieldProps>;
-  Label: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Label> & IFormLabelProps>;
-  Helper: React.ForwardRefExoticComponent<
-    InnerForwardRefExoticComponent<Helper> & IFormHelperProps
-  >;
-  HelperText: React.ForwardRefExoticComponent<
-    InnerForwardRefExoticComponent<HelperText> & IFormHelperTextProps
-  >;
-  Error: React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Error> & IFormErrorProps>;
-  ErrorText: React.ForwardRefExoticComponent<
-    InnerForwardRefExoticComponent<ErrorText> & IFormErrorTextProps
-  >;
-  ErrorIcon: React.ForwardRefExoticComponent<
-    InnerForwardRefExoticComponent<ErrorIcon> & IFormErrorIconProps
-  >;
-};
+export type IFieldComponentType<Root, Label, Helper, HelperText, Error, ErrorText, ErrorIcon> =
+  React.ForwardRefExoticComponent<InnerForwardRefExoticComponent<Root> & IFieldRootProps> & {
+    Label: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Label> & IFieldLabelProps
+    >;
+    Helper: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Helper> & IFieldHelperProps
+    >;
+    HelperText: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<HelperText> & IFieldHelperTextProps
+    >;
+    Error: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<Error> & IFieldErrorProps
+    >;
+    ErrorText: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<ErrorText> & IFieldErrorTextProps
+    >;
+    ErrorIcon: React.ForwardRefExoticComponent<
+      InnerForwardRefExoticComponent<ErrorIcon> & IFieldErrorIconProps
+    >;
+  };
 
 type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/{form-control → form}/createFormRoot.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
-import type { IFormProps } from './types';
+import type { IFormRootProps, IFormComponentType } from './types';
 
 // TODO: Handle web submission (button type submit)
 
-export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>) =>
+export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>): IFormComponentType<T> =>
   forwardRef(
-    ({ children, ...props }: IFormProps & { children?: React.ReactNode }, ref?: unknown) => (
+    ({ children, ...props }: IFormRootProps & { children?: React.ReactNode }, ref?: unknown) => (
       <BaseFormRoot ref={ref} {...(props as T)}>
         {children}
       </BaseFormRoot>

package/src/form/index.tsx

@@ -0,0 +1,12 @@
+import type React from 'react';
+import { createFormRoot } from './createFormRoot';
+
+export type { IFormRootProps, IFormComponentType } from './types';
+
+export function createForm<Root>({ Root }: { Root: React.ComponentType<Root> }) {
+  const FormRoot = createFormRoot(Root);
+
+  FormRoot.displayName = 'FormPrimitive';
+
+  return FormRoot;
+}

package/src/form/types.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+
+/**
+ * Props for the Form container (`<form>` on web, `<View>` on RN).
+ * Does NOT provide field-level context — use `Form.Field` for that.
+ *
+ * Web-only submit props (`onSubmit`, `action`, `method`) belong in the
+ * platform-specific base component (`FormRoot.web.tsx`), not here.
+ */
+export interface IFormRootProps {}
+
+export type IFormComponentType<Root> = React.ForwardRefExoticComponent<
+  InnerForwardRefExoticComponent<Root> & IFormRootProps
+>;
+
+type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;

package/src/index.ts

@@ -2,8 +2,10 @@ export * from './avatar';
 export * from './button';
 export * from './checkbox';
 export * from './dialog';
-export * from './form-control';
+export * from './field';
+export * from './form';
 export * from './input';
+export * from './otp-input';
 export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';

package/src/otp-input/context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from '@cdx-ui/utils';
+import type { OtpInputCellIndexContextValue, OtpInputContextValue } from './types';
+
+export const [OtpInputProvider, useOtpInputContext] =
+  createContext<OtpInputContextValue>('OtpInputContext');
+
+export const [OtpCellIndexProvider, useOtpCellIndexContext] =
+  createContext<OtpInputCellIndexContextValue>('OtpCellIndexContext');

package/src/otp-input/createOtpInputCell.tsx

@@ -0,0 +1,22 @@
+import type React from 'react';
+import type { PropsWithChildren } from 'react';
+import { forwardRef } from 'react';
+import { useOtpInputContext } from './context';
+import type { IOtpInputCellProps } from './types';
+
+export const createOtpInputCell = <T,>(BaseCell: React.ComponentType<T>) =>
+  forwardRef<unknown, PropsWithChildren<IOtpInputCellProps & T>>(({ children, ...props }, ref) => {
+    const { isDisabled, isInvalid, isReadOnly } = useOtpInputContext();
+
+    return (
+      <BaseCell
+        ref={ref}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        {...(props as T)}
+      >
+        {children}
+      </BaseCell>
+    );
+  });