react-native-terra-ui 0.11.10 → 0.11.12

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -3,91 +3,39 @@ import { useId } from "react";
 import Svg, { Defs, Rect, Stop, LinearGradient as SvgLinearGradient } from "react-native-svg";
 
 /**
- * How far the overlay extends below the bar's bottom edge, in dp.
- *
- * The fade needs more room than the bar alone can give it: confined to the bar,
- * the curve has to be steep enough to read as a band. Overhanging lets the tail
- * finish in open space, so the header releases content instead of cutting it.
- */
-export const HEADER_FADE_EXTENT = 8;
-
-/**
- * Where the fade begins, as a fraction of the overlay's height — the bar plus
- * {@link HEADER_FADE_EXTENT}.
- *
- * Sits inside the bar rather than at its bottom edge, so the tint has already
- * begun thinning before content reaches the boundary. That is the trade this
- * value makes: a longer, gentler ramp, paid for with content being faintly
- * visible through the lower part of the bar.
+ * Opacity at the overlay's bottom edge. The top is fully opaque, so the header
+ * thins slightly toward the boundary rather than cutting content off square —
+ * but never far enough to read as see-through.
  */
-const FADE_START = 0.5;
-
-/**
- * Stops used to approximate the fade curve. Below ~10 the ramp shows as a series
- * of bands on an 8-bit display; above ~14 the extra stops cost SVG parse time
- * with nothing visible in return.
- */
-const FADE_STOPS = 4;
-
-/** Ceiling on the fade's opacity — see {@link alphaAt}. */
-const MAX_FADE_ALPHA = 0.65;
-
-/**
- * Raised cosine, capped at {@link MAX_FADE_ALPHA}, reaching 0 at the overlay's
- * bottom.
- *
- * The curve's slope is zero at both ends, so neither the start of the fade nor
- * its finish leaves a seam. A two-stop linear ramp has a constant slope that
- * begins and ends abruptly, and those two hard edges are what read as a line
- * drawn across the content rather than the header letting go of it.
- *
- * The cap holds the ramp just short of solid, so the whole overlay reads as one
- * continuous gradient rather than an opaque plateau with a curve bolted on.
- */
-const alphaAt = (t: number) => (1 + Math.cos(Math.PI * t) * MAX_FADE_ALPHA) / 2;
-
-/**
- * Every input is a module constant, so the ramp is built once at load rather
- * than rebuilt per render.
- *
- * The leading stop belongs to this list rather than being a sibling element:
- * `LinearGradient` types its children as a flat `ReactElement[]`, so an element
- * beside a mapped array would nest and fail to type-check.
- */
-const STOPS = [
-  { offset: 0, opacity: 1 },
-  ...Array.from({ length: FADE_STOPS }, (_, index) => {
-    const t = index / (FADE_STOPS - 1);
-    const offset = FADE_START + t * (1 - FADE_START);
-    return { offset, opacity: offset === 1 ? 0 : alphaAt(t) };
-  }),
-];
+export const HEADER_FADE_END_OPACITY = 0.85;
 
 export interface HeaderGradientOverlayProps {
-  /** Fill color, fading to fully transparent along the overlay. */
+  /** Fill color, ramped from opaque to {@link HEADER_FADE_END_OPACITY}. */
   color: string;
+  startOpacity?: number;
+  endOpacity?: number;
 }
 
 /**
- * Vertical fade-out overlay behind header content, shared by header variants.
- *
- * Reaches zero rather than stopping short. An overlay ending at partial opacity
- * leaves a hard step wherever it is clipped, and that step is far more visible
- * than the fade it was meant to hide — it is what cuts content off square as it
- * scrolls under the header.
+ * Vertical fade behind header content, shared by header variants.
  *
- * Callers size it to overhang the bar by {@link HEADER_FADE_EXTENT}.
+ * A two-stop linear ramp spanning the overlay's own box: it neither overhangs
+ * the surface nor reserves a band inside it, so callers size the surface and
+ * the ramp simply spans whatever they gave it.
  */
-export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
+export function HeaderGradientOverlay({
+  color,
+  startOpacity = 1,
+  endOpacity = HEADER_FADE_END_OPACITY,
+}: HeaderGradientOverlayProps) {
   const gradientId = useId();
 
   return (
     <Svg height="100%" width="100%">
       <Defs>
         <SvgLinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-          {STOPS.map((stop) => (
-            <Stop key={stop.offset} offset={stop.offset} stopColor={color} stopOpacity={stop.opacity} />
-          ))}
+          <Stop offset={0} stopColor={color} stopOpacity={startOpacity} />
+          <Stop offset={1} stopColor={color} stopOpacity={endOpacity} />
         </SvgLinearGradient>
       </Defs>
       <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />

package/src/components/header/parts/HeaderSurface.tsx

@@ -1,62 +1,43 @@
-import { View } from "react-native";
-
 import Animated, { type useAnimatedStyle } from "react-native-reanimated";
 import { StyleSheet } from "react-native-unistyles";
 
-import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "./HeaderGradientOverlay";
+import { HEADER_FADE_END_OPACITY, HeaderGradientOverlay } from "./HeaderGradientOverlay";
 
 type HeaderOpacityStyle = ReturnType<typeof useAnimatedStyle<{ opacity: number }>>;
 
 export interface HeaderSurfaceProps {
-  /** Fill color, fading to fully transparent along the bottom edge. */
+  /** Fill color, ramped toward the surface's bottom edge. */
   color: string;
   /** Opacity style for variants that fade the whole surface in as they collapse. */
   animatedStyle?: HeaderOpacityStyle;
-  /**
-   * Height of the bottom gradient in dp. The region above it uses a solid fill.
-   * @defaultValue The themed bar height plus `HEADER_FADE_EXTENT`.
-   */
-  fadeHeight?: number;
+  /** Continue the bar's gradient from 0.85 to 0.80 beneath an accessory. */
+  accessory?: boolean;
 }
 
 /**
- * Header background with a solid fill and a bottom gradient.
- * A fixed gradient height keeps tall accessories from becoming translucent.
+ * Header background with matching gradient boundaries for the bar and accessory.
+ *
+ * The ramp spans the surface itself: it is sized by the caller and stays inside
+ * those bounds, so a taller surface stretches the fade rather than adding to it.
  */
-export function HeaderSurface({ color, animatedStyle, fadeHeight }: HeaderSurfaceProps) {
+export function HeaderSurface({ color, animatedStyle, accessory }: HeaderSurfaceProps) {
   return (
     <Animated.View style={[styles.surface, animatedStyle]} pointerEvents="none">
-      <View style={styles.fill(color, fadeHeight)} />
-      <View style={styles.fade(fadeHeight)}>
-        <HeaderGradientOverlay color={color} />
-      </View>
+      <HeaderGradientOverlay
+        color={color}
+        startOpacity={accessory ? HEADER_FADE_END_OPACITY : 1}
+        endOpacity={accessory ? 0.8 : HEADER_FADE_END_OPACITY}
+      />
     </Animated.View>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  // Extend the fade below the header's layout bounds.
+const styles = StyleSheet.create(() => ({
   surface: {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
-    bottom: -HEADER_FADE_EXTENT,
-  },
-  // Fill the region above the gradient.
-  fill: (color: string, fadeHeight: number | undefined) => ({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: fadeHeight ?? theme.layout.header.height + HEADER_FADE_EXTENT,
-    backgroundColor: color,
-  }),
-  fade: (fadeHeight: number | undefined) => ({
-    position: "absolute",
-    left: 0,
-    right: 0,
     bottom: 0,
-    height: fadeHeight ?? theme.layout.header.height + HEADER_FADE_EXTENT,
-  }),
+  },
 }));

package/src/components/header/variants/LargeTitleHeader/index.tsx

@@ -1,29 +1,17 @@
-import { useCallback, useEffect, useState } from "react";
-import { type LayoutChangeEvent, Text, View } from "react-native";
+import { View } from "react-native";
 
-import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
-import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { StyleSheet } from "react-native-unistyles";
 
-import { resolveThemeColor } from "#utils/resolve-theme-color";
-import { FONT_WEIGHT_VALUE } from "#utils/typography";
 import { Portal } from "../../../portal";
 import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearance";
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
-import { Toolbar } from "../../../toolbar";
-import { HeaderDismissButton } from "../../header-buttons";
+import { SCREEN_HEADER_PORTAL_HOST } from "../../../screen/ScreenContext";
+import { useHeaderColor } from "../../hooks/use-header-color";
+import { useLargeTitleHeader } from "../../hooks/use-large-title-header";
 import { HeaderAccessory, HeaderAccessorySpacer } from "../../parts/HeaderAccessory";
-import { HEADER_FADE_EXTENT } from "../../parts/HeaderGradientOverlay";
-import { HeaderSurface } from "../../parts/HeaderSurface";
+import { HeaderBar } from "../../parts/HeaderBar";
 import type { HeaderAccessoryBehavior } from "../../types";
-import { isCustomTitle, isTextTitle } from "../../utils";
 import type { TitleHeaderProps } from "../TitleHeader";
-
-const AnimatedText = Animated.createAnimatedComponent(Text);
-
-/** Compact title offset (px) when the large title is fully expanded. */
-const COMPACT_TITLE_SLIDE_OFFSET = 8;
-/** Large title offset (px) when fully collapsed. */
-const LARGE_TITLE_SLIDE_OFFSET = 6;
+import { LargeTitleContent } from "./parts/LargeTitleContent";
 
 export interface LargeTitleHeaderProps extends TitleHeaderProps {
   /** Optional small line shown above the large title. */
@@ -35,7 +23,7 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
   /**
    * How `accessory` moves while scrolling. `'sticky'` starts below the large title
    * and pins below the compact bar when scrolled up. A hidden large title always pins.
-   * @defaultValue 'pinned'
+   * @defaultValue 'sticky'
    */
   accessoryBehavior?: HeaderAccessoryBehavior;
   /**
@@ -45,98 +33,7 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
   titleAlignment?: "center" | "left";
 }
 
-function LargeTitlePortalContent({
-  title,
-  overline,
-  subtitle,
-  hasAccessoryBelow,
-  onHeightChange,
-}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
-  /** Reserve a gap before a sticky accessory below this block. */
-  hasAccessoryBelow: boolean;
-  /** Reports the large-title block's layout height in dp. */
-  onHeightChange?: (height: number) => void;
-}) {
-  const { theme } = useUnistyles();
-  const { scrollY } = useScreen();
-
-  const headerCollapseHeight = theme.layout.header.height;
-
-  const largeTitleAnimatedStyle = useAnimatedStyle(() => {
-    const height = headerCollapseHeight;
-    if (height <= 0) {
-      return { opacity: 1, transform: [{ translateY: 0 }] };
-    }
-
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [1, 0], "clamp"),
-      transform: [
-        {
-          translateY: interpolate(scrollY.value, [0, height], [0, -LARGE_TITLE_SLIDE_OFFSET], "clamp"),
-        },
-      ],
-    };
-  });
-
-  // Layout height excludes the collapse transform.
-  const handleLayout = (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height);
-
-  return (
-    <Animated.View
-      style={[styles.portalContent(hasAccessoryBelow), largeTitleAnimatedStyle]}
-      onLayout={handleLayout}
-    >
-      {!!overline && (
-        <Text
-          style={styles.overline}
-          maxFontSizeMultiplier={theme.typography.variants["label-sm"].maxFontSizeMultiplier}
-        >
-          {overline}
-        </Text>
-      )}
-      {isTextTitle(title) ? (
-        <Text
-          style={styles.largeTitle}
-          maxFontSizeMultiplier={theme.typography.variants["headline-lg"].maxFontSizeMultiplier}
-        >
-          {title}
-        </Text>
-      ) : (
-        title
-      )}
-      {!!subtitle && (
-        <Text
-          style={styles.subtitle}
-          maxFontSizeMultiplier={theme.typography.variants["body-lg"].maxFontSizeMultiplier}
-        >
-          {subtitle}
-        </Text>
-      )}
-    </Animated.View>
-  );
-}
-
-/**
- * iOS-style collapsing large-title header. The large title is injected (via the
- * `Screen`'s portal) into the top of the scroll content, so it scrolls away
- * naturally; the compact title cross-fades over the theme header height.
- * The top safe area and bar overlay fade from transparent when expanded to
- * the header background when collapsed. The large-title content stays transparent.
- * Snapping is opt-in through the scroll container's snapToOffsets.
- *
- * Must be used inside a `Screen` with a `Screen.ScrollView` or `Screen.List`.
- *
- * @example
- * ```tsx
- * <Screen.Header>
- *   <Header.LargeTitle
- *     overline="Today"
- *     title="Meditate"
- *     subtitle="Good morning"
- *   />
- * </Screen.Header>
- * ```
- */
+/** Collapsing header. The expanded title lives in scroll content; the bar and accessory overlay it. */
 export function LargeTitleHeader({
   title,
   overline,
@@ -148,205 +45,61 @@ export function LargeTitleHeader({
   accessory,
   accessoryPadding = "x",
   accessoryBehavior = "sticky",
-  dismissAction = "none",
-  navigation,
-  onDismiss,
   titleAlignment = "center",
   isLargeTitleHidden = false,
   background,
   bg,
+  ...dismissProps
 }: LargeTitleHeaderProps) {
-  const { theme } = useUnistyles();
-
-  const { scrollY, background: screenBackground, setHeaderAccessoryHeight, contentTopPadding } = useScreen();
-  const colorToken = background ?? bg;
-  const bgColor =
-    (colorToken ? resolveThemeColor(colorToken, theme) : screenBackground) ?? theme.color["surface.canvas"];
-  const leadingContent = leadingActions !== undefined ? leadingActions : LeftToolbar;
-  const trailingContent = trailingActions !== undefined ? trailingActions : RightToolbar;
-
-  const gradientColor = bgColor;
-  const isSticky = accessoryBehavior === "sticky" && !isLargeTitleHidden;
-  const hasStickyAccessory = isSticky && accessory != null;
-  // Sticky accessories reserve space below the large title; pinned ones add top padding.
-  const [stickyAccessoryHeight, setStickyAccessoryHeight] = useState(0);
-  const [largeTitleHeight, setLargeTitleHeight] = useState(0);
-  const isLargeTitleHiddenValue = useSharedValue(isLargeTitleHidden);
-
-  const handleAccessoryHeightChange = useCallback(
-    (height: number) => {
-      if (isSticky) setStickyAccessoryHeight(Math.max(0, Math.round(height)));
-      else setHeaderAccessoryHeight(height);
-    },
-    [isSticky, setHeaderAccessoryHeight]
-  );
-
-  const handleLargeTitleHeightChange = useCallback((height: number) => {
-    setLargeTitleHeight(Math.max(0, Math.round(height)));
-  }, []);
-
-  // Rest below the title, including the scroll container's top padding.
-  const stickyAccessoryOffset = Math.max(
-    0,
-    contentTopPadding + largeTitleHeight - theme.layout.header.height
-  );
-
-  // Zero translation places the accessory directly below the compact bar.
-  const stickyAccessoryStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { transform: [{ translateY: 0 }] };
-    }
-    return {
-      transform: [{ translateY: Math.max(0, stickyAccessoryOffset - scrollY.value) }],
-    };
+  const color = useHeaderColor(background ?? bg);
+  const layout = useLargeTitleHeader({
+    hasAccessory: accessory != null,
+    accessoryBehavior,
+    isLargeTitleHidden,
   });
-  const headerCollapseHeight = theme.layout.header.height;
-  styles.useVariants({ titleAlignment });
-
-  // Follow the accessory's bottom edge while keeping the background anchored to the bar.
-  const stickySurfaceStyle = useAnimatedStyle(() => ({
-    height: headerCollapseHeight + stickyAccessoryHeight + Math.max(0, stickyAccessoryOffset - scrollY.value),
-  }));
-
-  // Blend the accessory's resting surface into the shared header background.
-  const accessorySurfaceStyle = useAnimatedStyle(() => ({
-    opacity:
-      stickyAccessoryOffset > 0 ? interpolate(scrollY.value, [0, stickyAccessoryOffset], [1, 0], "clamp") : 0,
-  }));
-
-  // Animate the gradient overlay's opacity: 0 (expanded) → 1 (collapsed).
-  const gradientOpacityStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { opacity: 1 };
-    }
-    const height = hasStickyAccessory ? stickyAccessoryOffset : headerCollapseHeight;
-    if (height <= 0) {
-      return { opacity: hasStickyAccessory ? 1 : 0 };
-    }
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
-    };
-  });
-
-  useHeaderBackground(bgColor, gradientOpacityStyle);
-
-  const compactTitleAnimatedStyle = useAnimatedStyle(() => {
-    if (isLargeTitleHiddenValue.value) {
-      return { opacity: 1, transform: [{ translateY: 0 }] };
-    }
-
-    const height = headerCollapseHeight;
-    if (height <= 0) {
-      return {
-        opacity: 0,
-        transform: [{ translateY: COMPACT_TITLE_SLIDE_OFFSET }],
-      };
-    }
-
-    return {
-      opacity: interpolate(scrollY.value, [0, height], [0, 1], "clamp"),
-      transform: [
-        {
-          translateY: interpolate(scrollY.value, [0, height], [COMPACT_TITLE_SLIDE_OFFSET, 0], "clamp"),
-        },
-      ],
-    };
-  });
-
-  useEffect(() => {
-    isLargeTitleHiddenValue.value = isLargeTitleHidden;
-  }, [isLargeTitleHidden, isLargeTitleHiddenValue]);
-
-  const leading =
-    dismissAction === "back" ? (
-      <>
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-        {leadingContent}
-      </>
-    ) : (
-      leadingContent
-    );
-
-  const trailing =
-    dismissAction === "close" ? (
-      <>
-        {trailingContent}
-        <HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
-      </>
-    ) : (
-      trailingContent
-    );
-
+  useHeaderBackground(color, layout.surfaceStyle);
   return (
-    // Let touches in the expanded header's empty space reach the scroll content.
-    <View style={styles.container(isSticky ? stickyAccessoryOffset : 0)} pointerEvents="box-none">
+    <View style={styles.container(layout.accessoryOffset)} pointerEvents="box-none">
       {!isLargeTitleHidden && (
         <Portal hostName={SCREEN_HEADER_PORTAL_HOST}>
-          <LargeTitlePortalContent
+          <LargeTitleContent
             title={title}
             overline={overline}
             subtitle={subtitle}
-            hasAccessoryBelow={hasStickyAccessory}
-            onHeightChange={isSticky ? handleLargeTitleHeightChange : undefined}
+            hasAccessoryBelow={layout.isSticky}
+            onHeightChange={layout.setLargeTitleHeight}
+            animatedStyle={layout.largeTitleStyle}
           />
-          {/* Reserve space for the accessory rendered in the overlay. */}
-          {isSticky && accessory != null && <HeaderAccessorySpacer height={stickyAccessoryHeight} />}
+          {layout.isSticky && <HeaderAccessorySpacer height={layout.reservedAccessoryHeight} />}
         </Portal>
       )}
-      {hasStickyAccessory && (
-        <Animated.View style={[styles.stickySurface, stickySurfaceStyle]} pointerEvents="none">
-          <HeaderSurface color={gradientColor} animatedStyle={gradientOpacityStyle} />
-        </Animated.View>
-      )}
-      {/* Share a background between the bar and a pinned accessory. */}
-      <View style={styles.barGroup}>
-        {!hasStickyAccessory && <HeaderSurface color={gradientColor} animatedStyle={gradientOpacityStyle} />}
-        <View style={styles.bar}>
-          {leading != null && <Toolbar>{leading}</Toolbar>}
-          {/* Text can never be the touch target, but custom content may be, so its
-              container passes touches through to it instead of swallowing them. */}
-          <Animated.View
-            style={[styles.titleContainer, compactTitleAnimatedStyle]}
-            pointerEvents={isCustomTitle(title) ? "box-none" : "none"}
-          >
-            {isTextTitle(title) ? (
-              <AnimatedText
-                style={styles.compactTitle}
-                maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
-              >
-                {title}
-              </AnimatedText>
-            ) : (
-              title
-            )}
-          </Animated.View>
-          {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
-        </View>
-        {accessory != null && !isSticky && (
-          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
-            {accessory}
-          </HeaderAccessory>
-        )}
-      </View>
-      {accessory != null && isSticky && (
-        <Animated.View style={[styles.stickyAccessory, stickyAccessoryStyle]}>
-          <HeaderSurface
-            color={screenBackground ?? theme.color["surface.canvas"]}
-            animatedStyle={accessorySurfaceStyle}
-            fadeHeight={HEADER_FADE_EXTENT}
-          />
-          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
-            {accessory}
-          </HeaderAccessory>
-        </Animated.View>
+      <HeaderBar
+        {...dismissProps}
+        title={title}
+        titleAlignment={titleAlignment}
+        color={color}
+        surfaceStyle={layout.surfaceStyle}
+        titleStyle={layout.compactTitleStyle}
+        leading={leadingActions !== undefined ? leadingActions : LeftToolbar}
+        trailing={trailingActions !== undefined ? trailingActions : RightToolbar}
+      />
+      {accessory != null && (
+        <HeaderAccessory
+          padding={accessoryPadding}
+          color={color}
+          surfaceStyle={layout.surfaceStyle}
+          style={layout.accessoryStyle}
+          onHeightChange={layout.setAccessoryHeight}
+        >
+          {accessory}
+        </HeaderAccessory>
       )}
     </View>
   );
 }
 
-const styles = StyleSheet.create((theme) => ({
-  stickySurface: { position: "absolute", top: 0, left: 0, right: 0 },
-  // Include the translated accessory in the parent's touchable bounds.
+const styles = StyleSheet.create(() => ({
+  // Keep the translated accessory inside the overlay's touchable bounds.
   container: (accessoryOffset: number) => ({
     position: "absolute",
     top: 0,
@@ -355,84 +108,4 @@ const styles = StyleSheet.create((theme) => ({
     zIndex: 1000,
     paddingBottom: accessoryOffset,
   }),
-  // Normal flow places the accessory directly below the bar.
-  stickyAccessory: { position: "relative" },
-  // Anchors the absolutely positioned surface over the bar and the accessory both.
-  barGroup: { position: "relative" },
-  bar: {
-    height: theme.layout.header.height,
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: theme.layout.screen.padding.x,
-    gap: theme.spacing["3"],
-    justifyContent: "space-between",
-  },
-  // A centered title is absolutely positioned, so it leaves the flex row. With
-  // no leading slot the trailing toolbar would be the only in-flow child and
-  // `space-between` would park it on the left — the auto margin pins it right.
-  trailing: {
-    justifyContent: "flex-end",
-    variants: {
-      titleAlignment: {
-        center: { marginLeft: "auto" },
-        left: {},
-      },
-    },
-  },
-  portalContent: (hasAccessoryBelow: boolean) => ({
-    gap: 2,
-    // Include the gap in the measured height used to position the accessory.
-    paddingBottom: hasAccessoryBelow ? theme.spacing["2"] : 0,
-    paddingHorizontal: theme.layout.screen.padding.x,
-  }),
-  overline: {
-    fontSize: theme.typography.variants["label-sm"].fontSize,
-    lineHeight: theme.typography.variants["label-sm"].lineHeight,
-    letterSpacing: theme.typography.variants["label-sm"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["label-sm"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-  largeTitle: {
-    fontSize: theme.typography.variants["headline-lg"].fontSize,
-    lineHeight: theme.typography.variants["headline-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["headline-lg"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["headline-lg"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-  },
-  subtitle: {
-    fontSize: theme.typography.variants["body-lg"].fontSize,
-    lineHeight: theme.typography.variants["body-lg"].lineHeight,
-    letterSpacing: theme.typography.variants["body-lg"].letterSpacing,
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.tertiary"] ?? "",
-  },
-  compactTitle: {
-    fontSize: theme.typography.variants["title-md"].fontSize,
-    lineHeight: theme.typography.variants["title-md"].lineHeight,
-    letterSpacing: theme.typography.variants["title-md"].letterSpacing,
-    fontWeight: FONT_WEIGHT_VALUE[theme.typography.variants["title-md"].fontWeight],
-    color: (theme.color as unknown as Record<string, string | undefined>)["text.primary"] ?? "",
-    variants: {
-      titleAlignment: {
-        center: { textAlign: "center" },
-        left: { textAlign: "left" },
-      },
-    },
-  },
-  titleContainer: {
-    flex: 1,
-    variants: {
-      titleAlignment: {
-        center: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          alignItems: "center",
-        },
-        left: {
-          flex: 1,
-          alignItems: "flex-start",
-        },
-      },
-    },
-  },
 }));