@cdx-ui/primitives 0.0.1-beta.8 → 0.0.1-beta.81

package/src/field/types.tsx

@@ -42,37 +42,3 @@ export interface IFieldLabelProps extends TextProps {
    */
   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/FormRoot.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { Slot } from '../slot';
+import type { IFormRootProps } from './types';
+
+export interface FormRootProps extends ViewProps, IFormRootProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const FormRoot = forwardRef<View, FormRootProps>(
+  ({ asChild, onSubmit: _, action: _a, method: _m, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return <Comp ref={ref} {...props} />;
+  },
+);
+
+FormRoot.displayName = 'FormRoot';

package/src/form/FormRoot.web.tsx

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { Slot } from '../slot';
+
+export interface FormRootProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  asChild?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const FormRoot = forwardRef<HTMLFormElement, FormRootProps>(({ asChild, ...props }, ref) => {
+  if (asChild) {
+    return <Slot ref={ref} {...(props as Record<string, unknown>)} />;
+  }
+  return <form ref={ref} {...props} />;
+});
+
+FormRoot.displayName = 'FormRoot';

package/src/form/index.tsx

@@ -1,12 +1,2 @@
-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;
-}
+export type { IFormRootProps } from './types';
+export { FormRoot, type FormRootProps } from './FormRoot';

package/src/form/types.tsx

@@ -1,16 +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.
+ * Cross-platform form props accepted on both native and web.
+ * Web-only props (`onSubmit`, `action`, `method`) are accepted on native
+ * for API compatibility but silently ignored.
  */
-export interface IFormRootProps {}
+export interface InterfaceFormRootProps {
+  onSubmit?: (e: React.SyntheticEvent) => void;
+  action?: string | ((formData: FormData) => void | Promise<void>);
+  method?: string;
+}
 
-export type IFormComponentType<Root> = React.ForwardRefExoticComponent<
-  InnerForwardRefExoticComponent<Root> & IFormRootProps
->;
-
-type InnerForwardRefExoticComponent<T> = React.PropsWithoutRef<T> & React.RefAttributes<unknown>;
+export type IFormRootProps = InterfaceFormRootProps;

package/src/full-window-overlay/index.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { Platform } from 'react-native';
+import { FullWindowOverlay as NativeFullWindowOverlay } from 'react-native-screens';
+
+/**
+ * Props for the FullWindowOverlay component
+ *
+ * @description
+ * FullWindowOverlay renders content in a separate native window on iOS,
+ * which allows overlays (bottom sheets, dialogs, toasts) to appear above
+ * native modals and the keyboard. However, this breaks the React Native
+ * element inspector because it attaches to the main window.
+ *
+ * Set `disableFullWindowOverlay={true}` when you need to use the element
+ * inspector during development. Note: when disabled, overlay content will
+ * not render above native modals. iOS only; has no effect on Android.
+ */
+export interface FullWindowOverlayProps {
+  /**
+   * When true, uses a regular View instead of FullWindowOverlay on iOS.
+   * Enables element inspector but overlay content won't appear above native modals.
+   * @default false
+   */
+  disableFullWindowOverlay: boolean;
+  /**
+   * Controls whether VoiceOver treats the overlay window as a modal container.
+   * When `false`, VoiceOver can still access elements behind the overlay.
+   * When `true`, VoiceOver is restricted to elements inside the overlay.
+   * @default false
+   * @platform ios
+   * @unstable This prop maps directly to the native `accessibilityViewIsModal`
+   * on the container view and may change in a future react-native-screens release.
+   */
+  unstable_accessibilityContainerViewIsModal?: boolean;
+  /**
+   * Content to render inside the overlay
+   */
+  children: ReactNode;
+}
+
+/**
+ * Wrapper for react-native-screens FullWindowOverlay with optional disable prop.
+ *
+ * @description
+ * On iOS, FullWindowOverlay creates a separate native window for overlay content,
+ * which breaks the React Native element inspector. Use `disableFullWindowOverlay`
+ * when debugging to render content in the main window instead.
+ */
+export function FullWindowOverlay({
+  disableFullWindowOverlay,
+  unstable_accessibilityContainerViewIsModal = false,
+  children,
+}: Readonly<FullWindowOverlayProps>) {
+  if (Platform.OS !== 'ios' || disableFullWindowOverlay) {
+    return <>{children}</>;
+  }
+
+  return (
+    <NativeFullWindowOverlay
+      unstable_accessibilityContainerViewIsModal={unstable_accessibilityContainerViewIsModal}
+    >
+      {children}
+    </NativeFullWindowOverlay>
+  );
+}

package/src/index.ts

@@ -1,9 +1,11 @@
 export * from './avatar';
 export * from './button';
+export * from './chip';
 export * from './checkbox';
 export * from './dialog';
 export * from './field';
 export * from './form';
+export * from './full-window-overlay';
 export * from './input';
 export * from './otp-input';
 export * from './link';
@@ -11,6 +13,17 @@ export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';
-export * from './progress';
+export * from './tile';
+export * from './toast';
+export * from './portal';
+export * from './progress-bar';
+export * from './radio';
 export type { InteractionState } from './types';
-export { dataAttributes } from './utils/dataAttributes';
+export { FormControlContext, useFormControlContext } from '@cdx-ui/utils';
+export { dataAttributes, mergeDataAttributes } from './utils/dataAttributes';
+export {
+  domDataAttributes,
+  mergeDomDataAttributes,
+  type DomDataAttributeValue,
+} from './utils/domDataAttributes';
+export { Slot } from './slot';

package/src/input/InputField.android.tsx

@@ -0,0 +1,107 @@
+import { forwardRef, useMemo } from 'react';
+import {
+  type BlurEvent,
+  type FocusEvent,
+  TextInput,
+  type TextInputKeyPressEvent,
+} from 'react-native';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useInputContext } from './context';
+import type { IInputProps } from './types';
+
+export type InputFieldProps = IInputProps;
+
+const androidDefaults = {
+  includeFontPadding: false,
+  textAlignVertical: 'center' as const,
+};
+
+export const InputField = forwardRef<TextInput, InputFieldProps>((props, ref) => {
+  const {
+    asChild,
+    children,
+    onKeyPress,
+    type = 'text',
+    accessibilityLabel,
+    'aria-label': ariaLabelProp,
+    secureTextEntry,
+    editable,
+    disabled,
+    style,
+    ...rest
+  } = props;
+
+  const { isDisabled, isReadOnly, isFocused, isInvalid, setIsFocused, inputFieldRef, isRequired } =
+    useInputContext();
+
+  const inputProps = useFormControl({
+    isDisabled: rest.isDisabled || disabled,
+    isInvalid: rest.isInvalid,
+    isReadOnly: rest.isReadOnly,
+    isRequired: rest.isRequired,
+    id: rest.id,
+  });
+
+  const field = useFormControlContext();
+
+  const reportLabelFocus = (focused: boolean) => {
+    const active = focused && !(isDisabled || inputProps.disabled);
+    field.setIsLabelFocused?.(active);
+  };
+
+  const handleFocus = (focusState: boolean, callback: () => void) => {
+    setIsFocused?.(focusState);
+    reportLabelFocus(focusState);
+    callback();
+  };
+
+  const mergedRef = mergeRefs(ref, inputFieldRef, field.inputRef);
+
+  const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+  const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
+  const editableProp = useMemo(() => {
+    if (editable !== undefined) {
+      return editable;
+    }
+    return !(isDisabled || inputProps.disabled || isReadOnly);
+  }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+
+  const Comp = asChild ? Slot : TextInput;
+
+  return (
+    <Comp
+      {...inputProps}
+      {...rest}
+      style={[androidDefaults, style]}
+      type={type}
+      disabled={isEffectivelyDisabled}
+      secureTextEntry={secureTextEntry || type === 'password'}
+      accessible
+      accessibilityLabel={ariaLabel}
+      aria-label={ariaLabel}
+      aria-required={isRequired || inputProps.required}
+      aria-invalid={isInvalid || inputProps['aria-invalid']}
+      aria-disabled={isEffectivelyDisabled}
+      aria-selected={isFocused}
+      accessibilityElementsHidden={isEffectivelyDisabled}
+      readOnly={!editableProp}
+      onKeyPress={(e: TextInputKeyPressEvent) => {
+        e.persist();
+        onKeyPress?.(e);
+      }}
+      onFocus={(e: FocusEvent) => {
+        handleFocus(true, () => rest.onFocus?.(e));
+      }}
+      onBlur={(e: BlurEvent) => {
+        handleFocus(false, () => rest.onBlur?.(e));
+      }}
+      ref={mergedRef}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+InputField.displayName = 'InputField';

package/src/input/InputField.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useMemo } from 'react';
+import {
+  type BlurEvent,
+  type FocusEvent,
+  TextInput,
+  type TextInputKeyPressEvent,
+} from 'react-native';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useInputContext } from './context';
+import type { IInputProps } from './types';
+
+export type InputFieldProps = IInputProps;
+
+export const InputField = forwardRef<TextInput, InputFieldProps>((props, ref) => {
+  const {
+    asChild,
+    children,
+    onKeyPress,
+    type = 'text',
+    accessibilityLabel,
+    'aria-label': ariaLabelProp,
+    secureTextEntry,
+    editable,
+    disabled,
+    ...rest
+  } = props;
+
+  const { isDisabled, isReadOnly, isFocused, isInvalid, setIsFocused, inputFieldRef, isRequired } =
+    useInputContext();
+
+  const inputProps = useFormControl({
+    isDisabled: rest.isDisabled || disabled,
+    isInvalid: rest.isInvalid,
+    isReadOnly: rest.isReadOnly,
+    isRequired: rest.isRequired,
+    id: rest.id,
+  });
+
+  const field = useFormControlContext();
+
+  const reportLabelFocus = (focused: boolean) => {
+    const active = focused && !(isDisabled || inputProps.disabled);
+    field.setIsLabelFocused?.(active);
+  };
+
+  const handleFocus = (focusState: boolean, callback: () => void) => {
+    setIsFocused?.(focusState);
+    reportLabelFocus(focusState);
+    callback();
+  };
+
+  const mergedRef = mergeRefs(ref, inputFieldRef, field.inputRef);
+
+  const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+  const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
+  const editableProp = useMemo(() => {
+    if (editable !== undefined) {
+      return editable;
+    }
+    return !(isDisabled || inputProps.disabled || isReadOnly);
+  }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+
+  const Comp = asChild ? Slot : TextInput;
+
+  return (
+    <Comp
+      {...inputProps}
+      {...rest}
+      type={type}
+      disabled={isEffectivelyDisabled}
+      secureTextEntry={secureTextEntry || type === 'password'}
+      accessible
+      accessibilityLabel={ariaLabel}
+      aria-label={ariaLabel}
+      aria-required={isRequired || inputProps.required}
+      aria-invalid={isInvalid || inputProps['aria-invalid']}
+      aria-disabled={isEffectivelyDisabled}
+      aria-selected={isFocused}
+      accessibilityElementsHidden={isEffectivelyDisabled}
+      readOnly={!editableProp}
+      onKeyPress={(e: TextInputKeyPressEvent) => {
+        e.persist();
+        onKeyPress?.(e);
+      }}
+      onFocus={(e: FocusEvent) => {
+        handleFocus(true, () => rest.onFocus?.(e));
+      }}
+      onBlur={(e: BlurEvent) => {
+        handleFocus(false, () => rest.onBlur?.(e));
+      }}
+      ref={mergedRef}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+InputField.displayName = 'InputField';

package/src/input/InputField.web.tsx

@@ -0,0 +1,141 @@
+import React, { forwardRef, useMemo } from 'react';
+import {
+  type BlurEvent,
+  type FocusEvent,
+  TextInput,
+  type TextInputKeyPressEvent,
+} from 'react-native';
+import { mergeRefs, useFormControl, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useInputContext } from './context';
+import type { IInputProps } from './types';
+
+export type InputFieldProps = IInputProps;
+
+const fileInputStyle: React.CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  border: 'none',
+  outline: 'none',
+  background: 'transparent',
+  fontSize: 'inherit',
+  fontFamily: 'inherit',
+};
+
+export const InputField = forwardRef<TextInput, InputFieldProps>((props, ref) => {
+  const {
+    asChild,
+    children,
+    onKeyPress,
+    type = 'text',
+    accessibilityLabel,
+    'aria-label': ariaLabelProp,
+    secureTextEntry,
+    editable,
+    disabled,
+    ...rest
+  } = props;
+
+  const { isDisabled, isReadOnly, isInvalid, setIsFocused, isRequired, inputFieldRef } =
+    useInputContext();
+
+  const inputProps = useFormControl({
+    isDisabled: rest.isDisabled || disabled,
+    isInvalid: rest.isInvalid,
+    isReadOnly: rest.isReadOnly,
+    isRequired: rest.isRequired,
+    id: rest.id,
+  });
+
+  const field = useFormControlContext();
+
+  const reportLabelFocus = (focused: boolean) => {
+    const active = focused && !(isDisabled || inputProps.disabled);
+    field.setIsLabelFocused?.(active);
+  };
+
+  const handleFocus = (focusState: boolean, callback: () => void) => {
+    setIsFocused?.(focusState);
+    reportLabelFocus(focusState);
+    callback();
+  };
+
+  const mergedRef = mergeRefs(ref, inputFieldRef);
+
+  const isEffectivelyDisabled = isDisabled || inputProps.disabled;
+  const ariaLabel = accessibilityLabel ?? ariaLabelProp;
+
+  const editableProp = useMemo(() => {
+    if (editable !== undefined) {
+      return editable;
+    }
+    return !(isDisabled || inputProps.disabled || isReadOnly);
+  }, [isDisabled, inputProps.disabled, isReadOnly, editable]);
+
+  if (!asChild && type === 'file') {
+    const fileProps = rest as Extract<IInputProps, { type: 'file' }>;
+    return React.createElement('input', {
+      ref: mergedRef,
+      type: 'file',
+      accept: fileProps.accept || undefined,
+      multiple: fileProps.multiple || undefined,
+      capture: fileProps.capture || undefined,
+      disabled: isEffectivelyDisabled || undefined,
+      'aria-label': ariaLabel,
+      'aria-required': isRequired || inputProps.required || undefined,
+      'aria-invalid': isInvalid || inputProps['aria-invalid'] || undefined,
+      'aria-disabled': isEffectivelyDisabled || undefined,
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files;
+        if (files && fileProps.onFiles) {
+          fileProps.onFiles(Array.from(files));
+        }
+      },
+      onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
+        handleFocus(true, () => rest.onFocus?.(e as unknown as FocusEvent));
+      },
+      onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+        handleFocus(false, () => rest.onBlur?.(e as unknown as BlurEvent));
+      },
+      style: {
+        ...fileInputStyle,
+        cursor: isEffectivelyDisabled ? 'not-allowed' : 'pointer',
+      },
+    });
+  }
+
+  const Comp = asChild ? Slot : TextInput;
+
+  return (
+    <Comp
+      {...inputProps}
+      {...rest}
+      type={type}
+      disabled={isEffectivelyDisabled}
+      secureTextEntry={secureTextEntry || type === 'password'}
+      accessible
+      accessibilityLabel={ariaLabel}
+      aria-label={ariaLabel}
+      aria-required={isRequired || inputProps.required}
+      aria-invalid={isInvalid || inputProps['aria-invalid']}
+      aria-disabled={isEffectivelyDisabled}
+      accessibilityElementsHidden={isEffectivelyDisabled}
+      readOnly={!editableProp}
+      onKeyPress={(e: TextInputKeyPressEvent) => {
+        e.persist();
+        onKeyPress?.(e);
+      }}
+      onFocus={(e: FocusEvent) => {
+        handleFocus(true, () => rest.onFocus?.(e));
+      }}
+      onBlur={(e: BlurEvent) => {
+        handleFocus(false, () => rest.onBlur?.(e));
+      }}
+      ref={mergedRef}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+InputField.displayName = 'InputField';

package/src/input/InputRoot.tsx

@@ -0,0 +1,104 @@
+import { forwardRef, useCallback, useMemo, useRef, useState, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { mergeRefs, useFormControlContext } from '@cdx-ui/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { InputProvider } from './context';
+import type { IInputRootProps, InputContext } from './types';
+
+export type InputRootProps = IInputRootProps;
+
+export const InputRoot = forwardRef<ComponentRef<typeof View>, InputRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isHovered: isHoveredProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<ComponentRef<typeof View> | null>(null);
+    const inputFieldRef = useRef(null);
+
+    const [isFocused, setIsFocused] = useState(false);
+    const handleFocus = useCallback((focusState: boolean, callback: () => void) => {
+      setIsFocused(focusState);
+      callback();
+    }, []);
+
+    const inputProps = useFormControlContext();
+    const { isHovered } = useHover({}, inputRef);
+    const { isFocusVisible } = useFocusRing();
+
+    const resolvedDisabled = isDisabled || inputProps.isDisabled;
+    const resolvedInvalid = isInvalid || inputProps.isInvalid;
+    const resolvedReadOnly = isReadOnly || inputProps.isReadOnly;
+    const resolvedRequired = isRequired || inputProps.isRequired;
+    const resolvedHovered = isHoveredProp || isHovered;
+    const resolvedFocused = isFocusedProp || isFocused;
+    const resolvedFocusVisible = isFocusVisibleProp || isFocusVisible;
+
+    // TODO: Remove is prefix from props (align with ButtonRoot)
+    const contextValue = useMemo<InputContext>(
+      () => ({
+        isDisabled: resolvedDisabled,
+        isInvalid: resolvedInvalid,
+        isHovered: resolvedHovered,
+        isFocused: resolvedFocused,
+        isFocusVisible: resolvedFocusVisible,
+        isReadOnly: resolvedReadOnly,
+        isRequired: resolvedRequired,
+        inputRef,
+        handleFocus,
+        setIsFocused,
+        inputFieldRef,
+      }),
+      [
+        resolvedDisabled,
+        resolvedInvalid,
+        resolvedHovered,
+        resolvedFocused,
+        resolvedFocusVisible,
+        resolvedReadOnly,
+        resolvedRequired,
+        handleFocus,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <InputProvider value={contextValue}>
+        <Comp
+          ref={mergeRefs(inputRef, ref)}
+          {...(rest as ViewProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              hover: resolvedHovered,
+              focus: resolvedFocused,
+              disabled: resolvedDisabled,
+              invalid: resolvedInvalid,
+              readonly: resolvedReadOnly,
+              required: resolvedRequired,
+              focusVisible: resolvedFocusVisible,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </InputProvider>
+    );
+  },
+);
+
+InputRoot.displayName = 'InputRoot';