@cdx-ui/components 0.0.1-beta.12 → 0.0.1-beta.121

package/lib/commonjs/components/Dialog/index.js

@@ -12,50 +12,32 @@ Object.defineProperty(exports, "useDialog", {
 });
 var _react = require("react");
 var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _icons = require("@cdx-ui/icons");
 var _primitives = require("@cdx-ui/primitives");
 var _utils = require("@cdx-ui/utils");
+var _animation = require("../../animation");
+var _animationSettings = require("../../providers/animation-settings");
 var _Icon = require("../Icon");
+var _animation2 = require("./animation");
 var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+const WEB_TRANSITION_SAFETY_MS = 300;
 // =============================================================================
 // STYLE CONTEXT
 // =============================================================================
 
 const SCOPE = 'DIALOG';
-const Root = (0, _utils.withStyleContext)(_reactNative.View, SCOPE);
 const useDialogStyleContext = () => (0, _utils.useStyleContext)(SCOPE);
 
 // =============================================================================
-// STYLED OVERLAY (internal — not consumer-facing)
+// ANIMATED PRIMITIVES
 // =============================================================================
 
-const StyledOverlay = /*#__PURE__*/(0, _react.forwardRef)(({
-  className,
-  ...props
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-  ref: ref,
-  className: (0, _utils.cn)((0, _styles.dialogOverlayVariants)(), className),
-  ...props
-}));
-StyledOverlay.displayName = 'Dialog.Overlay';
-
-// =============================================================================
-// CREATE DIALOG PRIMITIVE
-// =============================================================================
-
-const DialogPrimitive = (0, _primitives.createDialog)({
-  Root,
-  Trigger: _reactNative.Pressable,
-  Overlay: StyledOverlay,
-  Content: _reactNative.View,
-  Header: _reactNative.View,
-  Title: _reactNative.Text,
-  Description: _reactNative.Text,
-  Body: _reactNative.View,
-  Footer: _reactNative.View,
-  Close: _reactNative.Pressable
-});
+const AnimatedOverlay = _reactNativeReanimated.default.createAnimatedComponent(_primitives.DialogOverlay);
 
 // =============================================================================
 // STYLED ROOT
@@ -63,20 +45,57 @@ const DialogPrimitive = (0, _primitives.createDialog)({
 
 const DialogRoot = /*#__PURE__*/(0, _react.forwardRef)(({
   size = 'md',
+  fullBleed = false,
+  animation,
   className,
   children,
   style,
   ...props
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive, {
-  ref: ref,
-  className: className,
-  style: style,
-  context: {
-    size
-  },
-  ...props,
-  children: children
-}));
+}, ref) => {
+  const parent = (0, _utils.useParentContext)();
+  const ctx = (0, _react.useMemo)(() => ({
+    ...parent,
+    [SCOPE]: {
+      size,
+      fullBleed
+    }
+  }), [parent, size, fullBleed]);
+  const {
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    isAllAnimationsDisabled
+  } = (0, _animation.usePopupRootAnimation)({
+    animation
+  });
+  const animationContextValue = (0, _react.useMemo)(() => ({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  }), [progress, isDragging, isGestureReleaseAnimationRunning]);
+  const animationSettingsContextValue = (0, _react.useMemo)(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationSettings.AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation2.DialogAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DialogRoot, {
+          ref: ref,
+          className: className,
+          style: style,
+          ...props,
+          ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+            slot: 'dialog'
+          })),
+          children: children
+        })
+      })
+    })
+  });
+});
 DialogRoot.displayName = 'Dialog';
 
 // =============================================================================
@@ -88,143 +107,442 @@ const DialogTrigger = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   style,
   ...props
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Trigger, {
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DialogTrigger, {
   ref: ref,
   className: className,
   style: style,
   ...props,
+  ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+    slot: 'dialog-trigger'
+  })),
   children: children
 }));
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED POPUP (portal + overlay + content composition)
 // =============================================================================
 
-const DialogContent = /*#__PURE__*/(0, _react.forwardRef)(({
+const DialogPopup = /*#__PURE__*/(0, _react.forwardRef)(({
   size: sizeProp,
   className,
   children,
   style,
+  forceMount = false,
+  avoidKeyboard = true,
+  keyboardVerticalOffset = 0,
+  disableFullWindowOverlay = false,
+  isSwipeable = true,
   ...props
 }, ref) => {
   const {
     size: contextSize
   } = useDialogStyleContext();
   const size = sizeProp ?? contextSize;
-  const computedClassName = (0, _utils.cn)((0, _styles.dialogContentVariants)({
+  const {
+    open,
+    onOpenChange
+  } = (0, _primitives.useDialog)();
+  const parentContext = (0, _utils.useParentContext)();
+  const animationContext = (0, _animation2.useDialogAnimation)();
+  const parentAnimationSettings = (0, _animationSettings.useAnimationSettings)();
+  const fallbackProgress = (0, _reactNativeReanimated.useSharedValue)(0);
+  const fallbackIsDragging = (0, _reactNativeReanimated.useSharedValue)(false);
+  const fallbackIsGestureReleaseAnimationRunning = (0, _reactNativeReanimated.useSharedValue)(false);
+  const progress = animationContext?.progress ?? fallbackProgress;
+  const isDragging = animationContext?.isDragging ?? fallbackIsDragging;
+  const isGestureReleaseAnimationRunning = animationContext?.isGestureReleaseAnimationRunning ?? fallbackIsGestureReleaseAnimationRunning;
+  const {
+    rContainerStyle,
+    entering: overlayEntering,
+    exiting: overlayExiting
+  } = (0, _animation.usePopupOverlayAnimation)({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  });
+  const {
+    contentY,
+    contentHeight,
+    panGesture,
+    rDragContainerStyle,
+    entering: contentEntering,
+    exiting: contentExiting
+  } = (0, _animation.usePopupDialogContentAnimation)({
+    isOpen: open,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    onOpenChange,
+    isSwipeable
+  });
+  const dragContainerRef = (0, _react.useRef)(null);
+  (0, _react.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 = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(null);
+  const prevOpenRef = (0, _react.useRef)(open);
+  const [isExiting, setIsExiting] = (0, _react.useState)(false);
+  const [webState, setWebState] = (0, _react.useState)(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'
+  (0, _react.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.
+  (0, _react.useEffect)(() => {
+    if (!IS_WEB || !isExiting) return;
+    const node = popupRef.current;
+    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 => {
+      if (event.target !== node) return;
+      const propertyName = event.propertyName ?? '';
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        finish();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isExiting]);
+  const dataState = webState;
+  const shouldMount = IS_WEB ? open || isExiting : open;
+  if (!forceMount && !shouldMount) {
+    return null;
+  }
+  const portalClassName = (0, _utils.cn)((0, _styles.dialogPortalVariants)());
+  const overlayClassName = (0, _utils.cn)((0, _styles.dialogOverlayVariants)());
+  const popupClassName = (0, _utils.cn)((0, _styles.dialogPopupVariants)({
     size
   }), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Content, {
-    ref: ref,
-    className: computedClassName,
-    style: style,
-    ...props,
-    children: children
+  const keyboardBehavior = avoidKeyboard ? _reactNative.Platform.select({
+    ios: 'padding',
+    default: 'height'
+  }) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DialogPortal, {
+    forceMount: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+      value: parentContext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationSettings.AnimationSettingsProvider, {
+        value: parentAnimationSettings,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation2.DialogAnimationProvider, {
+          value: animationContext,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FullWindowOverlay, {
+            disableFullWindowOverlay: disableFullWindowOverlay,
+            unstable_accessibilityContainerViewIsModal: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+              ref: wrapperRef,
+              className: portalClassName,
+              pointerEvents: "box-none",
+              ...(IS_WEB ? (0, _primitives.dataAttributes)({
+                state: dataState
+              }) : undefined),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                entering: overlayEntering,
+                exiting: overlayExiting,
+                style: _reactNative.StyleSheet.absoluteFill,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedOverlay, {
+                  forceMount: true,
+                  className: overlayClassName,
+                  style: IS_WEB ? undefined : rContainerStyle,
+                  ...(IS_WEB ? (0, _primitives.dataAttributes)({
+                    state: dataState
+                  }) : undefined)
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+                gesture: panGesture,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                  ref: dragContainerRef,
+                  style: internalStyles.fill,
+                  pointerEvents: "box-none",
+                  entering: contentEntering,
+                  exiting: contentExiting,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                    style: IS_WEB ? internalStyles.fill : [internalStyles.fill, rDragContainerStyle],
+                    pointerEvents: "box-none",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.KeyboardAvoidingView, {
+                      style: internalStyles.center,
+                      pointerEvents: "box-none",
+                      behavior: keyboardBehavior,
+                      keyboardVerticalOffset: keyboardVerticalOffset,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DialogContent, {
+                        ref: (0, _utils.mergeRefs)(ref, popupRef),
+                        forceMount: true,
+                        className: popupClassName,
+                        style: style,
+                        ...props,
+                        ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+                          slot: 'dialog-popup'
+                        }), IS_WEB ? (0, _primitives.dataAttributes)({
+                          state: dataState
+                        }) : undefined),
+                        children: children
+                      })
+                    })
+                  })
+                })
+              })]
+            })
+          })
+        })
+      })
+    })
   });
 });
-DialogContent.displayName = 'Dialog.Content';
+DialogPopup.displayName = 'Dialog.Popup';
 
 // =============================================================================
-// STYLED HEADER
+// STYLED HEADER (styled-only sub-slot)
 // =============================================================================
 
 const DialogHeader = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
   const computedClassName = (0, _utils.cn)((0, _styles.dialogHeaderVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Header, {
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-header'
+    })),
     children: children
   });
 });
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE
+// STYLED TITLE (styled-only sub-slot with severity variants)
 // =============================================================================
 
+/** @deprecated Use `severity` prop instead of `appearance`. */
+
+let hasWarnedDialogAppearanceProp = false;
+let hasWarnedDialogDefaultSeverity = false;
+const SEVERITY_ICON_MAP = {
+  danger: _icons.EmergencyHome,
+  warning: _icons.Warning,
+  success: _icons.CheckCircle
+};
 const DialogTitle = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  severity: severityProp,
+  appearance,
   className,
   children,
   style,
   ...props
 }, ref) => {
-  const computedClassName = (0, _utils.cn)((0, _styles.dialogTitleVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Title, {
+  (0, _react.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';
+  (0, _react.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 = rawSeverity === 'default' ? 'neutral' : rawSeverity;
+  const computedClassName = (0, _utils.cn)((0, _styles.dialogTitleVariants)({
+    severity
+  }), className);
+  const IconComponent = severity && severity in SEVERITY_ICON_MAP ? SEVERITY_ICON_MAP[severity] : null;
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  const titleElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-title'
+    })),
     children: children
   });
+  if (IconComponent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      className: "flex-row items-center gap-1",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        as: IconComponent,
+        className: (0, _styles.dialogTitleIconVariants)({
+          severity
+        })
+      }), titleElement]
+    });
+  }
+  return titleElement;
 });
 DialogTitle.displayName = 'Dialog.Title';
 
 // =============================================================================
-// STYLED DESCRIPTION
+// STYLED DESCRIPTION (styled-only sub-slot — reads dialog context for nativeID)
 // =============================================================================
 
 const DialogDescription = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
+  const {
+    nativeID
+  } = (0, _primitives.useDialog)();
   const computedClassName = (0, _utils.cn)((0, _styles.dialogDescriptionVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Description, {
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
+    nativeID: `${nativeID}-description`,
     className: computedClassName,
     style: style,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-description'
+    })),
     children: children
   });
 });
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED BODY
+// STYLED CONTENT (styled-only sub-slot — reads variant context for fullBleed)
+// =============================================================================
+
+const DialogContent = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    fullBleed
+  } = useDialogStyleContext();
+  const computedClassName = (0, _utils.cn)((0, _styles.dialogContentVariants)({
+    fullBleed: fullBleed ?? false
+  }), className);
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-content'
+    })),
+    children: children
+  });
+});
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED TEXT (convenience text styling, styled-only)
 // =============================================================================
 
-const DialogBody = /*#__PURE__*/(0, _react.forwardRef)(({
+const DialogText = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
-  const computedClassName = (0, _utils.cn)((0, _styles.dialogBodyVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Body, {
+  const computedClassName = (0, _utils.cn)((0, _styles.dialogTextVariants)(), className);
+  const Comp = asChild ? _primitives.Slot : _reactNative.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-text'
+    })),
     children: children
   });
 });
-DialogBody.displayName = 'Dialog.Body';
+DialogText.displayName = 'Dialog.Text';
 
 // =============================================================================
-// STYLED FOOTER
+// STYLED FOOTER (styled-only sub-slot)
 // =============================================================================
 
 const DialogFooter = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
   const computedClassName = (0, _utils.cn)((0, _styles.dialogFooterVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Footer, {
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-footer'
+    })),
     children: children
   });
 });
@@ -242,7 +560,7 @@ const DialogClose = /*#__PURE__*/(0, _react.forwardRef)(({
   ...props
 }, ref) => {
   const computedClassName = (0, _utils.cn)((0, _styles.dialogCloseVariants)(), className);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogPrimitive.Close, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DialogClose, {
     ref: ref,
     className: computedClassName,
     style: style,
@@ -250,6 +568,9 @@ const DialogClose = /*#__PURE__*/(0, _react.forwardRef)(({
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
     ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'dialog-close'
+    })),
     children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
       as: _icons.Close,
       className: (0, _styles.dialogCloseIconVariants)()
@@ -264,12 +585,28 @@ DialogClose.displayName = 'Dialog.Close';
 
 const Dialog = exports.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
 });
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = _reactNative.StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 //# sourceMappingURL=index.js.map