@cdx-ui/primitives 0.0.1-beta.9 → 0.0.1-beta.91

package/src/dialog/DialogPopup.tsx

@@ -0,0 +1,162 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import {
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogPopupProps } from './types';
+
+export interface DialogPopupProps extends IDialogPopupProps {
+  asChild?: boolean;
+  /**
+   * Class name applied to the internal dismiss-on-backdrop-press overlay
+   * Pressable. The styled layer passes its overlay variants string here so the
+   * primitive doesn't carry styling itself but still owns the overlay element
+   * (because the overlay's dismiss handler is wired by this primitive).
+   */
+  overlayClassName?: string;
+}
+
+export const DialogPopup = forwardRef<ComponentRef<typeof View>, DialogPopupProps>(
+  (
+    {
+      asChild,
+      children,
+      forceMount = false,
+      avoidKeyboard = true,
+      keyboardVerticalOffset = 0,
+      overlayClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, onOpenChange, closeOnBackdropPress, closeOnEscKey, nativeID, role } = useDialog();
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose);
+
+    if (!(open || forceMount)) {
+      return null;
+    }
+
+    const overlayProps = {
+      ...(closeOnBackdropPress ? { onPress: handleClose } : {}),
+      accessible: false,
+      importantForAccessibility: 'no-hide-descendants' as const,
+      className: overlayClassName,
+      ...dataAttributes({ slot: 'dialog-overlay' }),
+    };
+
+    const ariaProps = {
+      role,
+      'aria-modal': true,
+      'aria-labelledby': `${nativeID}-title`,
+      'aria-describedby': `${nativeID}-description`,
+    };
+
+    const popupAttrs = mergeDataAttributes(
+      props,
+      dataAttributes({ state: open ? 'open' : 'closed' }),
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    if (Platform.OS === 'web' && createPortalFn) {
+      return createPortalFn(
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View
+            style={{
+              position: 'fixed' as any,
+              inset: 0 as any,
+              zIndex: 50,
+              display: 'flex' as any,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Pressable {...overlayProps} />
+            <Comp ref={ref} {...(props as ViewProps)} {...ariaProps} {...popupAttrs}>
+              {children}
+            </Comp>
+          </View>
+        </FocusScope>,
+        document.body,
+      );
+    }
+
+    // Native layout uses two layers to support both backdrop dismiss and
+    // scrollable body content. The overlay Pressable fills the Modal via
+    // absolute positioning and handles backdrop taps. A second flex layer with
+    // pointerEvents="box-none" centers the content panel — "box-none" lets taps
+    // outside the panel pass through to the overlay while allowing the panel and
+    // its children to receive touches normally.
+    //
+    // That centering layer is a KeyboardAvoidingView so the panel (including its
+    // footer/actions, which sit at the bottom of a centered, max-h-capped panel)
+    // shifts up to clear the on-screen keyboard. `behavior` is platform-specific
+    // and the layer is a no-op while no input is focused. The RN Modal renders in
+    // its own window, so this MUST live here — a KeyboardAvoidingView wrapping the
+    // <Dialog> at the usage level cannot reach this subtree. Web is unaffected
+    // (the browser handles focus scrolling; there is no occluding keyboard).
+    //
+    // Critically, the content panel must NOT claim the JS touch responder
+    // (e.g. via onStartShouldSetResponder). Doing so triggers React Native's
+    // blockNativeResponder, which suppresses the native UIScrollView /
+    // ScrollView pan gesture recognizer and breaks any ScrollView inside
+    // Dialog.Content.
+    //
+    // Static StyleSheet used here because these are structural layout concerns
+    // of the primitive's modal chrome — not themeable styles. They must remain
+    // stable regardless of the styled layer's className.
+    const keyboardBehavior = avoidKeyboard
+      ? Platform.select<'padding' | 'height'>({ ios: 'padding', default: 'height' })
+      : undefined;
+
+    return (
+      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
+        <FocusScope contain={open} restoreFocus autoFocus={open}>
+          <View style={styles.fill}>
+            <Pressable {...overlayProps} />
+            <KeyboardAvoidingView
+              style={styles.center}
+              pointerEvents="box-none"
+              behavior={keyboardBehavior}
+              keyboardVerticalOffset={keyboardVerticalOffset}
+            >
+              <Comp ref={ref} {...(props as ViewProps)} {...ariaProps} {...popupAttrs}>
+                {children}
+              </Comp>
+            </KeyboardAvoidingView>
+          </View>
+        </FocusScope>
+      </Modal>
+    );
+  },
+);
+
+DialogPopup.displayName = 'DialogPopup';
+
+// Structural layout for the native Modal chrome. These are not themeable —
+// they position the overlay and centering layers that the primitive manages
+// internally. Matches the pattern in OverlayContainer.tsx.
+const styles = StyleSheet.create({
+  fill: { flex: 1 },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/dialog/DialogRoot.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, useCallback, useId, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { DialogProvider } from './context';
+import type { IDialogRootProps } from './types';
+
+export interface DialogRootProps extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps {
+  asChild?: boolean;
+}
+
+export const DialogRoot = forwardRef<ComponentRef<typeof View>, DialogRootProps>(
+  (
+    {
+      open: openProp,
+      onOpenChange,
+      defaultOpen = false,
+      closeOnBackdropPress = true,
+      closeOnEscKey = true,
+      role = 'dialog',
+      asChild,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const setOpen = useCallback(
+      (newOpen: boolean) => {
+        setOpenState(newOpen);
+      },
+      [setOpenState],
+    );
+
+    const id = useId();
+    const nativeID = `dialog-${id}`;
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        onOpenChange: setOpen,
+        closeOnBackdropPress,
+        closeOnEscKey,
+        nativeID,
+        role,
+      }),
+      [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <DialogProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          {...mergeDataAttributes(props, dataAttributes({ state: open ? 'open' : 'closed' }))}
+        >
+          {children}
+        </Comp>
+      </DialogProvider>
+    );
+  },
+);
+
+DialogRoot.displayName = 'DialogRoot';

package/src/dialog/DialogTrigger.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { useDialog } from './context';
+import type { IDialogTriggerProps } from './types';
+
+export interface DialogTriggerProps extends IDialogTriggerProps {}
+
+export const DialogTrigger = forwardRef<ComponentRef<typeof Pressable>, DialogTriggerProps>(
+  ({ asChild = false, children, onPress, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(true));
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp ref={ref} {...(props as PressableProps)} onPress={handlePress}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogTrigger.displayName = 'DialogTrigger';

package/src/dialog/index.tsx

@@ -1,93 +1,12 @@
-import type React from 'react';
-import { createDialogRoot } from './createDialogRoot';
-import { createDialogTrigger } from './createDialogTrigger';
-import { createDialogContent } from './createDialogContent';
-import { createDialogHeader } from './createDialogHeader';
-import { createDialogTitle } from './createDialogTitle';
-import { createDialogDescription } from './createDialogDescription';
-import { createDialogBody } from './createDialogBody';
-import { createDialogFooter } from './createDialogFooter';
-import { createDialogClose } from './createDialogClose';
-import { DialogProvider, useDialog } from './context';
-import type { IDialogComponentType } from './types';
-
-export { DialogProvider, useDialog };
+export { DialogProvider, useDialog } from './context';
+export { DialogRoot, type DialogRootProps } from './DialogRoot';
+export { DialogTrigger, type DialogTriggerProps } from './DialogTrigger';
+export { DialogPopup, type DialogPopupProps } from './DialogPopup';
+export { DialogClose, type DialogCloseProps } from './DialogClose';
 export type {
   IDialogContextType,
   IDialogRootProps,
   IDialogTriggerProps,
-  IDialogContentProps,
-  IDialogOverlayProps,
-  IDialogHeaderProps,
-  IDialogTitleProps,
-  IDialogDescriptionProps,
-  IDialogBodyProps,
-  IDialogFooterProps,
+  IDialogPopupProps,
   IDialogCloseProps,
 } from './types';
-
-export function createDialog<
-  RootProps,
-  TriggerProps,
-  ContentProps,
-  OverlayProps,
-  HeaderProps,
-  TitleProps,
-  DescriptionProps,
-  BodyProps,
-  FooterProps,
-  CloseProps,
->(BaseComponents: {
-  Root: React.ComponentType<RootProps>;
-  Trigger: React.ComponentType<TriggerProps>;
-  Content: React.ComponentType<ContentProps>;
-  Overlay: React.ComponentType<OverlayProps>;
-  Header: React.ComponentType<HeaderProps>;
-  Title: React.ComponentType<TitleProps>;
-  Description: React.ComponentType<DescriptionProps>;
-  Body: React.ComponentType<BodyProps>;
-  Footer: React.ComponentType<FooterProps>;
-  Close: React.ComponentType<CloseProps>;
-}) {
-  const Root = createDialogRoot(BaseComponents.Root);
-  const Trigger = createDialogTrigger(BaseComponents.Trigger);
-  const Content = createDialogContent(BaseComponents.Content, BaseComponents.Overlay);
-  const Header = createDialogHeader(BaseComponents.Header);
-  const Title = createDialogTitle(BaseComponents.Title);
-  const Description = createDialogDescription(BaseComponents.Description);
-  const Body = createDialogBody(BaseComponents.Body);
-  const Footer = createDialogFooter(BaseComponents.Footer);
-  const Close = createDialogClose(BaseComponents.Close);
-
-  Root.displayName = 'DialogPrimitive.Root';
-  Trigger.displayName = 'DialogPrimitive.Trigger';
-  Content.displayName = 'DialogPrimitive.Content';
-  Header.displayName = 'DialogPrimitive.Header';
-  Title.displayName = 'DialogPrimitive.Title';
-  Description.displayName = 'DialogPrimitive.Description';
-  Body.displayName = 'DialogPrimitive.Body';
-  Footer.displayName = 'DialogPrimitive.Footer';
-  Close.displayName = 'DialogPrimitive.Close';
-
-  return Object.assign(Root, {
-    Root,
-    Trigger,
-    Content,
-    Header,
-    Title,
-    Description,
-    Body,
-    Footer,
-    Close,
-  }) as IDialogComponentType<
-    RootProps,
-    TriggerProps,
-    ContentProps,
-    HeaderProps,
-    TitleProps,
-    DescriptionProps,
-    BodyProps,
-    FooterProps,
-    CloseProps
-  >;
-}

package/src/dialog/types.ts

@@ -1,5 +1,5 @@
-import type { PropsWithoutRef, RefAttributes } from 'react';
-import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type React from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 export interface IDialogContextType {
   readonly open: boolean;
@@ -24,65 +24,22 @@ export interface IDialogTriggerProps extends PressableProps {
   readonly asChild?: boolean;
 }
 
-export interface IDialogContentProps extends ViewProps {
+export interface IDialogPopupProps extends ViewProps {
   readonly forceMount?: boolean;
+  /**
+   * Whether the popup shifts up to clear the on-screen keyboard (native only).
+   * No-op on web. Defaults to `true`.
+   */
+  readonly avoidKeyboard?: boolean;
+  /**
+   * Distance (in px) between the keyboard and the popup when keyboard avoidance
+   * is active. Forwarded to the underlying keyboard-avoiding layer on native.
+   * Defaults to `0`.
+   */
+  readonly keyboardVerticalOffset?: number;
 }
 
-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/FieldLabel.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Text } from 'react-native';
+import { composeEventHandlers, useFormControlContext } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import type { IFieldLabelProps } from './types';
+
+export interface FieldLabelProps extends IFieldLabelProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+/**
+ * Native: `Text` label row — tap focuses the field input via form context
+ * (parity with `<label htmlFor>` on web).
+ */
+export const FieldLabel = forwardRef<ComponentRef<typeof Text>, FieldLabelProps>(
+  ({ asChild, children, htmlFor: _omitHtmlFor, requiredIndicator, onPress, ...props }, ref) => {
+    void _omitHtmlFor;
+
+    const { labelId, isInvalid, isRequired, isDisabled, focusInput } = useFormControlContext();
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        id={labelId}
+        {...props}
+        disabled={Boolean(isDisabled)}
+        onPress={composeEventHandlers(onPress, () => focusInput?.())}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ invalid: isInvalid, required: isRequired }),
+        )}
+      >
+        {children}
+        {isRequired ? requiredIndicator : null}
+      </Comp>
+    );
+  },
+);
+
+FieldLabel.displayName = 'FieldLabel';

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';