@cdx-ui/primitives 0.0.1-beta.6 → 0.0.1-beta.60

package/src/CLAUDE.md

@@ -0,0 +1,32 @@
+# Primitive Authoring
+
+Auto-loaded when working in `packages/primitives/src/**`.
+
+Primitives in `@cdx-ui/primitives` are unstyled behavioral components that handle accessibility and interactions. Read the full guides before making changes:
+
+- `docs/internal/practices/composition.md` — compound component structure
+- `docs/internal/practices/types.md` — `I*Props` convention, extending RN base types
+- `docs/internal/practices/accessibility.md` — ARIA roles, keyboard nav, screen reader support
+- `docs/internal/practices/as-child.md` — `asChild` prop pattern
+
+## Pattern summary
+
+Each primitive follows the factory function pattern (see `createButtonRoot.tsx` as the canonical example):
+
+1. **Factory function** — `export const createComponentPart = <T,>(BaseComponent: ComponentType<T>) => forwardRef(...)` — accepts a host element type, returns a wrapped component with behavior
+2. **Interaction hooks** — `useFocus`, `useFocusRing`, `useHover`, `usePress` from `@react-native-aria/*`
+3. **Data attributes** — `dataAttributes({ hover, focus, active, disabled, focusVisible })` emitted on the rendered element for Uniwind `data-[state]` selectors
+4. **Context provider** — interaction state exposed via context so child primitives can react to parent state
+5. **Barrel export** — `index.tsx` re-exports the factory, context, and types
+
+## Key rules
+
+- **Unstyled** — no visual styling (no `className`, no color/spacing classes). Only behavioral and a11y concerns.
+- **`I*Props` convention** — public prop types are aliased with `I` prefix (e.g., `IButtonProps`, `ICheckboxProps`), exported from `types.ts`
+- **`Interface*Props` pattern** — the full interface (e.g., `InterfaceButtonProps`, `InterfaceCheckbox`) extends the appropriate RN base type (`PressableProps`, `ViewProps`, etc.) with interaction state booleans (`isHovered`, `isActive`, `isFocused`, `isFocusVisible`, `isDisabled`); re-exported as `I*Props` (e.g., `export type IButtonProps = InterfaceButtonProps`)
+- **`dataAttributes()` helper** — always use the helper from `../utils/dataAttributes` to emit `data-*` props; it handles platform differences (native vs web)
+- **`composeEventHandlers`** from `@cdx-ui/utils` — merge consumer handlers with internal handlers; never silently override
+- **`forwardRef`** on every component — refs forwarded to the underlying host element
+- **ARIA roles** — set `role` with a sensible default (e.g., `role={props?.role || 'button'}`)
+- **Render children as function** — support `children` as `(state: InteractionState) => ReactNode` for state-driven rendering
+- **Consumable independently** of `@cdx-ui/components` — no imports from the styled layer

package/src/avatar/createAvatarText.tsx

@@ -4,7 +4,16 @@ import { useAvatarContext } from './context';
 import type { IAvatarTextProps } from './types';
 
 function getInitials(name: string): string {
-  const words = name.trim().split(/\s+/);
+  const trimmed = name.trim();
+  const words = trimmed.split(/\s+/);
+
+  // Pre-composed initials (e.g. "JD", "AB") — single token, at most 2 chars.
+  // Figma Code Connect surfaces the raw text property which is already initials;
+  // passing them through a derivation step would truncate to the first letter.
+  if (words.length === 1 && trimmed.length <= 2) {
+    return trimmed.toUpperCase();
+  }
+
   let result = '';
   for (const word of words) {
     if (word.length > 0) {

package/src/button/createButtonText.tsx

@@ -5,6 +5,7 @@ import { useButtonContext } from './context';
 import type { IButtonTextProps } from './types';
 
 // TODO: Rename to ButtonLabel
+// TODO: Can we remove the dataAttributes here?
 
 export const createButtonText = <T,>(BaseButtonText: React.ComponentType<T>) =>
   forwardRef<unknown, IButtonTextProps>(({ children, ...props }, ref) => {

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -6,8 +6,10 @@ import { CheckboxProvider } from './context';
 import type { ICheckboxProps } from './types';
 import { useCheckboxRoot } from './useCheckboxRoot';
 
-// TODO: Label is taking focus on keyboard navigation
-
+/**
+ * Web uses a native checkbox input (VisuallyHidden) for ARIA + focus management. The outer
+ * `Pressable` must not be in the tab order or each control consumes two Tab stops (wrapper + input).
+ */
 export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
   forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
     const {
@@ -41,6 +43,8 @@ export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
       <BaseCheckbox
         {...(combinedProps as T)}
         ref={mergedRef}
+        // Native input is the only tab stop; Pressable is still clickable (mouse / screen reader).
+        tabIndex={-1}
         role="label"
         // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
         accessibilityRole="label"

package/src/chip/createChipRoot.tsx

@@ -0,0 +1,144 @@
+import React, { forwardRef } from 'react';
+import type { PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { IChipPressablePassthrough, IChipProps } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  alignSelf: 'flex-start' as const,
+};
+
+const chipSlotAttrs = dataAttributes({ slot: 'chip' });
+
+export const createChipRoot = <V, P>(
+  BaseView: React.ComponentType<V>,
+  BasePressable: React.ComponentType<P>,
+) =>
+  forwardRef(
+    (
+      {
+        asChild = false,
+        children,
+        onPress,
+        disabled = false,
+        accessibilityRole,
+        style,
+        ...restProps
+      }: IChipProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const childOnPress = React.isValidElement(children)
+        ? ((children.props as { onPress?: unknown }).onPress as IChipProps['onPress'] | undefined)
+        : undefined;
+
+      const asChildInteractive = asChild && React.isValidElement(children);
+      const isPressableRoot = !!onPress && !asChildInteractive;
+
+      const pressState = usePress({
+        isDisabled: !isPressableRoot || disabled,
+      });
+      const isPressed = pressState.isPressed;
+      const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+
+      const { hoverProps, isHovered } = useHover();
+      const { isFocused, focusProps } = useFocus();
+      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+        isFocusVisible: boolean;
+        focusProps: typeof focusProps;
+      };
+
+      if (asChildInteractive) {
+        const child = children as React.ReactElement<Record<string, unknown>>;
+
+        const childDisabled = !!(child.props as { disabled?: boolean }).disabled;
+        const resolvedDisabled = disabled || childDisabled;
+
+        const cloneProps: Record<string, unknown> = {
+          ...restProps,
+          ...chipSlotAttrs,
+          ...dataAttributes({
+            active: false,
+            hover: false,
+            disabled: resolvedDisabled,
+            focused: false,
+            focusVisible: false,
+          }),
+          ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+          disabled: resolvedDisabled,
+          ref: mergeRefs(ref, child.props.ref as React.Ref<unknown>),
+          style: [rowStyle, style, child.props.style],
+        };
+
+        if (resolvedDisabled) {
+          cloneProps.onPress = undefined;
+        } else if (onPress) {
+          cloneProps.onPress = composeEventHandlers(childOnPress, onPress);
+        }
+
+        return React.cloneElement(child, cloneProps);
+      }
+
+      if (isPressableRoot) {
+        const interactionAttrs = dataAttributes({
+          active: isPressed,
+          hover: isHovered,
+          disabled,
+          focused: isFocused,
+          focusVisible: isFocusVisible,
+        });
+
+        const {
+          onPressIn: onPressInProp,
+          onPressOut: onPressOutProp,
+          onHoverIn: onHoverInProp,
+          onHoverOut: onHoverOutProp,
+          onFocus: onFocusProp,
+          onBlur: onBlurProp,
+        } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+        return (
+          <BasePressable
+            {...(restProps as P)}
+            {...chipSlotAttrs}
+            {...interactionAttrs}
+            accessibilityRole={accessibilityRole ?? 'button'}
+            {...(disabled && { accessibilityState: { disabled: true } })}
+            disabled={disabled}
+            ref={ref as React.Ref<P>}
+            style={[rowStyle, style]}
+            onPress={disabled ? undefined : onPress}
+            onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(onFocusProp, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(onBlurProp, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+          >
+            {children}
+          </BasePressable>
+        );
+      }
+
+      return (
+        <BaseView
+          {...(restProps as V)}
+          {...chipSlotAttrs}
+          {...(disabled ? dataAttributes({ disabled: true }) : undefined)}
+          ref={ref as React.Ref<V>}
+          style={[rowStyle, style]}
+        >
+          {children}
+        </BaseView>
+      );
+    },
+  );

package/src/chip/index.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import { createChipRoot } from './createChipRoot';
+import type { IChipComponentType } from './types';
+
+export type { IChipComponentType, IChipPressablePassthrough, IChipProps } from './types';
+
+export function createChip({
+  View,
+  Pressable,
+}: {
+  View: React.ComponentType<ViewProps>;
+  Pressable: React.ComponentType<PressableProps>;
+}) {
+  const Chip = createChipRoot(View, Pressable);
+  Chip.displayName = 'ChipPrimitive';
+  return Chip as IChipComponentType<ViewProps | PressableProps>;
+}

package/src/chip/types.ts

@@ -0,0 +1,23 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type IChipPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface IChipProps extends ViewProps, IChipPressablePassthrough {
+  /**
+   * When set (and `asChild` is not used with a valid element), root renders as pressable.
+   */
+  onPress?: PressableProps['onPress'];
+  /** Disables press handling when the root is pressable. */
+  disabled?: boolean;
+  /**
+   * Merge slot + interaction props onto a single child instead of rendering the default pressable root.
+   */
+  asChild?: boolean;
+}
+
+export type IChipComponentType<RootRef> = ForwardRefExoticComponent<
+  RefAttributes<RootRef> & IChipProps
+>;

package/src/dialog/createDialogContent.tsx

@@ -1,122 +1,11 @@
-import type React from 'react';
-import { forwardRef, useCallback } from 'react';
-import { Modal, Platform, StyleSheet, View } from 'react-native';
-import { FocusScope } from '@react-native-aria/focus';
-import { useEscapeKey } from '../overlay';
-import { createPortalFn } from '../utils/createPortal';
-import { dataAttributes } from '../utils/dataAttributes';
-import { useDialog } from './context';
+import React, { forwardRef } from 'react';
 import type { IDialogContentProps } from './types';
 
-export const createDialogContent = <ContentProps, OverlayProps>(
-  BaseContent: React.ComponentType<ContentProps>,
-  BaseOverlay: React.ComponentType<OverlayProps>,
-) =>
-  forwardRef(({ children, forceMount = false, ...props }: IDialogContentProps, ref?: any) => {
-    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,
-      ...dataAttributes({ slot: 'dialog-overlay' }),
-    };
-
-    const contentSlotAttrs = dataAttributes({
-      slot: 'dialog-content',
-      state: open ? 'open' : 'closed',
-    });
-
-    const ariaProps = {
-      role,
-      'aria-modal': true,
-      'aria-labelledby': `${nativeID}-title`,
-      'aria-describedby': `${nativeID}-description`,
-    };
-
-    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',
-            }}
-          >
-            <BaseOverlay {...(overlayProps as any)} />
-            <BaseContent
-              ref={ref}
-              {...contentSlotAttrs}
-              {...(props as ContentProps)}
-              {...ariaProps}
-            >
-              {children}
-            </BaseContent>
-          </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 absolute-fill
-    // View 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.
-    //
-    // 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.Body.
-    //
-    // 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.
+export const createDialogContent = <T,>(BaseContent: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogContentProps>(({ children, ...props }, ref) => {
     return (
-      <Modal visible={open} transparent statusBarTranslucent onRequestClose={handleClose}>
-        <FocusScope contain={open} restoreFocus autoFocus={open}>
-          <View style={styles.fill}>
-            <BaseOverlay {...(overlayProps as any)} />
-            <View style={styles.center} pointerEvents="box-none">
-              <BaseContent
-                ref={ref}
-                {...contentSlotAttrs}
-                {...(props as ContentProps)}
-                {...ariaProps}
-              >
-                {children}
-              </BaseContent>
-            </View>
-          </View>
-        </FocusScope>
-      </Modal>
+      <BaseContent ref={ref} {...(props as T)}>
+        {children}
+      </BaseContent>
     );
   });
-
-// 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: {
-    ...StyleSheet.absoluteFillObject,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/src/dialog/createDialogPopup.tsx

@@ -0,0 +1,146 @@
+import type React from 'react';
+import { forwardRef, useCallback } from 'react';
+import { KeyboardAvoidingView, Modal, Platform, StyleSheet, View } from 'react-native';
+import { FocusScope } from '@react-native-aria/focus';
+import { useEscapeKey } from '../overlay';
+import { createPortalFn } from '../utils/createPortal';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useDialog } from './context';
+import type { IDialogPopupProps } from './types';
+
+export const createDialogPopup = <PopupProps, OverlayProps>(
+  BasePopup: React.ComponentType<PopupProps>,
+  BaseOverlay: React.ComponentType<OverlayProps>,
+) =>
+  forwardRef(
+    (
+      {
+        children,
+        forceMount = false,
+        avoidKeyboard = true,
+        keyboardVerticalOffset = 0,
+        ...props
+      }: IDialogPopupProps,
+      ref?: any,
+    ) => {
+      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,
+        ...dataAttributes({ slot: 'dialog-overlay' }),
+      };
+
+      const contentSlotAttrs = dataAttributes({
+        slot: 'dialog-popup',
+        state: open ? 'open' : 'closed',
+      });
+
+      const ariaProps = {
+        role,
+        'aria-modal': true,
+        'aria-labelledby': `${nativeID}-title`,
+        'aria-describedby': `${nativeID}-description`,
+      };
+
+      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',
+              }}
+            >
+              <BaseOverlay {...(overlayProps as any)} />
+              <BasePopup ref={ref} {...contentSlotAttrs} {...(props as PopupProps)} {...ariaProps}>
+                {children}
+              </BasePopup>
+            </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}>
+              <BaseOverlay {...(overlayProps as any)} />
+              <KeyboardAvoidingView
+                style={styles.center}
+                pointerEvents="box-none"
+                behavior={keyboardBehavior}
+                keyboardVerticalOffset={keyboardVerticalOffset}
+              >
+                <BasePopup
+                  ref={ref}
+                  {...contentSlotAttrs}
+                  {...(props as PopupProps)}
+                  {...ariaProps}
+                >
+                  {children}
+                </BasePopup>
+              </KeyboardAvoidingView>
+            </View>
+          </FocusScope>
+        </Modal>
+      );
+    },
+  );
+
+// 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/index.tsx

@@ -1,11 +1,11 @@
 import type React from 'react';
 import { createDialogRoot } from './createDialogRoot';
 import { createDialogTrigger } from './createDialogTrigger';
-import { createDialogContent } from './createDialogContent';
+import { createDialogPopup } from './createDialogPopup';
 import { createDialogHeader } from './createDialogHeader';
 import { createDialogTitle } from './createDialogTitle';
 import { createDialogDescription } from './createDialogDescription';
-import { createDialogBody } from './createDialogBody';
+import { createDialogContent } from './createDialogContent';
 import { createDialogFooter } from './createDialogFooter';
 import { createDialogClose } from './createDialogClose';
 import { DialogProvider, useDialog } from './context';
@@ -16,12 +16,12 @@ export type {
   IDialogContextType,
   IDialogRootProps,
   IDialogTriggerProps,
-  IDialogContentProps,
+  IDialogPopupProps,
   IDialogOverlayProps,
   IDialogHeaderProps,
   IDialogTitleProps,
   IDialogDescriptionProps,
-  IDialogBodyProps,
+  IDialogContentProps,
   IDialogFooterProps,
   IDialogCloseProps,
 } from './types';
@@ -29,64 +29,64 @@ export type {
 export function createDialog<
   RootProps,
   TriggerProps,
-  ContentProps,
+  PopupProps,
   OverlayProps,
   HeaderProps,
   TitleProps,
   DescriptionProps,
-  BodyProps,
+  ContentProps,
   FooterProps,
   CloseProps,
 >(BaseComponents: {
   Root: React.ComponentType<RootProps>;
   Trigger: React.ComponentType<TriggerProps>;
-  Content: React.ComponentType<ContentProps>;
+  Popup: React.ComponentType<PopupProps>;
   Overlay: React.ComponentType<OverlayProps>;
   Header: React.ComponentType<HeaderProps>;
   Title: React.ComponentType<TitleProps>;
   Description: React.ComponentType<DescriptionProps>;
-  Body: React.ComponentType<BodyProps>;
+  Content: React.ComponentType<ContentProps>;
   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 Popup = createDialogPopup(BaseComponents.Popup, BaseComponents.Overlay);
   const Header = createDialogHeader(BaseComponents.Header);
   const Title = createDialogTitle(BaseComponents.Title);
   const Description = createDialogDescription(BaseComponents.Description);
-  const Body = createDialogBody(BaseComponents.Body);
+  const Content = createDialogContent(BaseComponents.Content);
   const Footer = createDialogFooter(BaseComponents.Footer);
   const Close = createDialogClose(BaseComponents.Close);
 
   Root.displayName = 'DialogPrimitive.Root';
   Trigger.displayName = 'DialogPrimitive.Trigger';
-  Content.displayName = 'DialogPrimitive.Content';
+  Popup.displayName = 'DialogPrimitive.Popup';
   Header.displayName = 'DialogPrimitive.Header';
   Title.displayName = 'DialogPrimitive.Title';
   Description.displayName = 'DialogPrimitive.Description';
-  Body.displayName = 'DialogPrimitive.Body';
+  Content.displayName = 'DialogPrimitive.Content';
   Footer.displayName = 'DialogPrimitive.Footer';
   Close.displayName = 'DialogPrimitive.Close';
 
   return Object.assign(Root, {
     Root,
     Trigger,
-    Content,
+    Popup,
     Header,
     Title,
     Description,
-    Body,
+    Content,
     Footer,
     Close,
   }) as IDialogComponentType<
     RootProps,
     TriggerProps,
-    ContentProps,
+    PopupProps,
     HeaderProps,
     TitleProps,
     DescriptionProps,
-    BodyProps,
+    ContentProps,
     FooterProps,
     CloseProps
   >;