@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.150

package/src/components/Dialog/index.tsx

@@ -1,23 +1,58 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, View, type PressableProps, type ViewProps } from 'react-native';
-import { Close as CloseIcon } from '@cdx-ui/icons';
 import {
-  createDialog,
-  type IDialogBodyProps,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
+import {
+  DialogClose as DialogClosePrimitive,
+  DialogContent as DialogContentPrimitive,
+  DialogOverlay as DialogOverlayPrimitive,
+  DialogPortal as DialogPortalPrimitive,
+  DialogRoot as DialogRootPrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  FullWindowOverlay,
+  MODAL_OVERLAY_Z_INDEX,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useDialog,
   type IDialogCloseProps,
   type IDialogContentProps,
-  type IDialogDescriptionProps,
-  type IDialogFooterProps,
-  type IDialogHeaderProps,
   type IDialogRootProps,
-  type IDialogTitleProps,
   type IDialogTriggerProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  usePopupDialogContentAnimation,
+  usePopupOverlayAnimation,
+  usePopupRootAnimation,
+  type AnimationRootDisableAll,
+} from '../../animation';
+import {
+  AnimationSettingsProvider,
+  useAnimationSettings,
+} from '../../providers/animation-settings';
 import { Icon } from '../Icon';
+import { DialogAnimationProvider, useDialogAnimation } from './animation';
 import {
+  type DialogTitleVariantProps,
   type DialogVariantProps,
-  dialogBodyVariants,
   dialogCloseIconVariants,
   dialogCloseVariants,
   dialogContentVariants,
@@ -25,48 +60,33 @@ import {
   dialogFooterVariants,
   dialogHeaderVariants,
   dialogOverlayVariants,
+  dialogPopupVariants,
+  dialogPortalVariants,
+  dialogTextVariants,
+  dialogTitleIconVariants,
   dialogTitleVariants,
 } from './styles';
 
 export { useDialog } from '@cdx-ui/primitives';
 
+const IS_WEB = Platform.OS === 'web';
+const WEB_TRANSITION_SAFETY_MS = 300;
+
+type DialogDataState = 'entering' | 'open' | 'closed';
+
 // =============================================================================
 // STYLE CONTEXT
 // =============================================================================
 
 const SCOPE = 'DIALOG';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps;
 
 // =============================================================================
-// STYLED OVERLAY (internal — not consumer-facing)
-// =============================================================================
-
-const StyledOverlay = forwardRef<View, PressableProps & { className?: string }>(
-  ({ className, ...props }, ref) => (
-    <Pressable ref={ref} className={cn(dialogOverlayVariants(), className)} {...props} />
-  ),
-);
-StyledOverlay.displayName = 'Dialog.Overlay';
-
-// =============================================================================
-// CREATE DIALOG PRIMITIVE
+// ANIMATED PRIMITIVES
 // =============================================================================
 
-const DialogPrimitive = createDialog({
-  Root,
-  Trigger: Pressable,
-  Overlay: StyledOverlay,
-  Content: View,
-  Header: View,
-  Title: Text,
-  Description: Text,
-  Body: View,
-  Footer: View,
-  Close: Pressable,
-});
+const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive);
 
 // =============================================================================
 // STYLED ROOT
@@ -75,14 +95,48 @@ const DialogPrimitive = createDialog({
 export interface DialogRootProps
   extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
   className?: string;
+  animation?: AnimationRootDisableAll;
 }
 
 const DialogRoot = forwardRef<View, DialogRootProps>(
-  ({ size = 'md', className, children, style, ...props }, ref) => (
-    <DialogPrimitive ref={ref} className={className} style={style} context={{ size }} {...props}>
-      {children}
-    </DialogPrimitive>
-  ),
+  ({ size = 'md', fullBleed = false, animation, className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { size, fullBleed } }),
+      [parent, size, fullBleed],
+    );
+
+    const { progress, isDragging, isGestureReleaseAnimationRunning, isAllAnimationsDisabled } =
+      usePopupRootAnimation({ animation });
+
+    const animationContextValue = useMemo(
+      () => ({ progress, isDragging, isGestureReleaseAnimationRunning }),
+      [progress, isDragging, isGestureReleaseAnimationRunning],
+    );
+
+    const animationSettingsContextValue = useMemo(
+      () => ({ isAllAnimationsDisabled }),
+      [isAllAnimationsDisabled],
+    );
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <DialogAnimationProvider value={animationContextValue}>
+          <ParentContext.Provider value={ctx}>
+            <DialogRootPrimitive
+              ref={ref}
+              className={className}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog' }))}
+            >
+              {children}
+            </DialogRootPrimitive>
+          </ParentContext.Provider>
+        </DialogAnimationProvider>
+      </AnimationSettingsProvider>
+    );
+  },
 );
 
 DialogRoot.displayName = 'Dialog';
@@ -98,56 +152,308 @@ export interface DialogTriggerProps extends IDialogTriggerProps {
 
 const DialogTrigger = forwardRef<View, DialogTriggerProps>(
   ({ className, children, style, ...props }, ref) => (
-    <DialogPrimitive.Trigger ref={ref} className={className} style={style} {...props}>
+    <DialogTriggerPrimitive
+      ref={ref}
+      className={className}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-trigger' }))}
+    >
       {children}
-    </DialogPrimitive.Trigger>
+    </DialogTriggerPrimitive>
   ),
 );
 
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED POPUP (portal + overlay + content composition)
 // =============================================================================
 
-export interface DialogContentProps extends IDialogContentProps, DialogVariantProps {
+export interface DialogPopupProps
+  extends Omit<IDialogContentProps, 'asChild'>, Pick<DialogVariantProps, 'size'> {
   className?: string;
   children?: ReactNode;
+  disableFullWindowOverlay?: boolean;
+  isSwipeable?: boolean;
+  /**
+   * Stacking order for the portal overlay layer (backdrop + popup panel).
+   * Defaults to {@link MODAL_OVERLAY_Z_INDEX} (10000).
+   */
+  zIndex?: number;
 }
 
-const DialogContent = forwardRef<View, DialogContentProps>(
-  ({ size: sizeProp, className, children, style, ...props }, ref) => {
+const DialogPopup = forwardRef<View, DialogPopupProps>(
+  (
+    {
+      size: sizeProp,
+      className,
+      children,
+      style,
+      forceMount = false,
+      avoidKeyboard = true,
+      keyboardVerticalOffset = 0,
+      disableFullWindowOverlay = false,
+      isSwipeable = true,
+      zIndex = MODAL_OVERLAY_Z_INDEX,
+      ...props
+    },
+    ref,
+  ) => {
     const { size: contextSize } = useDialogStyleContext();
     const size = sizeProp ?? contextSize;
-    const computedClassName = cn(dialogContentVariants({ size }), className);
+    const { open, onOpenChange } = useDialog();
+    const parentContext = useParentContext();
+
+    const animationContext = useDialogAnimation();
+    const parentAnimationSettings = useAnimationSettings();
+
+    const fallbackProgress = useSharedValue(0);
+    const fallbackIsDragging = useSharedValue(false);
+    const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+
+    const progress = animationContext?.progress ?? fallbackProgress;
+    const isDragging = animationContext?.isDragging ?? fallbackIsDragging;
+    const isGestureReleaseAnimationRunning =
+      animationContext?.isGestureReleaseAnimationRunning ??
+      fallbackIsGestureReleaseAnimationRunning;
+
+    const {
+      rContainerStyle,
+      entering: overlayEntering,
+      exiting: overlayExiting,
+    } = usePopupOverlayAnimation({
+      progress,
+      isDragging,
+      isGestureReleaseAnimationRunning,
+    });
+
+    const {
+      contentY,
+      contentHeight,
+      panGesture,
+      rDragContainerStyle,
+      entering: contentEntering,
+      exiting: contentExiting,
+    } = usePopupDialogContentAnimation({
+      isOpen: open,
+      progress,
+      isDragging,
+      isGestureReleaseAnimationRunning,
+      onOpenChange,
+      isSwipeable,
+    });
+
+    const dragContainerRef = useRef<View>(null);
+
+    useLayoutEffect(() => {
+      if (!open || IS_WEB) return;
+      dragContainerRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+        contentY.set(pageY);
+        contentHeight.set(height);
+      });
+    }, [open, contentY, contentHeight]);
+
+    // ---- Web enter/exit lifecycle ----
+    // Mirrors the Toast pattern: mount → 'entering' → (rAF) → 'open' → (close)
+    // → 'closed' → (transitionend) → unmount.
+    //
+    // Critical: `isExiting` is derived synchronously (via ref tracking the previous
+    // `open` value) so the component stays mounted in the SAME render that sees
+    // `open` go false — if we used useEffect the component would return null before
+    // the effect fires.
+    //
+    // The transitionend listener targets the popup element (via popupRef) instead of
+    // the portal wrapper. CSS exit transitions live on the overlay and popup children,
+    // not the wrapper — listening on the wrapper would unmount on the first bubbled
+    // event, potentially cutting the other child's animation short.
+    const wrapperRef = useRef<View | null>(null);
+    const popupRef = useRef<View | null>(null);
+    const prevOpenRef = useRef(open);
+    const [isExiting, setIsExiting] = useState(false);
+    const [webState, setWebState] = useState<DialogDataState>(open ? 'entering' : 'closed');
+
+    // Detect open → false transition synchronously during render
+    if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+      setIsExiting(true);
+      setWebState('closed');
+    }
+    // Detect closed → open transition synchronously during render
+    if (IS_WEB && !prevOpenRef.current && open) {
+      setIsExiting(false);
+      setWebState('entering');
+    }
+    prevOpenRef.current = open;
+
+    // Entrance: commit 'entering' on first paint, then transition to 'open'
+    useEffect(() => {
+      if (!IS_WEB || !open) return;
+      const raf = requestAnimationFrame(() => {
+        setWebState('open');
+      });
+      return () => cancelAnimationFrame(raf);
+    }, [open]);
+
+    // Exit: wait for CSS transition to finish, then unmount.
+    // Listens on the popup element directly — its exit transitions (opacity +
+    // transform) are at least as long as the overlay's, so when the popup
+    // finishes both children are done animating.
+    useEffect(() => {
+      if (!IS_WEB || !isExiting) return;
+
+      const node = popupRef.current as unknown as HTMLElement | null;
+      let done = false;
+
+      const finish = () => {
+        if (done) return;
+        done = true;
+        setIsExiting(false);
+      };
+
+      const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+
+      if (!node || typeof node.addEventListener !== 'function') {
+        return () => {
+          clearTimeout(safetyTimer);
+        };
+      }
+
+      const handler = (event: Event) => {
+        if (event.target !== node) return;
+        const propertyName = (event as unknown as { propertyName?: string }).propertyName ?? '';
+        if (propertyName === 'opacity' || propertyName === 'transform') {
+          finish();
+        }
+      };
+      node.addEventListener('transitionend', handler);
+
+      return () => {
+        clearTimeout(safetyTimer);
+        node.removeEventListener('transitionend', handler);
+      };
+    }, [isExiting]);
+
+    const dataState: DialogDataState = webState;
+    const shouldMount = IS_WEB ? open || isExiting : open;
+
+    if (!forceMount && !shouldMount) {
+      return null;
+    }
+
+    const portalClassName = cn(dialogPortalVariants());
+    const overlayClassName = cn(dialogOverlayVariants());
+    const popupClassName = cn(dialogPopupVariants({ size }), className);
+
+    const keyboardBehavior = avoidKeyboard
+      ? Platform.select<'padding' | 'height'>({ ios: 'padding', default: 'height' })
+      : undefined;
 
     return (
-      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </DialogPrimitive.Content>
+      <DialogPortalPrimitive forceMount>
+        <ParentContext.Provider value={parentContext}>
+          <AnimationSettingsProvider value={parentAnimationSettings}>
+            <DialogAnimationProvider value={animationContext}>
+              <FullWindowOverlay
+                disableFullWindowOverlay={disableFullWindowOverlay}
+                unstable_accessibilityContainerViewIsModal
+              >
+                <Animated.View
+                  ref={wrapperRef}
+                  className={portalClassName}
+                  style={{ zIndex }}
+                  pointerEvents="box-none"
+                  {...(IS_WEB ? dataAttributes({ state: dataState }) : undefined)}
+                >
+                  {/* Overlay */}
+                  <Animated.View
+                    entering={overlayEntering}
+                    exiting={overlayExiting}
+                    style={StyleSheet.absoluteFill}
+                  >
+                    <AnimatedOverlay
+                      forceMount
+                      className={overlayClassName}
+                      style={IS_WEB ? undefined : rContainerStyle}
+                      {...(IS_WEB ? dataAttributes({ state: dataState }) : undefined)}
+                    />
+                  </Animated.View>
+
+                  {/* Content with gesture + animation */}
+                  <GestureDetector gesture={panGesture}>
+                    <Animated.View
+                      ref={dragContainerRef}
+                      style={internalStyles.fill}
+                      pointerEvents="box-none"
+                      entering={contentEntering}
+                      exiting={contentExiting}
+                    >
+                      <Animated.View
+                        style={
+                          IS_WEB ? internalStyles.fill : [internalStyles.fill, rDragContainerStyle]
+                        }
+                        pointerEvents="box-none"
+                      >
+                        <KeyboardAvoidingView
+                          style={internalStyles.center}
+                          pointerEvents="box-none"
+                          behavior={keyboardBehavior}
+                          keyboardVerticalOffset={keyboardVerticalOffset}
+                        >
+                          <DialogContentPrimitive
+                            ref={mergeRefs(ref, popupRef)}
+                            forceMount
+                            className={popupClassName}
+                            style={style}
+                            {...props}
+                            {...mergeDataAttributes(
+                              props,
+                              dataAttributes({ slot: 'dialog-popup' }),
+                              IS_WEB ? dataAttributes({ state: dataState }) : undefined,
+                            )}
+                          >
+                            {children}
+                          </DialogContentPrimitive>
+                        </KeyboardAvoidingView>
+                      </Animated.View>
+                    </Animated.View>
+                  </GestureDetector>
+                </Animated.View>
+              </FullWindowOverlay>
+            </DialogAnimationProvider>
+          </AnimationSettingsProvider>
+        </ParentContext.Provider>
+      </DialogPortalPrimitive>
     );
   },
 );
 
-DialogContent.displayName = 'Dialog.Content';
+DialogPopup.displayName = 'Dialog.Popup';
 
 // =============================================================================
-// STYLED HEADER
+// STYLED HEADER (styled-only sub-slot)
 // =============================================================================
 
-export interface DialogHeaderProps extends IDialogHeaderProps {
+export interface DialogHeaderProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogHeader = forwardRef<View, DialogHeaderProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(dialogHeaderVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Header ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-header' }))}
+      >
         {children}
-      </DialogPrimitive.Header>
+      </Comp>
     );
   },
 );
@@ -155,45 +461,126 @@ const DialogHeader = forwardRef<View, DialogHeaderProps>(
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE
+// STYLED TITLE (styled-only sub-slot with severity variants)
 // =============================================================================
 
-export interface DialogTitleProps extends IDialogTitleProps {
+export type DialogTitleSeverity = 'neutral' | 'danger' | 'warning' | 'success';
+
+/** @deprecated Use `severity` prop instead of `appearance`. */
+export type DialogTitleAppearance = 'default' | 'danger' | 'warning' | 'success';
+
+let hasWarnedDialogAppearanceProp = false;
+let hasWarnedDialogDefaultSeverity = false;
+
+const SEVERITY_ICON_MAP = {
+  danger: EmergencyHome,
+  warning: Warning,
+  success: CheckCircle,
+} as const;
+
+export interface DialogTitleProps extends TextProps, Omit<DialogTitleVariantProps, 'severity'> {
+  asChild?: boolean;
+  /**
+   * Severity level that controls the status icon and color treatment.
+   * @default 'neutral'
+   */
+  severity?:
+    | DialogTitleSeverity
+    /** @deprecated Use `'neutral'` instead. */
+    | 'default';
+  /**
+   * @deprecated Use `severity` prop instead.
+   */
+  appearance?: DialogTitleAppearance;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogTitle = forwardRef<Text, DialogTitleProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogTitleVariants(), className);
-
-    return (
-      <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
+  ({ asChild, severity: severityProp, appearance, className, children, style, ...props }, ref) => {
+    useEffect(() => {
+      if (__DEV__ && appearance !== undefined && !hasWarnedDialogAppearanceProp) {
+        hasWarnedDialogAppearanceProp = true;
+        console.warn(
+          '[Dialog.Title] The `appearance` prop is deprecated and will be removed in a future major release. Use `severity` instead.',
+        );
+      }
+    }, [appearance]);
+
+    const rawSeverity = severityProp ?? appearance ?? 'neutral';
+
+    useEffect(() => {
+      if (__DEV__ && rawSeverity === 'default' && !hasWarnedDialogDefaultSeverity) {
+        hasWarnedDialogDefaultSeverity = true;
+        console.warn(
+          '[Dialog.Title] The `default` severity value is deprecated and will be removed in a future major release. Use `neutral` instead.',
+        );
+      }
+    }, [rawSeverity]);
+
+    const severity: DialogTitleSeverity = rawSeverity === 'default' ? 'neutral' : rawSeverity;
+
+    const computedClassName = cn(dialogTitleVariants({ severity }), className);
+    const IconComponent =
+      severity && severity in SEVERITY_ICON_MAP
+        ? SEVERITY_ICON_MAP[severity as keyof typeof SEVERITY_ICON_MAP]
+        : null;
+    const Comp = asChild ? Slot : Text;
+
+    const titleElement = (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-title' }))}
+      >
         {children}
-      </DialogPrimitive.Title>
+      </Comp>
     );
+
+    if (IconComponent) {
+      return (
+        <View className="flex-row items-center gap-1">
+          <Icon as={IconComponent} className={dialogTitleIconVariants({ severity })} />
+          {titleElement}
+        </View>
+      );
+    }
+
+    return titleElement;
   },
 );
 
 DialogTitle.displayName = 'Dialog.Title';
 
 // =============================================================================
-// STYLED DESCRIPTION
+// STYLED DESCRIPTION (styled-only sub-slot — reads dialog context for nativeID)
 // =============================================================================
 
-export interface DialogDescriptionProps extends IDialogDescriptionProps {
+export interface DialogDescriptionProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { nativeID } = useDialog();
     const computedClassName = cn(dialogDescriptionVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <DialogPrimitive.Description ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        nativeID={`${nativeID}-description`}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-description' }))}
+      >
         {children}
-      </DialogPrimitive.Description>
+      </Comp>
     );
   },
 );
@@ -201,45 +588,96 @@ const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED BODY
+// STYLED CONTENT (styled-only sub-slot — reads variant context for fullBleed)
+// =============================================================================
+
+export interface DialogContentProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogContent = forwardRef<View, DialogContentProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { fullBleed } = useDialogStyleContext();
+    const computedClassName = cn(
+      dialogContentVariants({ fullBleed: fullBleed ?? false }),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-content' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED TEXT (convenience text styling, styled-only)
 // =============================================================================
 
-export interface DialogBodyProps extends IDialogBodyProps {
+export interface DialogTextProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const DialogBody = forwardRef<View, DialogBodyProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogBodyVariants(), className);
+const DialogText = forwardRef<Text, DialogTextProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogTextVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <DialogPrimitive.Body ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-text' }))}
+      >
         {children}
-      </DialogPrimitive.Body>
+      </Comp>
     );
   },
 );
 
-DialogBody.displayName = 'Dialog.Body';
+DialogText.displayName = 'Dialog.Text';
 
 // =============================================================================
-// STYLED FOOTER
+// STYLED FOOTER (styled-only sub-slot)
 // =============================================================================
 
-export interface DialogFooterProps extends IDialogFooterProps {
+export interface DialogFooterProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogFooter = forwardRef<View, DialogFooterProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(dialogFooterVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Footer ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-footer' }))}
+      >
         {children}
-      </DialogPrimitive.Footer>
+      </Comp>
     );
   },
 );
@@ -260,7 +698,7 @@ const DialogClose = forwardRef<View, DialogCloseProps>(
     const computedClassName = cn(dialogCloseVariants(), className);
 
     return (
-      <DialogPrimitive.Close
+      <DialogClosePrimitive
         ref={ref}
         className={computedClassName}
         style={style}
@@ -268,9 +706,10 @@ const DialogClose = forwardRef<View, DialogCloseProps>(
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-close' }))}
       >
         {children ?? <Icon as={CloseIcon} className={dialogCloseIconVariants()} />}
-      </DialogPrimitive.Close>
+      </DialogClosePrimitive>
     );
   },
 );
@@ -283,22 +722,41 @@ DialogClose.displayName = 'Dialog.Close';
 
 type DialogCompoundComponent = typeof DialogRoot & {
   Trigger: typeof DialogTrigger;
-  Content: typeof DialogContent;
+  Popup: typeof DialogPopup;
   Header: typeof DialogHeader;
   Title: typeof DialogTitle;
   Description: typeof DialogDescription;
-  Body: typeof DialogBody;
+  Content: typeof DialogContent;
+  Text: typeof DialogText;
   Footer: typeof DialogFooter;
   Close: typeof DialogClose;
 };
 
 export const Dialog = Object.assign(DialogRoot, {
   Trigger: DialogTrigger,
-  Content: DialogContent,
+  Popup: DialogPopup,
   Header: DialogHeader,
   Title: DialogTitle,
   Description: DialogDescription,
-  Body: DialogBody,
+  Content: DialogContent,
+  Text: DialogText,
   Footer: DialogFooter,
   Close: DialogClose,
 }) as DialogCompoundComponent;
+
+export { MODAL_OVERLAY_Z_INDEX };
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});