@oxyhq/bloom 0.45.0 → 0.48.0

package/src/dialog/DialogBottomSheet.tsx

@@ -12,6 +12,13 @@ import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import { DialogBody } from './DialogContent';
+import {
+  DIALOG_NAV_BAR_HEIGHT,
+  DialogHeaderProvider,
+  DialogLargeTitle,
+  DialogNavHeader,
+  useDialogHeaderController,
+} from './DialogHeader';
 import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
@@ -43,15 +50,18 @@ import type { DialogControlProps, DialogProps } from './types';
 export function DialogBottomSheet({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   showHandle = true,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  scrollable,
   style,
   panelStyle,
   panelClassName,
@@ -66,6 +76,7 @@ export function DialogBottomSheet({
   const closeCallbacks = useRef<(() => void)[]>([]);
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -161,41 +172,95 @@ export function DialogBottomSheet({
   }, [theme.colors.background, maxHeightRatio, panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
-  // actions), or is it pure custom `children`? Pure custom children own their
-  // own layout and scrolling, so we render them through a NON-scrollable
-  // BottomSheet body — otherwise the sheet's internal ScrollView would wrap a
-  // child that already contains its own scroller, producing a scroll-in-scroll
-  // (double scroll container). Declarative dialogs are short and keep the
-  // sheet's default scrollable body so they degrade gracefully on small
-  // viewports. This only changes what `DialogBottomSheet` passes to
-  // `BottomSheet`; the standalone `BottomSheet` API and its `scrollable` default
-  // are unchanged for direct consumers.
+  // actions)? This no longer gates the SCROLL decision (that is now the explicit
+  // `scrollable` prop below) — it only opts declarative dialogs into the
+  // gorhom-style pan coordination for their internal ScrollView. A declarative
+  // dialog overflowing on a small viewport needs the coordinated pan so the body
+  // scrolls instead of the drag stealing every vertical gesture; pure-custom
+  // children keep the legacy always-active pan.
   const hasDeclarativeChrome =
     title !== undefined ||
     description !== undefined ||
     (actions !== undefined && actions.length > 0);
 
+  const scrollableResolved = scrollable ?? true;
+
+  const dialogBody = (
+    <DialogBody
+      titleId={titleId}
+      descriptionId={descriptionId}
+      title={title}
+      description={description}
+      actions={actions}
+    >
+      {children}
+    </DialogBody>
+  );
+
+  // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+  // collapsing title over the sheet's OWN scroll content. The bar floats via the
+  // BottomSheet `headerOverlay` slot; the sheet's scroll offset feeds the shared
+  // controller (`scrollY`) that drives the small-title cross-fade. `contentPadding`
+  // is dropped (the large title + screens own their padding).
+  const headerBody = header ? (
+    scrollableResolved ? (
+      <>
+        <DialogLargeTitle controller={headerController} header={header} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    ) : (
+      <>
+        <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    )
+  ) : null;
+
   return (
     <BottomSheet
       ref={ref}
+      // Seed the sheet's open state so a fresh mount that should be open renders
+      // visible on its FIRST commit instead of relying on a present()-in-effect
+      // that races the mount and flashes blank. In controlled mode that seed is
+      // `controlledOpen`; in imperative mode it is the surface's `startOpen`
+      // intent — which is what lets a responsive Dialog survive a resize
+      // placement swap (centered card → bottom sheet) STILL OPEN.
+      open={isControlled ? controlledOpen : startOpen}
       onDismiss={handleDismiss}
       onDismissAttempt={onDismissAttempt}
       enablePanDownToClose
-      showHandle={showHandle}
-      // Pure custom children own scrolling → opt OUT of BottomSheet's internal
-      // ScrollView so there is exactly ONE scroll container (no scroll-in-scroll).
-      scrollable={hasDeclarativeChrome}
-      // Declarative dialogs (title/description/actions) that overflow render a
-      // tall body inside BottomSheet's internal ScrollView. Opt those sheets into
+      // Nav-header mode hides the drag handle (the nav bar sits at the very top);
+      // drag-to-dismiss still works via the coordinated body pan.
+      showHandle={header ? false : showHandle}
+      // Content scrolls inside the sheet's internal ScrollView by default; the
+      // Dialog owns the scroll boundary. A surface whose content owns its own
+      // scroller (a FlatList / VirtualizedList) passes `scrollable={false}` to
+      // opt OUT so there is exactly ONE scroll container (no scroll-in-scroll,
+      // no "VirtualizedList inside a plain ScrollView" warning).
+      scrollable={scrollableResolved}
+      // Declarative dialogs (title/description/actions) that overflow — AND every
+      // nav-header page (its scroll content overflows by design) — need
       // gorhom-style pan coordination: the drag-to-dismiss pan only activates
       // when the ScrollView is at the top AND the finger moves down >8dp —
       // otherwise the ScrollView owns the touch. Without this the always-active
       // legacy body-pan steals vertical drags and a tall body cannot scroll
       // (dragging up dismisses the sheet / bleeds into the parent instead). The
       // standalone `BottomSheet` API keeps its legacy `manualActivation={false}`
-      // default, so direct consumers are unaffected. Gated on the same flag as
-      // `scrollable` because only the internal-ScrollView path needs it.
-      manualActivation={hasDeclarativeChrome}
+      // default, so direct consumers are unaffected.
+      manualActivation={header ? scrollableResolved : hasDeclarativeChrome}
+      // Feed the sheet's scroll offset into the nav header's collapse controller.
+      scrollY={header ? headerController.scrollY : undefined}
+      // Float the sticky nav bar over the scroll body (clipped to the sheet top).
+      headerOverlay={
+        header ? (
+          <DialogNavHeader
+            controller={headerController}
+            header={header}
+            onDismiss={close}
+            collapse={scrollableResolved}
+          />
+        ) : undefined
+      }
       // Stronger dim than a lone sheet so an underlying sheet's handle/content
       // doesn't bleed through when a Dialog is stacked over one.
       backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
@@ -210,7 +275,9 @@ export function DialogBottomSheet({
           {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
           {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
           style={[
-            { padding: contentPadding },
+            // Nav-header mode: the large title + screens own their padding, so the
+            // wrapper adds none. Otherwise the Dialog's uniform content padding.
+            header ? null : { padding: contentPadding },
             // `containerStyle` carries the host's CSS-var theme scope; it wraps
             // the content subtree so descendants read the scoped palette.
             containerStyle,
@@ -218,15 +285,7 @@ export function DialogBottomSheet({
             panelStyle,
           ]}
         >
-          <DialogBody
-            titleId={titleId}
-            descriptionId={descriptionId}
-            title={title}
-            description={description}
-            actions={actions}
-          >
-            {children}
-          </DialogBody>
+          {header ? headerBody : dialogBody}
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -242,15 +301,18 @@ export type DialogBottomSheetProps = Pick<
   DialogProps,
   | 'control'
   | 'open'
+  | 'startOpen'
   | 'onClose'
   | 'testID'
   | 'title'
   | 'description'
   | 'actions'
+  | 'header'
   | 'maxHeightRatio'
   | 'showHandle'
   | 'dismissOnBackdrop'
   | 'contentPadding'
+  | 'scrollable'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'

package/src/dialog/DialogHeader.tsx

@@ -0,0 +1,420 @@
+import React, {
+  createContext,
+  memo,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
+import {
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+import {
+  ChevronLeft_Stroke2_Corner0_Rounded,
+  TimesLarge_Stroke2_Corner0_Rounded,
+} from '../icons';
+import { FrostedIconButton } from '../frosted-icon-button';
+import { useTheme } from '../theme/use-theme';
+import { H1, Text } from '../typography';
+import type { DialogHeaderConfig } from './types';
+
+export type { DialogHeaderConfig } from './types';
+
+// ---------------------------------------------------------------------------
+//  Dialog-owned navigation header (iOS large-title collapse).
+//
+//  This is a DISTINCT surface mode from the declarative
+//  `title`/`description`/`actions` centered-heading path: it turns the Dialog
+//  into a scrolling page with a sticky, gradient top bar (left + right slots)
+//  and a large collapsing title that lives in the Dialog's OWN scroll content.
+//  As the large title scrolls under the bar, a small title cross-fades into the
+//  bar center.
+//
+//  Screens render NO header of their own — they declare their title/subtitle
+//  (via the surface registry) or contribute runtime slots (a Save action, a
+//  dynamic title) through {@link useDialogHeader}.
+// ---------------------------------------------------------------------------
+
+/** Interactive nav-bar row height (px). Buttons + collapsed title live here. */
+export const DIALOG_NAV_BAR_HEIGHT = 52;
+
+/** Extra gradient tail (px) below the bar, over which scrolled content fades. */
+const GRADIENT_FADE = 20;
+
+/** Total gradient overlay height (bar + fade tail). */
+export const DIALOG_HEADER_OVERLAY_HEIGHT = DIALOG_NAV_BAR_HEIGHT + GRADIENT_FADE;
+
+/**
+ * Top inset applied to the Dialog's scroll content so the large title starts
+ * BELOW the whole gradient overlay (fully clear at rest, then scrolls under it).
+ */
+export const DIALOG_HEADER_CONTENT_TOP = DIALOG_HEADER_OVERLAY_HEIGHT;
+
+/** Horizontal gutter — matches the `screen-margin` (20px) SDK screens use. */
+const HEADER_H_PADDING = 20;
+
+/** Circular icon-button diameter for the default back / close affordances. */
+const NAV_BUTTON_SIZE = 36;
+
+// --- Runtime override store (child screen → nav bar / large title) ----------
+//
+// The nav bar overlay and the in-content large title live in DIFFERENT subtrees
+// (the bar is a sibling ABOVE the scroller; the large title + the screen are
+// inside it), so a plain React ancestor context cannot bridge a screen's runtime
+// contribution up to the bar. We use a tiny external store instead: the screen
+// writes its override through {@link useDialogHeader}; the bar and large title
+// read it via `useSyncExternalStore`. Only those two re-render — never the
+// screen subtree — and there is no shared-ancestor constraint.
+
+interface HeaderStore {
+  getSnapshot: () => DialogHeaderConfig | null;
+  setOverride: (next: DialogHeaderConfig | null) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.title === b.title &&
+    a.subtitle === b.subtitle &&
+    a.largeTitle === b.largeTitle &&
+    a.left === b.left &&
+    a.right === b.right &&
+    a.onBack === b.onBack &&
+    a.showClose === b.showClose
+  );
+}
+
+function createHeaderStore(): HeaderStore {
+  let override: DialogHeaderConfig | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    getSnapshot: () => override,
+    setOverride: (next) => {
+      if (configsEqual(override, next)) return;
+      override = next;
+      for (const l of listeners) l();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+/**
+ * The per-surface header controller — the scroll offset + measured large-title
+ * height shared values plus the runtime-override store. Created once per Dialog
+ * (via {@link useDialogHeaderController}) and threaded into the scroller (writes
+ * `scrollY`), the nav bar, the large title, and the child provider.
+ */
+export interface DialogHeaderController {
+  scrollY: SharedValue<number>;
+  largeTitleHeight: SharedValue<number>;
+  store: HeaderStore;
+}
+
+/** Create the header controller for one Dialog. Stable for the Dialog's life. */
+export function useDialogHeaderController(): DialogHeaderController {
+  const scrollY = useSharedValue(0);
+  const largeTitleHeight = useSharedValue(0);
+  const store = useMemo(() => createHeaderStore(), []);
+  return useMemo(
+    () => ({ scrollY, largeTitleHeight, store }),
+    [scrollY, largeTitleHeight, store],
+  );
+}
+
+const DialogHeaderContext = createContext<DialogHeaderController | null>(null);
+
+/**
+ * Wraps the Dialog's scroll content so a mounted screen can contribute header
+ * slots via {@link useDialogHeader}. Only the child subtree needs this — the nav
+ * bar and large title read the same controller directly.
+ */
+export function DialogHeaderProvider({
+  controller,
+  children,
+}: {
+  controller: DialogHeaderController;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <DialogHeaderContext.Provider value={controller}>
+      {children}
+    </DialogHeaderContext.Provider>
+  );
+}
+
+/**
+ * Contribute header content from within a Dialog surface — a dynamic title, a
+ * Save action, custom slots. Merges over the surface's static (registry) header
+ * config; unmounting clears the contribution. Slot nodes (`left`/`right`) MUST
+ * be referentially stable (memoize them) so the effect does not thrash.
+ *
+ * No-op outside a header-mode Dialog (e.g. a confirm dialog), so a screen can
+ * call it unconditionally.
+ */
+export function useDialogHeader(config: DialogHeaderConfig | null | undefined): void {
+  const controller = useContext(DialogHeaderContext);
+  const store = controller?.store;
+  // Set synchronously in the commit's layout phase so the bar/title fill in
+  // BEFORE the browser paints — no first-frame flash of an empty bar.
+  useLayoutEffect(() => {
+    if (!store) return;
+    store.setOverride(config ?? null);
+    return () => store.setOverride(null);
+    // Slot nodes are compared by identity; callers memoize them.
+  }, [
+    store,
+    config?.title,
+    config?.subtitle,
+    config?.largeTitle,
+    config?.left,
+    config?.right,
+    config?.onBack,
+    config?.showClose,
+  ]);
+}
+
+/** Read the merged (base + runtime-override) header config, reactively. */
+function useMergedHeaderConfig(
+  base: DialogHeaderConfig,
+  store: HeaderStore,
+): DialogHeaderConfig {
+  const override = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo(() => (override ? { ...base, ...override } : base), [base, override]);
+}
+
+// --- Nav bar overlay --------------------------------------------------------
+
+/**
+ * The sticky nav bar: gradient background + left / center (collapsing title) /
+ * right slots. Absolutely positioned at the top of the Dialog surface, painted
+ * ABOVE the scroll content. Reads the scroll offset to cross-fade the small
+ * title in as the large title scrolls under it.
+ *
+ * `onDismiss` is the Dialog's own close (the default right-slot close button
+ * calls it) — passed explicitly rather than read from the dialog context because
+ * the bar is rendered as a sibling of the scroller, outside that context on the
+ * bottom-sheet path.
+ */
+export const DialogNavHeader = memo(function DialogNavHeader({
+  controller,
+  header,
+  onDismiss,
+  collapse = true,
+  style,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+  onDismiss: () => void;
+  /**
+   * Whether the small title cross-fades in on scroll (paired with an in-content
+   * {@link DialogLargeTitle}). Defaults to `true`. Set `false` for a surface
+   * whose content owns its own scroller (no Dialog scroll offset to drive the
+   * collapse): the small title is then always visible — a plain titled nav bar.
+   */
+  collapse?: boolean;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { scrollY, largeTitleHeight } = controller;
+
+  const hasLargeTitle = collapse && (config.largeTitle ?? true) && !!config.title;
+
+  const titleStyle = useAnimatedStyle(() => {
+    // When there is no large title to collapse under, the bar title is always
+    // shown (a plain, non-collapsing nav bar). Otherwise it cross-fades in as the
+    // large title scrolls up under the bar.
+    if (!hasLargeTitle) return { opacity: 1, transform: [{ translateY: 0 }] };
+    const threshold = largeTitleHeight.value > 0 ? largeTitleHeight.value : 44;
+    const start = threshold * 0.35;
+    const end = threshold * 0.9;
+    return {
+      opacity: interpolate(scrollY.value, [start, end], [0, 1], Extrapolation.CLAMP),
+      transform: [
+        { translateY: interpolate(scrollY.value, [start, end], [10, 0], Extrapolation.CLAMP) },
+      ],
+    };
+    // Reanimated on RN-Web has no worklets plugin: every shared value the mapper
+    // reads MUST be in the deps array or it freezes on the first frame.
+  }, [scrollY, largeTitleHeight, hasLargeTitle]);
+
+  const left =
+    config.left ??
+    (config.onBack ? (
+      <FrostedIconButton
+        onPress={config.onBack}
+        accessibilityLabel="Go back"
+        icon={<ChevronLeft_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  const right =
+    config.right ??
+    (config.showClose !== false ? (
+      <FrostedIconButton
+        onPress={onDismiss}
+        accessibilityLabel="Close"
+        icon={<TimesLarge_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.overlay, style]}
+    >
+      {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
+          content fades out under the bar. Pure NativeWind — no SVG dependency. */}
+      <View
+        pointerEvents="none"
+        className="bg-gradient-to-b from-bg to-transparent"
+        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
+      />
+      <View pointerEvents="box-none" style={styles.navRow}>
+        <View style={styles.side}>{left}</View>
+        <Animated.View
+          pointerEvents="none"
+          testID="dialog-nav-title"
+          style={[styles.centerTitle, titleStyle]}
+        >
+          {config.title ? (
+            <Text numberOfLines={1} style={[styles.smallTitle, { color: theme.colors.text }]}>
+              {config.title}
+            </Text>
+          ) : null}
+          {/* The subtitle rides along ONLY in the static (non-collapsing) bar —
+              own-scroller screens whose subtitle is a short count. A large-title
+              screen keeps a clean single-line collapsed title. */}
+          {!hasLargeTitle && config.subtitle ? (
+            <Text
+              numberOfLines={1}
+              style={[styles.smallSubtitle, { color: theme.colors.textSecondary }]}
+            >
+              {config.subtitle}
+            </Text>
+          ) : null}
+        </Animated.View>
+        <View style={[styles.side, styles.sideRight]}>{right}</View>
+      </View>
+    </View>
+  );
+});
+
+// --- In-content large title -------------------------------------------------
+
+/**
+ * The large collapsing title, rendered at the TOP of the Dialog's scroll content
+ * (before the screen body). Owns the content top inset (so the title starts
+ * below the gradient overlay) and measures its own text height into the
+ * controller so the nav bar knows when to cross-fade the small title in.
+ */
+export const DialogLargeTitle = memo(function DialogLargeTitle({
+  controller,
+  header,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { largeTitleHeight } = controller;
+
+  const hasLargeTitle = (config.largeTitle ?? true) && !!config.title;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    largeTitleHeight.value = e.nativeEvent.layout.height;
+  };
+
+  if (!hasLargeTitle) {
+    // No large title: just inset the content below the nav bar.
+    return <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
+  }
+
+  return (
+    <>
+      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
+        <H1 style={[styles.largeTitle, { color: theme.colors.text }]}>{config.title}</H1>
+        {config.subtitle ? (
+          <Text style={[styles.largeSubtitle, { color: theme.colors.textSecondary }]}>
+            {config.subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: DIALOG_HEADER_OVERLAY_HEIGHT,
+    zIndex: 10,
+  },
+  navRow: {
+    height: DIALOG_NAV_BAR_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: HEADER_H_PADDING - 4,
+  },
+  side: {
+    minWidth: NAV_BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sideRight: {
+    justifyContent: 'flex-end',
+  },
+  centerTitle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  smallTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    lineHeight: 20,
+  },
+  smallSubtitle: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 14,
+  },
+  largeTitleBlock: {
+    paddingHorizontal: HEADER_H_PADDING,
+    paddingBottom: 4,
+  },
+  largeTitle: {
+    fontSize: 32,
+    lineHeight: 38,
+    letterSpacing: -0.5,
+    fontWeight: '700',
+  },
+  largeSubtitle: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginTop: 4,
+  },
+});

package/src/dialog/index.ts

@@ -2,6 +2,7 @@ export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
 export { BloomDialogProvider } from './BloomDialogProvider';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
+export { useDialogHeader } from './DialogHeader';
 export type {
   AlertButton,
   AlertButtonStyle,
@@ -11,6 +12,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,

package/src/dialog/index.web.ts

@@ -12,6 +12,7 @@ export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog
 export { BloomDialogProvider } from './BloomDialogProvider.web';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
+export { useDialogHeader } from './DialogHeader';
 export type {
   AlertButton,
   AlertButtonStyle,
@@ -21,6 +22,7 @@ export type {
   DialogActionColor,
   DialogContextProps,
   DialogControlProps,
+  DialogHeaderConfig,
   DialogInset,
   DialogPlacement,
   DialogProps,