@xaui/native 0.0.30 → 0.0.32

package/README.md

@@ -76,6 +76,10 @@ This table lists all public components exported by `@xaui/native` and their impo
 | `Slider` | Draggable value selector slider. | `import { Slider } from '@xaui/native/slider'` |
 | `Select` | Select input with trigger and list behavior. | `import { Select } from '@xaui/native/select'` |
 | `SelectItem` | Select option item for `Select`. | `import { SelectItem } from '@xaui/native/select'` |
+| `Dialog` | Modal dialog container component. | `import { Dialog } from '@xaui/native/dialog'` |
+| `DialogHeader` | Header section for `Dialog`. | `import { DialogHeader } from '@xaui/native/dialog'` |
+| `DialogBody` | Body/content section for `Dialog`. | `import { DialogBody } from '@xaui/native/dialog'` |
+| `DialogFooter` | Footer/actions section for `Dialog`. | `import { DialogFooter } from '@xaui/native/dialog'` |
 | `Divider` | Horizontal or vertical separator line. | `import { Divider } from '@xaui/native/divider'` |
 | `Drawer` | Side sheet / drawer container. | `import { Drawer } from '@xaui/native/drawer'` |
 | `Skeleton` | Placeholder loading block. | `import { Skeleton } from '@xaui/native/skeleton'` |

package/dist/app-bar/index.cjs

@@ -39,10 +39,11 @@ var useAppBarElevationStyles = (elevation = 0) => {
 
 var styles = _reactnative.StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   floatingContainer: {
-    paddingHorizontal: 16,
     paddingVertical: 8
   },
   appBar: {
@@ -56,7 +57,9 @@ var styles = _reactnative.StyleSheet.create({
     borderRadius: 0
   },
   floating: {
-    width: "92%",
+    flexShrink: 1,
+    flexBasis: "auto",
+    maxWidth: "97%",
     borderRadius: 9999,
     alignSelf: "center"
   },
@@ -71,7 +74,7 @@ var styles = _reactnative.StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 12
+    paddingHorizontal: 10
   },
   endContent: {
     flexShrink: 0,
@@ -97,7 +100,7 @@ var AppBar = ({
   const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
   const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
   return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ _react2.default.createElement(
     _reactnative.View,
@@ -125,9 +128,11 @@ var AppBarStartContent = ({
 };
 var AppBarContent = ({
   children,
+  alignment = "center",
   style
 }) => {
-  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, style] }, children);
+  const alignItems = alignment === "start" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.content, { alignItems }, style] }, children);
 };
 var AppBarEndContent = ({
   children,

package/dist/app-bar/index.d.cts

@@ -40,8 +40,15 @@ type AppBarSlotProps = {
      */
     style?: StyleProp<ViewStyle>;
 };
+type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
 type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps & {
+    /**
+     * Horizontal alignment for content slot content.
+     * @default 'center'
+     */
+    alignment?: AppBarSlotContentAlignment;
+};
 type AppBarEndContentProps = AppBarSlotProps;
 
 declare const AppBar: React.FC<AppBarProps>;

package/dist/app-bar/index.d.ts

@@ -40,8 +40,15 @@ type AppBarSlotProps = {
      */
     style?: StyleProp<ViewStyle>;
 };
+type AppBarSlotContentAlignment = 'start' | 'center' | 'end';
 type AppBarStartContentProps = AppBarSlotProps;
-type AppBarContentProps = AppBarSlotProps;
+type AppBarContentProps = AppBarSlotProps & {
+    /**
+     * Horizontal alignment for content slot content.
+     * @default 'center'
+     */
+    alignment?: AppBarSlotContentAlignment;
+};
 type AppBarEndContentProps = AppBarSlotProps;
 
 declare const AppBar: React.FC<AppBarProps>;

package/dist/app-bar/index.js

@@ -39,10 +39,11 @@ var useAppBarElevationStyles = (elevation = 0) => {
 import { StyleSheet } from "react-native";
 var styles = StyleSheet.create({
   container: {
+    flexShrink: 1,
+    flexBasis: "auto",
     width: "100%"
   },
   floatingContainer: {
-    paddingHorizontal: 16,
     paddingVertical: 8
   },
   appBar: {
@@ -56,7 +57,9 @@ var styles = StyleSheet.create({
     borderRadius: 0
   },
   floating: {
-    width: "92%",
+    flexShrink: 1,
+    flexBasis: "auto",
+    maxWidth: "97%",
     borderRadius: 9999,
     alignSelf: "center"
   },
@@ -71,7 +74,7 @@ var styles = StyleSheet.create({
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 12
+    paddingHorizontal: 10
   },
   endContent: {
     flexShrink: 0,
@@ -97,7 +100,7 @@ var AppBar = ({
   const safeThemeColor = getSafeThemeColor(themeColor);
   const colorScheme = theme.colors[safeThemeColor];
   const isDefaultThemeColor = safeThemeColor === "default";
-  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : "#FFFFFF" : colorScheme.background;
+  const backgroundColor = isDefaultThemeColor ? theme.mode === "dark" ? theme.colors.default.background : isFloating ? theme.palette.gray[200] : "#FFFFFF" : colorScheme.background;
   const borderBottomColor = isDefaultThemeColor ? theme.mode === "dark" ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.08)" : colorScheme.main;
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isFloating && styles.floatingContainer] }, /* @__PURE__ */ React.createElement(
     View,
@@ -125,9 +128,11 @@ var AppBarStartContent = ({
 };
 var AppBarContent = ({
   children,
+  alignment = "center",
   style
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, style] }, children);
+  const alignItems = alignment === "start" ? "flex-start" : alignment === "center" ? "center" : "flex-end";
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.content, { alignItems }, style] }, children);
 };
 var AppBarEndContent = ({
   children,

package/dist/dialog/index.cjs

@@ -0,0 +1,381 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
+
+// src/components/dialog/dialog.tsx
+
+
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
+
+
+
+
+
+
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _core = require('@xaui/core');
+var _icons = require('@xaui/icons');
+
+// src/components/dialog/dialog.style.ts
+
+var styles = _reactnative.StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  backdrop: {
+    ..._reactnative.StyleSheet.absoluteFillObject
+  },
+  backdropTransparent: {
+    backgroundColor: "transparent"
+  },
+  backdropBlurred: {
+    backgroundColor: "rgba(15, 23, 42, 0.35)"
+  },
+  backdropOpaque: {
+    backgroundColor: "rgba(15, 23, 42, 0.55)"
+  },
+  placementBase: {
+    flex: 1,
+    paddingHorizontal: 16
+  },
+  placementTop: {
+    justifyContent: "flex-start",
+    paddingTop: 44,
+    paddingBottom: 16
+  },
+  placementCenter: {
+    justifyContent: "center",
+    paddingVertical: 16
+  },
+  placementBottom: {
+    justifyContent: "flex-end",
+    paddingTop: 16,
+    paddingBottom: 28
+  },
+  dialog: {
+    width: "100%",
+    alignSelf: "center",
+    overflow: "hidden",
+    borderWidth: 1
+  },
+  sizeSm: {
+    maxWidth: 360
+  },
+  sizeMd: {
+    maxWidth: 520
+  },
+  sizeLg: {
+    maxWidth: 700
+  },
+  sizeFull: {
+    maxWidth: "100%",
+    flex: 1
+  },
+  header: {
+    paddingTop: 18,
+    paddingBottom: 12,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  headerContent: {
+    flex: 1
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 26,
+    fontWeight: "700"
+  },
+  body: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    gap: 10
+  },
+  bodyText: {
+    fontSize: 15,
+    lineHeight: 22
+  },
+  footer: {
+    paddingTop: 8,
+    paddingBottom: 18,
+    paddingHorizontal: 20,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: 8
+  },
+  closeButton: {
+    padding: 4,
+    borderRadius: 999,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+// src/components/dialog/dialog.tsx
+var DialogContext = _react.createContext.call(void 0, {});
+var sizeStyles = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  full: styles.sizeFull
+};
+var placementStyles = {
+  top: styles.placementTop,
+  center: styles.placementCenter,
+  bottom: styles.placementBottom
+};
+var backdropStyles = {
+  transparent: styles.backdropTransparent,
+  blurred: styles.backdropBlurred,
+  opaque: styles.backdropOpaque
+};
+var ENTER_DURATION = 240;
+var EXIT_DURATION = 180;
+function getTranslateOffset(placement, animationType) {
+  if (animationType === "slide") {
+    if (placement === "top") return -28;
+    if (placement === "bottom") return 28;
+    return 18;
+  }
+  if (placement === "top") return -18;
+  if (placement === "bottom") return 18;
+  return 10;
+}
+var resolveChildrenContent = (content, textStyle) => {
+  if (content === void 0 || content === null) return null;
+  if (typeof content === "string" || typeof content === "number") {
+    return /* @__PURE__ */ _react2.default.createElement(_reactnative.Text, { style: textStyle }, content);
+  }
+  return content;
+};
+var Dialog = ({
+  children,
+  isOpen,
+  onClose,
+  onOpenChange,
+  size = "md",
+  placement = "center",
+  radius = "lg",
+  backdrop = "opaque",
+  closeOnBackdropPress = true,
+  hideBackdrop = false,
+  animationType = "fade",
+  disableAnimation = false,
+  style,
+  customAppearance
+}) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const radiusStyles = _chunkOQ2BLOOGcjs.useBorderRadiusStyles.call(void 0, radius);
+  const [shouldRender, setShouldRender] = _react.useState.call(void 0, isOpen);
+  const openRef = _react.useRef.call(void 0, isOpen);
+  const shouldAnimate = !disableAnimation && animationType !== "none";
+  const initialOffset = getTranslateOffset(placement, animationType);
+  const backdropOpacity = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
+  const dialogOpacity = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : 0);
+  const dialogTranslate = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 0 : initialOffset);
+  const dialogScale = _reactnativereanimated.useSharedValue.call(void 0, isOpen ? 1 : placement === "center" ? 0.98 : 1);
+  const requestClose = _react.useCallback.call(void 0, () => {
+    _optionalChain([onOpenChange, 'optionalCall', _ => _(false)]);
+    _optionalChain([onClose, 'optionalCall', _2 => _2()]);
+  }, [onClose, onOpenChange]);
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      requestClose();
+    }
+  };
+  const finishClosing = _react.useCallback.call(void 0, () => {
+    if (!openRef.current) {
+      setShouldRender(false);
+    }
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    openRef.current = isOpen;
+  }, [isOpen]);
+  _react.useEffect.call(void 0, () => {
+    if (isOpen && !shouldRender) {
+      setShouldRender(true);
+    }
+  }, [isOpen, shouldRender]);
+  _react.useEffect.call(void 0, () => {
+    if (!shouldRender) return;
+    if (!shouldAnimate) {
+      backdropOpacity.value = isOpen ? 1 : 0;
+      dialogOpacity.value = isOpen ? 1 : 0;
+      dialogTranslate.value = 0;
+      dialogScale.value = 1;
+      if (!isOpen) {
+        setShouldRender(false);
+      }
+      return;
+    }
+    const offset = getTranslateOffset(placement, animationType);
+    if (isOpen) {
+      backdropOpacity.value = 0;
+      dialogOpacity.value = 0;
+      dialogTranslate.value = offset;
+      dialogScale.value = placement === "center" ? 0.98 : 1;
+      backdropOpacity.value = _reactnativereanimated.withTiming.call(void 0, 1, {
+        duration: 210,
+        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
+      });
+      dialogOpacity.value = _reactnativereanimated.withTiming.call(void 0, 1, {
+        duration: 220,
+        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
+      });
+      dialogTranslate.value = _reactnativereanimated.withTiming.call(void 0, 0, {
+        duration: ENTER_DURATION,
+        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.cubic)
+      });
+      dialogScale.value = _reactnativereanimated.withTiming.call(void 0, 1, {
+        duration: 220,
+        easing: _reactnativereanimated.Easing.out(_reactnativereanimated.Easing.quad)
+      });
+      return;
+    }
+    backdropOpacity.value = _reactnativereanimated.withTiming.call(void 0, 0, {
+      duration: 150,
+      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
+    });
+    dialogTranslate.value = _reactnativereanimated.withTiming.call(void 0, offset, {
+      duration: EXIT_DURATION,
+      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.cubic)
+    });
+    dialogScale.value = _reactnativereanimated.withTiming.call(void 0, placement === "center" ? 0.98 : 1, {
+      duration: 150,
+      easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
+    });
+    dialogOpacity.value = _reactnativereanimated.withTiming.call(void 0, 
+      0,
+      {
+        duration: EXIT_DURATION,
+        easing: _reactnativereanimated.Easing.in(_reactnativereanimated.Easing.quad)
+      },
+      (finished) => {
+        if (finished) {
+          _reactnativereanimated.runOnJS.call(void 0, finishClosing)();
+        }
+      }
+    );
+  }, [
+    animationType,
+    backdropOpacity,
+    dialogOpacity,
+    dialogScale,
+    dialogTranslate,
+    finishClosing,
+    isOpen,
+    placement,
+    shouldAnimate,
+    shouldRender
+  ]);
+  const backdropAnimatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    opacity: backdropOpacity.value
+  }));
+  const dialogAnimatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => ({
+    opacity: dialogOpacity.value,
+    transform: [{ translateY: dialogTranslate.value }, { scale: dialogScale.value }]
+  }));
+  const dialogContextValue = _react.useMemo.call(void 0, 
+    () => ({
+      onClose: requestClose,
+      customAppearance
+    }),
+    [customAppearance, requestClose]
+  );
+  if (!shouldRender) return null;
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: requestClose
+    },
+    /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.root }, !hideBackdrop && /* @__PURE__ */ _react2.default.createElement(
+      AnimatedPressable,
+      {
+        style: [
+          styles.backdrop,
+          backdropStyles[backdrop],
+          backdropAnimatedStyle,
+          _optionalChain([customAppearance, 'optionalAccess', _3 => _3.backdrop])
+        ],
+        onPress: handleBackdropPress
+      }
+    ), /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.placementBase, placementStyles[placement]] }, /* @__PURE__ */ _react2.default.createElement(DialogContext.Provider, { value: dialogContextValue }, /* @__PURE__ */ _react2.default.createElement(_reactnative.Pressable, { onPress: (event) => event.stopPropagation() }, /* @__PURE__ */ _react2.default.createElement(
+      _reactnativereanimated2.default.View,
+      {
+        style: [
+          styles.dialog,
+          sizeStyles[size],
+          radiusStyles,
+          dialogAnimatedStyle,
+          {
+            backgroundColor: theme.colors.background,
+            borderColor: _core.withOpacity.call(void 0, theme.colors.foreground, 0.14)
+          },
+          theme.shadows.lg,
+          _optionalChain([customAppearance, 'optionalAccess', _4 => _4.container]),
+          style
+        ]
+      },
+      children
+    )))))
+  );
+};
+var AnimatedPressable = _reactnativereanimated2.default.createAnimatedComponent(_reactnative.Pressable);
+var DialogHeader = ({
+  children,
+  isClosable = false,
+  closeButton,
+  onClose,
+  style
+}) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const { onClose: contextClose, customAppearance } = _react.useContext.call(void 0, DialogContext);
+  const close = _nullishCoalesce(onClose, () => ( contextClose));
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.header, _optionalChain([customAppearance, 'optionalAccess', _5 => _5.header]), style] }, /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: styles.headerContent }, resolveChildrenContent(children, [
+    styles.headerText,
+    { color: theme.colors.foreground },
+    _optionalChain([customAppearance, 'optionalAccess', _6 => _6.headerText])
+  ])), isClosable && /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: "Close dialog",
+      onPress: close,
+      style: [styles.closeButton, _optionalChain([customAppearance, 'optionalAccess', _7 => _7.closeButton])]
+    },
+    _nullishCoalesce(closeButton, () => ( /* @__PURE__ */ _react2.default.createElement(_icons.CloseIcon, { size: 22, color: theme.colors.foreground })))
+  ));
+};
+var DialogBody = ({ children, style }) => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const { customAppearance } = _react.useContext.call(void 0, DialogContext);
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.body, _optionalChain([customAppearance, 'optionalAccess', _8 => _8.body]), style] }, resolveChildrenContent(children, [
+    styles.bodyText,
+    { color: _core.withOpacity.call(void 0, theme.colors.foreground, 0.9) },
+    _optionalChain([customAppearance, 'optionalAccess', _9 => _9.bodyText])
+  ]));
+};
+var DialogFooter = ({ children, style }) => {
+  const { customAppearance } = _react.useContext.call(void 0, DialogContext);
+  return /* @__PURE__ */ _react2.default.createElement(_reactnative.View, { style: [styles.footer, _optionalChain([customAppearance, 'optionalAccess', _10 => _10.footer]), style] }, children);
+};
+
+
+
+
+
+exports.Dialog = Dialog; exports.DialogBody = DialogBody; exports.DialogFooter = DialogFooter; exports.DialogHeader = DialogHeader;

package/dist/dialog/index.d.cts

@@ -0,0 +1,151 @@
+import React, { ReactNode } from 'react';
+import { ModalProps, ViewStyle, TextStyle } from 'react-native';
+import { R as Radius } from '../index-BOw6tbkc.cjs';
+
+type DialogSize = 'sm' | 'md' | 'lg' | 'full';
+type DialogPlacement = 'top' | 'center' | 'bottom';
+type DialogBackdrop = 'transparent' | 'blurred' | 'opaque';
+type DialogCustomAppearance = {
+    /**
+     * Custom style for the overlay backdrop.
+     */
+    backdrop?: ViewStyle;
+    /**
+     * Custom style for the dialog container.
+     */
+    container?: ViewStyle;
+    /**
+     * Custom style for the dialog header section.
+     */
+    header?: ViewStyle;
+    /**
+     * Custom style for the dialog body section.
+     */
+    body?: ViewStyle;
+    /**
+     * Custom style for the dialog footer section.
+     */
+    footer?: ViewStyle;
+    /**
+     * Custom style for the close button.
+     */
+    closeButton?: ViewStyle;
+    /**
+     * Custom style for default title text rendered in DialogHeader.
+     */
+    headerText?: TextStyle;
+    /**
+     * Custom style for default body text rendered in DialogBody.
+     */
+    bodyText?: TextStyle;
+};
+type DialogEvents = {
+    /**
+     * Called when the dialog requests to close.
+     */
+    onClose?: () => void;
+    /**
+     * Called whenever open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+type DialogProps = {
+    /**
+     * Dialog content.
+     */
+    children: ReactNode;
+    /**
+     * Controls visibility.
+     * @default false
+     */
+    isOpen: boolean;
+    /**
+     * Dialog size preset.
+     * @default 'md'
+     */
+    size?: DialogSize;
+    /**
+     * Dialog placement on screen.
+     * @default 'center'
+     */
+    placement?: DialogPlacement;
+    /**
+     * Border radius of the dialog container.
+     * @default 'lg'
+     */
+    radius?: Radius;
+    /**
+     * Controls backdrop intensity.
+     * @default 'opaque'
+     */
+    backdrop?: DialogBackdrop;
+    /**
+     * If true, backdrop press closes the dialog.
+     * @default true
+     */
+    closeOnBackdropPress?: boolean;
+    /**
+     * Whether to hide the backdrop layer.
+     * @default false
+     */
+    hideBackdrop?: boolean;
+    /**
+     * Modal animation type.
+     * @default 'fade'
+     */
+    animationType?: ModalProps['animationType'];
+    /**
+     * Disable animation by forcing `animationType="none"`.
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Extra style for the dialog container.
+     */
+    style?: ViewStyle;
+    /**
+     * Custom styles per section.
+     */
+    customAppearance?: DialogCustomAppearance;
+} & DialogEvents;
+type DialogHeaderProps = {
+    children?: ReactNode;
+    /**
+     * Whether to show a close button in header.
+     * @default false
+     */
+    isClosable?: boolean;
+    /**
+     * Custom close button element.
+     */
+    closeButton?: ReactNode;
+    /**
+     * Optional close callback override for this header.
+     */
+    onClose?: () => void;
+    /**
+     * Custom style for header container.
+     */
+    style?: ViewStyle;
+};
+type DialogBodyProps = {
+    children?: ReactNode;
+    /**
+     * Custom style for body container.
+     */
+    style?: ViewStyle;
+};
+type DialogFooterProps = {
+    children?: ReactNode;
+    /**
+     * Custom style for footer container.
+     */
+    style?: ViewStyle;
+};
+
+declare const Dialog: React.FC<DialogProps>;
+declare const DialogHeader: React.FC<DialogHeaderProps>;
+declare const DialogBody: React.FC<DialogBodyProps>;
+declare const DialogFooter: React.FC<DialogFooterProps>;
+
+export { Dialog, type DialogBackdrop, DialogBody, type DialogBodyProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogPlacement, type DialogProps, type DialogSize };