@cdx-ui/primitives 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/dialog/types.ts

@@ -0,0 +1,88 @@
+import type { PropsWithoutRef, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+
+export interface IDialogContextType {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly closeOnBackdropPress: boolean;
+  readonly closeOnEscKey: boolean;
+  readonly nativeID: string;
+  readonly role: 'dialog' | 'alertdialog';
+}
+
+export interface IDialogRootProps {
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly defaultOpen?: boolean;
+  readonly closeOnBackdropPress?: boolean;
+  readonly closeOnEscKey?: boolean;
+  readonly role?: 'dialog' | 'alertdialog';
+  readonly children: React.ReactNode;
+}
+
+export interface IDialogTriggerProps extends PressableProps {
+  readonly asChild?: boolean;
+}
+
+export interface IDialogContentProps extends ViewProps {
+  readonly forceMount?: boolean;
+}
+
+export interface IDialogOverlayProps extends PressableProps {}
+
+export interface IDialogHeaderProps extends ViewProps {}
+
+export interface IDialogTitleProps extends TextProps {}
+
+export interface IDialogDescriptionProps extends TextProps {}
+
+export interface IDialogBodyProps extends ViewProps {}
+
+export interface IDialogFooterProps extends ViewProps {}
+
+export interface IDialogCloseProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly accessibilityLabel?: string;
+}
+
+export type IDialogComponentType<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+  ContentRef = unknown,
+  TriggerRef = unknown,
+  CloseRef = unknown,
+> = React.ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & IDialogRootProps> & RefAttributes<unknown>
+> & {
+  Trigger: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TriggerProps & IDialogTriggerProps> & RefAttributes<TriggerRef>
+  >;
+  Content: React.ForwardRefExoticComponent<
+    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<ContentRef>
+  >;
+  Header: React.ForwardRefExoticComponent<
+    PropsWithoutRef<HeaderProps & IDialogHeaderProps> & RefAttributes<unknown>
+  >;
+  Title: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TitleProps & IDialogTitleProps> & RefAttributes<unknown>
+  >;
+  Description: React.ForwardRefExoticComponent<
+    PropsWithoutRef<DescriptionProps & IDialogDescriptionProps> & RefAttributes<unknown>
+  >;
+  Body: React.ForwardRefExoticComponent<
+    PropsWithoutRef<BodyProps & IDialogBodyProps> & RefAttributes<unknown>
+  >;
+  Footer: React.ForwardRefExoticComponent<
+    PropsWithoutRef<FooterProps & IDialogFooterProps> & RefAttributes<unknown>
+  >;
+  Close: React.ForwardRefExoticComponent<
+    PropsWithoutRef<CloseProps & IDialogCloseProps> & RefAttributes<CloseRef>
+  >;
+};

package/src/field/createFieldError.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFieldError = <T,>(BaseFormError: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { isInvalid, feedbackId, setHasFeedbackText } = useFormControlContext();
+
+    const visible = Boolean(isInvalid && children);
+
+    React.useEffect(() => {
+      if (!visible) {
+        setHasFeedbackText?.(false);
+        return undefined;
+      }
+      setHasFeedbackText?.(true);
+      return () => {
+        setHasFeedbackText?.(false);
+      };
+    }, [setHasFeedbackText, visible]);
+
+    return visible ? (
+      <BaseFormError
+        ref={ref}
+        {...(props as T)}
+        id={feedbackId}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="assertive"
+      >
+        {children}
+      </BaseFormError>
+    ) : null;
+  });

package/src/field/createFieldErrorIcon.tsx

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

package/src/field/createFieldErrorText.tsx

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

package/src/field/createFieldHelper.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+
+export const createFieldHelper = <T,>(BaseFormHelper: React.ComponentType<T>) =>
+  forwardRef<unknown, { children?: React.ReactNode }>(({ children, ...props }, ref) => {
+    const { helpTextId, setHasHelpText, isInvalid } = useFormControlContext();
+
+    React.useEffect(() => {
+      if (isInvalid) {
+        setHasHelpText?.(false);
+        return undefined;
+      }
+      setHasHelpText?.(true);
+      return () => {
+        setHasHelpText?.(false);
+      };
+    }, [setHasHelpText, isInvalid]);
+
+    if (isInvalid) {
+      return null;
+    }
+
+    return (
+      <BaseFormHelper ref={ref} {...(props as T)} id={helpTextId}>
+        {children}
+      </BaseFormHelper>
+    );
+  });

package/src/field/createFieldHelperText.tsx

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

package/src/field/createFieldLabel.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFieldLabelProps } from './types';
+
+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;
+      const labelId = field.labelId;
+
+      /** Must match `useFormControl` default: `props.id ?? \`${field.id}-input\``. */
+      const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+
+      return (
+        <BaseFormLabel
+          ref={ref}
+          {...(props as T)}
+          id={labelId}
+          htmlFor={htmlFor}
+          {...dataAttributes({ invalid: field.isInvalid, required: field.isRequired })}
+        >
+          {children}
+          {field.isRequired ? requiredIndicator : null}
+        </BaseFormLabel>
+      );
+    },
+  );

package/src/field/createFieldRoot.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import { useFormControlRoot, FormControlContext } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IFieldRootProps } from './types';
+
+export const createFieldRoot = <T,>(BaseFormField: React.ComponentType<T>) =>
+  forwardRef(
+    ({ children, ...props }: IFieldRootProps & { children?: React.ReactNode }, ref?: unknown) => {
+      const { htmlProps, ...context } = useFormControlRoot(props);
+
+      return (
+        <FormControlContext.Provider value={context}>
+          <BaseFormField
+            ref={ref}
+            {...(htmlProps as T)}
+            {...dataAttributes({
+              disabled: context.isDisabled,
+              invalid: context.isInvalid,
+              required: context.isRequired,
+            })}
+          >
+            {children}
+          </BaseFormField>
+        </FormControlContext.Provider>
+      );
+    },
+  );

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/field/types.tsx

@@ -0,0 +1,78 @@
+import type React from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+
+/**
+ * Props for a single form field (`Form.Field`).
+ * Provides field-level context (name, validation state, ids) to children.
+ *
+ * **Initial focus:** use `autoFocus` on `Input.Field` (or your control). `TextInput` / DOM
+ * inputs support it natively. Do not rely on `Form.Field` for autofocus — it does not forward
+ * to a single child.
+ *
+ * **Submit UX:** "focus first invalid on error" needs form-level validation state; not built in yet.
+ */
+export interface IFieldRootProps extends ViewProps {
+  /** Unique id for this field. Auto-generated if not provided. */
+  readonly id?: string;
+  /**
+   * Field name for form submission. Passed through context so child inputs
+   * automatically receive it as their `name` attribute for `FormData` support.
+   */
+  readonly name?: string;
+  /** If true, the field is marked as invalid. Controls error visibility. */
+  readonly isInvalid?: boolean;
+  /** If true, the field is marked as required. Shows asterisk on label. */
+  readonly isRequired?: boolean;
+  /** If true, the field is disabled. */
+  readonly isDisabled?: boolean;
+  /** If true, the field is read-only. */
+  readonly isReadOnly?: boolean;
+}
+
+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"`.
+   */
+  readonly htmlFor?: string;
+  /**
+   * Element to render after the label text when the field is required.
+   * Rendered by the primitive (which owns the form-control context) so the
+   * styled layer never needs to read `FormControlContext` across packages.
+   */
+  readonly requiredIndicator?: React.ReactNode;
+}
+
+export interface IFieldHelperProps extends ViewProps {}
+
+export interface IFieldHelperTextProps extends TextProps {}
+
+export interface IFieldErrorProps extends ViewProps {}
+
+export interface IFieldErrorTextProps extends TextProps {}
+
+export interface IFieldErrorIconProps extends ViewProps {}
+
+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/createFormRoot.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef } from 'react';
+import type { IFormRootProps, IFormComponentType } from './types';
+
+// TODO: Handle web submission (button type submit)
+
+export const createFormRoot = <T,>(BaseFormRoot: React.ComponentType<T>): IFormComponentType<T> =>
+  forwardRef(
+    ({ 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

@@ -1,7 +1,15 @@
+export * from './avatar';
 export * from './button';
 export * from './checkbox';
+export * from './dialog';
+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';
 export * from './switch';
+export * from './progress';
 export type { InteractionState } from './types';
+export { dataAttributes } from './utils/dataAttributes';

package/src/input/createInputField.tsx

@@ -6,7 +6,7 @@ import {
   Platform,
   type TextInputKeyPressEvent,
 } from 'react-native';
-import { mergeRefs, useFormControl } from '@cdx-ui/utils';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { dataAttributes } from '../utils/dataAttributes';
 import { useInputContext } from './context';
 import type { IInputProps } from './types';
@@ -18,7 +18,8 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         children,
         onKeyPress,
         type = 'text',
-        'aria-label': ariaLabel = 'Input Field',
+        accessibilityLabel,
+        'aria-label': ariaLabelProp,
         secureTextEntry,
         editable,
         disabled,
@@ -46,15 +47,22 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
         id: props.id,
       });
 
+      const field = useFormControlContext();
+
       const handleFocus = (focusState: boolean, callback: any) => {
         setIsFocused(focusState);
         callback();
       };
 
-      const mergedRef = mergeRefs(ref, inputFieldRef);
+      const mergedRef =
+        Platform.OS === 'web'
+          ? mergeRefs(ref, inputFieldRef)
+          : mergeRefs(ref, inputFieldRef, field.inputRef);
 
       const isEffectivelyDisabled = isDisabled || inputProps.disabled;
 
+      const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
       const editableProp = useMemo(() => {
         if (editable !== undefined) {
           return editable;
@@ -64,6 +72,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
 
       return (
         <BaseInputField
+          {...inputProps}
           {...(props as T)}
           type={type}
           {...dataAttributes({
@@ -78,6 +87,7 @@ export const createInputField = <T,>(BaseInputField: React.ComponentType<T>) =>
           disabled={isEffectivelyDisabled}
           secureTextEntry={secureTextEntry || type === 'password'}
           accessible
+          accessibilityLabel={ariaLabel}
           aria-label={ariaLabel}
           aria-required={isRequired || inputProps.required}
           aria-invalid={isInvalid || inputProps['aria-invalid']}

package/src/input/index.tsx

@@ -1,5 +1,5 @@
+import type React from 'react';
 import { createInputField } from './createInputField';
-import { createInputIcon } from './createInputIcon';
 import { createInputRoot } from './createInputRoot';
 import { createInputSlot } from './createInputSlot';
 import type { IInputComponentType } from './types';
@@ -12,40 +12,27 @@ export type {
   IInputSlotProps,
 } from './types';
 
-export const createInput = <
+export function createInput<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
   FieldRef = unknown,
->({
-  Root,
-  Icon,
-  Slot,
-  Field,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<RootProps>;
-  Icon: React.ComponentType<IconProps>;
   Slot: React.ComponentType<SlotProps>;
   Field: React.ComponentType<FieldProps>;
-}) => {
-  const Input = createInputRoot(Root) as any;
-  Input.Icon = createInputIcon(Icon);
-  Input.Slot = createInputSlot(Slot);
-  Input.Field = createInputField(Field);
+}) {
+  const Input = createInputRoot(BaseComponents.Root);
+  const Slot = createInputSlot(BaseComponents.Slot);
+  const Field = createInputField(BaseComponents.Field);
 
-  Input.displayName = 'Input';
-  Input.Icon.displayName = 'Input.Icon';
-  Input.Slot.displayName = 'Input.Slot';
-  Input.Field.displayName = 'Input.Field';
+  Input.displayName = 'InputPrimitive';
+  Slot.displayName = 'InputPrimitive.Slot';
+  Field.displayName = 'InputPrimitive.Field';
 
-  return Input as IInputComponentType<
-    RootProps,
-    IconProps,
-    SlotProps,
-    FieldProps,
-    RootRef,
-    FieldRef
-  >;
-};
+  return Object.assign(Input, {
+    Slot,
+    Field,
+  }) as IInputComponentType<RootProps, SlotProps, FieldProps, RootRef, FieldRef>;
+}

package/src/input/types.ts

@@ -93,7 +93,6 @@ export interface IInputSlotProps extends ViewProps {
 
 export type IInputComponentType<
   RootProps,
-  IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
@@ -101,9 +100,6 @@ export type IInputComponentType<
 > = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<RootProps & IInputFieldProps> & React.RefAttributes<RootRef>
 > & {
-  Icon: React.ForwardRefExoticComponent<
-    React.PropsWithoutRef<IconProps> & React.RefAttributes<unknown>
-  >;
   Slot: React.ForwardRefExoticComponent<
     React.PropsWithoutRef<SlotProps & IInputSlotProps> & React.RefAttributes<unknown>
   >;

package/src/link/LinkProvider.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { LinkAction } from './types';
+
+export interface LinkConfig {
+  /**
+   * Global navigation handler for `<Link>` instances whose `href` passes the
+   * `shouldNavigate` check. Called with the `href` and the per-instance `action`.
+   *
+   * @param href   - The URL or path to navigate to.
+   * @param action - Navigation intent from the per-instance `action` prop:
+   *                 `'navigate'` (default) — smart navigation, avoids duplicates.
+   *                 `'push'` — always pushes a new entry onto the stack.
+   *                 `'replace'` — replaces the current entry without stacking.
+   */
+  navigate: (href: string, action: LinkAction) => void | Promise<void>;
+
+  /**
+   * Optional predicate evaluated at **render time** to decide whether the
+   * provider should handle a given `href`.
+   *
+   * - Returns `true`  → the provider's `navigate` is called on press;
+   *   on web the native `<a href>` is **removed** so the browser doesn't
+   *   follow the link.
+   * - Returns `false` → the provider is bypassed; on web the `<a href>` is
+   *   preserved (cmd-click, SEO, etc.); on native `Linking.openURL` is used.
+   *
+   * Defaults to `() => true` when omitted (all hrefs go through the provider).
+   */
+  shouldNavigate?: (href: string) => boolean;
+}
+
+const LinkConfigContext = createContext<LinkConfig | undefined>(undefined);
+
+export function LinkProvider({
+  navigate,
+  shouldNavigate,
+  children,
+}: LinkConfig & { children: ReactNode }) {
+  return (
+    <LinkConfigContext.Provider value={{ navigate, shouldNavigate }}>
+      {children}
+    </LinkConfigContext.Provider>
+  );
+}
+
+LinkProvider.displayName = 'LinkProvider';
+
+export function useLinkConfig(): LinkConfig | undefined {
+  return useContext(LinkConfigContext);
+}