@cdx-ui/primitives 0.0.1-alpha.34 → 0.0.1-alpha.36

package/lib/typescript/form/types.d.ts

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

package/lib/typescript/form/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/form/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;CAAG;AAElC,MAAM,MAAM,kBAAkB,CAAC,IAAI,IAAI,KAAK,CAAC,yBAAyB,CACpE,8BAA8B,CAAC,IAAI,CAAC,GAAG,cAAc,CACtD,CAAC;AAEF,KAAK,8BAA8B,CAAC,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC"}

package/lib/typescript/index.d.ts

@@ -2,12 +2,14 @@ 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 './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './progress';
 export type { InteractionState } from './types';
 export { dataAttributes } from './utils/dataAttributes';
 //# sourceMappingURL=index.d.ts.map

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,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,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/progress/context.d.ts

@@ -0,0 +1,13 @@
+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 declare const ProgressProvider: import("react").FunctionComponent<{
+    children: import("react").ReactNode;
+    value: ProgressContextValue;
+}>, useProgressContext: () => ProgressContextValue;
+//# sourceMappingURL=context.d.ts.map

package/lib/typescript/progress/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/progress/context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,oBAAoB;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;CACnC;AAED,eAAO,MAAO,gBAAgB;;;IAAE,kBAAkB,4BACM,CAAC"}

package/lib/typescript/progress/createProgressIndicator.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const createProgressIndicator: <T, R = unknown>(BaseIndicator: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<React.PropsWithoutRef<T>> & React.RefAttributes<R>>;
+//# sourceMappingURL=createProgressIndicator.d.ts.map

package/lib/typescript/progress/createProgressIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createProgressIndicator.d.ts","sourceRoot":"","sources":["../../../src/progress/createProgressIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,uBAAuB,GAAI,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,eAAe,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,8GA0BzF,CAAC"}

package/lib/typescript/progress/createProgressRoot.d.ts

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

package/lib/typescript/progress/createProgressRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createProgressRoot.d.ts","sourceRoot":"","sources":["../../../src/progress/createProgressRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,sBAAsB,EAAqB,MAAM,SAAS,CAAC;AA8BzE,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAE,CAAC,GAAG,OAAO,EAAE,UAAU,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,uIA0E/E,CAAC"}

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

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { IProgressComponentType } from './types';
+export type { IProgressProps, IProgressComponentType, ProgressDataState } from './types';
+export type { ProgressContextValue } from './context';
+export { useProgressContext } from './context';
+export declare function createProgress<RootProps, IndicatorProps, RootRef = unknown, IndicatorRef = unknown>(components: {
+    Root: React.ComponentType<RootProps>;
+    Indicator: React.ComponentType<IndicatorProps>;
+}): IProgressComponentType<RootProps, IndicatorProps, RootRef, IndicatorRef>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,YAAY,EAAE,cAAc,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACzF,YAAY,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAE/C,wBAAgB,cAAc,CAC5B,SAAS,EACT,cAAc,EACd,OAAO,GAAG,OAAO,EACjB,YAAY,GAAG,OAAO,EACtB,UAAU,EAAE;IACZ,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACrC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;CAChD,GASO,sBAAsB,CAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,CAAC,CAC/E"}

package/lib/typescript/progress/types.d.ts

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

package/lib/typescript/progress/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/progress/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,MAAM,MAAM,sBAAsB,CAChC,SAAS,EACT,cAAc,EACd,OAAO,GAAG,OAAO,EACjB,YAAY,GAAG,OAAO,IACpB,yBAAyB,CAC3B,eAAe,CAAC,SAAS,GAAG,sBAAsB,CAAC,GAAG,aAAa,CAAC,OAAO,CAAC,CAC7E,GAAG;IACF,SAAS,EAAE,yBAAyB,CAClC,eAAe,CAAC,cAAc,CAAC,GAAG,aAAa,CAAC,YAAY,CAAC,CAC9D,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-alpha.34",
+  "version": "0.0.1-alpha.36",
   "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.34"
+    "@cdx-ui/utils": "0.0.1-alpha.36"
   },
   "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,11 +2,13 @@ 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 './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './progress';
 export type { InteractionState } from './types';
 export { dataAttributes } from './utils/dataAttributes';

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