@cdx-ui/primitives 0.0.1-beta.14 → 0.0.1-beta.140

package/src/field/FieldLabel.web.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import {
+  domDataAttributes,
+  mergeDomDataAttributes,
+  type DomDataAttributeValue,
+} from '../utils/domDataAttributes';
+
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  /**
+   * Element rendered after the label text when the field is required. The primitive
+   * owns this composition so the styled layer never needs to read `FormControlContext`.
+   */
+  requiredIndicator?: ReactNode;
+  /**
+   * Forwarded RNW `dataSet` from the styled layer (e.g. `data-slot`). Translated to
+   * flat `data-*` attributes for the underlying `<label>` DOM element.
+   */
+  dataSet?: Record<string, DomDataAttributeValue>;
+}
+
+/**
+ * Real `<label>` so clicking the label focuses the associated control
+ * (`htmlFor` → input `id`). The htmlFor default matches `useFormControl`:
+ * `props.id ?? \`${field.id}-input\``.
+ */
+export const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
+  ({ asChild, children, htmlFor: htmlForProp, requiredIndicator, dataSet, ...rest }, ref) => {
+    const { id: fieldId, labelId, isInvalid, isRequired } = useFormControlContext();
+
+    const htmlFor = htmlForProp ?? (fieldId ? `${fieldId}-input` : undefined);
+
+    const mergedDataAttrs = mergeDomDataAttributes(
+      domDataAttributes(dataSet ?? {}),
+      domDataAttributes({ invalid: isInvalid, required: isRequired }),
+    );
+
+    const labelContent = (
+      <>
+        {children}
+        {isRequired ? requiredIndicator : null}
+      </>
+    );
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          id={labelId}
+          htmlFor={htmlFor}
+          {...(rest as Record<string, unknown>)}
+          {...mergedDataAttrs}
+        >
+          {labelContent}
+        </Slot>
+      );
+    }
+
+    return (
+      <label ref={ref} id={labelId} htmlFor={htmlFor} {...rest} {...mergedDataAttrs}>
+        {labelContent}
+      </label>
+    );
+  },
+);
+
+FieldLabel.displayName = 'FieldLabel';

package/src/field/FieldRoot.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { FormControlContext, useFormControlRoot } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import type { IFieldRootProps } from './types';
+
+export interface FieldRootProps extends IFieldRootProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const FieldRoot = forwardRef<ComponentRef<typeof View>, FieldRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const { htmlProps, ...context } = useFormControlRoot(props);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <FormControlContext.Provider value={context}>
+        <Comp
+          ref={ref}
+          {...(htmlProps as ViewProps)}
+          {...mergeDataAttributes(
+            htmlProps,
+            dataAttributes({
+              disabled: context.isDisabled,
+              invalid: context.isInvalid,
+              required: context.isRequired,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </FormControlContext.Provider>
+    );
+  },
+);
+
+FieldRoot.displayName = 'FieldRoot';

package/src/field/index.tsx

@@ -1,68 +1,3 @@
-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>;
-}
+export type { IFieldRootProps, IFieldLabelProps } from './types';
+export { FieldRoot, type FieldRootProps } from './FieldRoot';
+export { FieldLabel, type FieldLabelProps } from './FieldLabel';

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/full-window-overlay/index.web.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+
+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;
+}
+
+/**
+ * Web implementation — FullWindowOverlay is a no-op passthrough on web.
+ * The native implementation uses react-native-screens which is not available on web.
+ */
+export function FullWindowOverlay({ children }: Readonly<FullWindowOverlayProps>) {
+  return <>{children}</>;
+}

package/src/index.ts

@@ -1,18 +1,35 @@
 export * from './avatar';
+export * from './breadcrumbs';
 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';
 export * from './list-item';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
+export { useAnchorPosition, type AnchorLayout } from './overlay';
 export * from './select';
 export * from './switch';
+export * from './tabs';
 export * from './tile';
-export * from './progress';
+export * from './toast';
+export * from './portal';
+export * from './progress-bar';
 export * from './radio';
+export * from './slider';
 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 { assignRef } from './utils/assignRef';
+export { createPortalFn } from './utils/createPortal';
+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';