@studio-piot/native-ui 0.2.5 → 0.16.0

package/src/components/HeaderButton/HeaderCapsule.tsx

@@ -0,0 +1,63 @@
+import { Platform, Pressable, StyleSheet, Text } from "react-native";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  HEADER_BUTTON_SIZE,
+  HEADER_CAPSULE_FONT_SIZE,
+  HEADER_CAPSULE_ICON_SIZE,
+  HEADER_HIT_SLOP,
+  headerFallbackStyle,
+  supportsLiquidGlass,
+} from "./headerButtonLayout";
+import { HEADER_BUTTON_THEME_ROLES } from "./headerButtonThemeRoles";
+import type { HeaderCapsuleProps } from "./types";
+
+const GLASS = supportsLiquidGlass(Platform.OS, Platform.Version);
+
+/** Header button with a label (and optional icon). Wider than tall, so iOS 26+ draws a glass pill. */
+export function HeaderCapsule({
+  icon,
+  label,
+  onPress,
+  iconSize = HEADER_CAPSULE_ICON_SIZE,
+  fontSize = HEADER_CAPSULE_FONT_SIZE,
+  disabled = false,
+  color: colorProp,
+  fallbackBackgroundColor,
+  hitSlop = HEADER_HIT_SLOP,
+  style,
+}: HeaderCapsuleProps) {
+  const color = useResolvedFieldColor(colorProp, HEADER_BUTTON_THEME_ROLES.color);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => [
+        styles.capsule,
+        headerFallbackStyle(GLASS, fallbackBackgroundColor),
+        { opacity: disabled ? 0.4 : pressed ? 0.5 : 1 },
+        style,
+      ]}
+    >
+      {icon?.({ color, size: iconSize })}
+      <Text style={[styles.label, { color, fontSize }]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  capsule: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    height: HEADER_BUTTON_SIZE,
+    paddingHorizontal: 12,
+  },
+  label: {
+    fontWeight: "600",
+  },
+});

package/src/components/HeaderButton/HeaderGroup.tsx

@@ -0,0 +1,36 @@
+import { Platform, StyleSheet, View } from "react-native";
+import {
+  HEADER_GROUP_GAP,
+  headerFallbackStyle,
+  supportsLiquidGlass,
+} from "./headerButtonLayout";
+import type { HeaderGroupProps } from "./types";
+
+const GLASS = supportsLiquidGlass(Platform.OS, Platform.Version);
+
+/** Row of header buttons that share one glass capsule on iOS 26+. */
+export function HeaderGroup({
+  children,
+  fallbackBackgroundColor,
+  style,
+}: HeaderGroupProps) {
+  return (
+    <View
+      style={[
+        styles.row,
+        headerFallbackStyle(GLASS, fallbackBackgroundColor),
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: HEADER_GROUP_GAP,
+  },
+});

package/src/components/HeaderButton/HeaderIcon.tsx

@@ -0,0 +1,56 @@
+import { Platform, Pressable, StyleSheet } from "react-native";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import {
+  HEADER_BUTTON_SIZE,
+  HEADER_HIT_SLOP,
+  HEADER_ICON_SIZE,
+  headerFallbackStyle,
+  supportsLiquidGlass,
+} from "./headerButtonLayout";
+import { HEADER_BUTTON_THEME_ROLES } from "./headerButtonThemeRoles";
+import type { HeaderIconProps } from "./types";
+
+const GLASS = supportsLiquidGlass(Platform.OS, Platform.Version);
+
+/** Icon-only header button. A 36×36 box becomes a glass circle on iOS 26+. */
+export function HeaderIcon({
+  icon,
+  label,
+  onPress,
+  size = HEADER_ICON_SIZE,
+  disabled = false,
+  color: colorProp,
+  fallbackBackgroundColor,
+  hitSlop = HEADER_HIT_SLOP,
+  style,
+}: HeaderIconProps) {
+  const color = useResolvedFieldColor(colorProp, HEADER_BUTTON_THEME_ROLES.color);
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{ disabled }}
+      style={({ pressed }) => [
+        styles.box,
+        headerFallbackStyle(GLASS, fallbackBackgroundColor),
+        { opacity: disabled ? 0.4 : pressed ? 0.5 : 1 },
+        style,
+      ]}
+    >
+      {icon({ color, size })}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    width: HEADER_BUTTON_SIZE,
+    height: HEADER_BUTTON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/components/HeaderButton/headerButtonLayout.test.ts

@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  HEADER_BUTTON_SIZE,
+  headerFallbackStyle,
+  supportsLiquidGlass,
+} from "./headerButtonLayout.ts";
+
+describe("supportsLiquidGlass", () => {
+  it("is true on iOS 26 and later", () => {
+    assert.equal(supportsLiquidGlass("ios", "26.0"), true);
+    assert.equal(supportsLiquidGlass("ios", "26.1.2"), true);
+    assert.equal(supportsLiquidGlass("ios", "27"), true);
+  });
+
+  it("is false on iOS 18 and earlier", () => {
+    assert.equal(supportsLiquidGlass("ios", "18.6"), false);
+    assert.equal(supportsLiquidGlass("ios", "17.0"), false);
+  });
+
+  it("is false on Android and web whatever the version", () => {
+    assert.equal(supportsLiquidGlass("android", 35), false);
+    assert.equal(supportsLiquidGlass("web", "26"), false);
+  });
+
+  it("is false when the version cannot be parsed", () => {
+    assert.equal(supportsLiquidGlass("ios", ""), false);
+    assert.equal(supportsLiquidGlass("ios", "unknown"), false);
+  });
+});
+
+describe("headerFallbackStyle", () => {
+  it("adds nothing on glass platforms, even with a colour", () => {
+    assert.equal(headerFallbackStyle(true, "#eee"), undefined);
+  });
+
+  it("adds nothing on other platforms without a colour", () => {
+    assert.equal(headerFallbackStyle(false, undefined), undefined);
+  });
+
+  it("draws a pill background on other platforms when a colour is passed", () => {
+    assert.deepEqual(headerFallbackStyle(false, "#eee"), {
+      backgroundColor: "#eee",
+      borderRadius: HEADER_BUTTON_SIZE / 2,
+    });
+  });
+});

package/src/components/HeaderButton/headerButtonLayout.ts

@@ -0,0 +1,36 @@
+/** Height of every header button; a square of this size becomes a glass circle. */
+export const HEADER_BUTTON_SIZE = 36;
+export const HEADER_ICON_SIZE = 17;
+export const HEADER_CAPSULE_ICON_SIZE = 15;
+export const HEADER_CAPSULE_FONT_SIZE = 16;
+export const HEADER_GROUP_GAP = 4;
+export const HEADER_HIT_SLOP = 6;
+
+/**
+ * Liquid Glass bar button backgrounds exist on iOS 26 and later only.
+ * Pass `Platform.OS` and `Platform.Version`. Pure so it can be unit-tested.
+ */
+export function supportsLiquidGlass(
+  os: string,
+  version: string | number,
+): boolean {
+  if (os !== "ios") {
+    return false;
+  }
+  const major = Number.parseInt(String(version), 10);
+  return Number.isFinite(major) && major >= 26;
+}
+
+/**
+ * Background drawn on platforms without glass. On iOS 26+ the system draws
+ * the glass, so a background there would give two shapes, one inside the other.
+ */
+export function headerFallbackStyle(
+  glass: boolean,
+  backgroundColor: string | undefined,
+): { backgroundColor: string; borderRadius: number } | undefined {
+  if (glass || backgroundColor == null) {
+    return undefined;
+  }
+  return { backgroundColor, borderRadius: HEADER_BUTTON_SIZE / 2 };
+}

package/src/components/HeaderButton/headerButtonThemeRoles.test.ts

@@ -0,0 +1,9 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { HEADER_BUTTON_THEME_ROLES } from "./headerButtonThemeRoles.ts";
+
+describe("HEADER_BUTTON_THEME_ROLES", () => {
+  it("maps the colour prop to a dedicated header button role", () => {
+    assert.equal(HEADER_BUTTON_THEME_ROLES.color, "headerButton");
+  });
+});

package/src/components/HeaderButton/headerButtonThemeRoles.ts

@@ -0,0 +1,5 @@
+export const HEADER_BUTTON_THEME_ROLES = {
+  color: "headerButton",
+} as const;
+
+export type HeaderButtonThemeColorProp = keyof typeof HEADER_BUTTON_THEME_ROLES;

package/src/components/HeaderButton/index.ts

@@ -0,0 +1,14 @@
+export { HeaderCapsule } from "./HeaderCapsule";
+export { HeaderGroup } from "./HeaderGroup";
+export { HeaderIcon } from "./HeaderIcon";
+export { supportsLiquidGlass } from "./headerButtonLayout";
+export {
+  HEADER_BUTTON_THEME_ROLES,
+  type HeaderButtonThemeColorProp,
+} from "./headerButtonThemeRoles";
+export type {
+  HeaderButtonIcon,
+  HeaderCapsuleProps,
+  HeaderGroupProps,
+  HeaderIconProps,
+} from "./types";

package/src/components/HeaderButton/types.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+
+/** Renders the icon with the resolved tint colour and size, e.g. an expo-symbols `SymbolView`. */
+export type HeaderButtonIcon = (props: { color: string; size: number }) => ReactNode;
+
+type HeaderButtonSharedProps = {
+  onPress: () => void;
+  disabled?: boolean;
+  /** Icon and label colour. Defaults to the `headerButton` theme role. */
+  color?: string;
+  /** Background on Android and iOS 18 and earlier only. iOS 26+ draws glass instead. */
+  fallbackBackgroundColor?: string;
+  hitSlop?: number;
+  style?: StyleProp<ViewStyle>;
+};
+
+export type HeaderIconProps = HeaderButtonSharedProps & {
+  icon: HeaderButtonIcon;
+  /** Accessibility label. Required: icon-only buttons have no text for VoiceOver. */
+  label: string;
+  /** Icon box size. Default 17 (range 15–20). */
+  size?: number;
+};
+
+export type HeaderCapsuleProps = HeaderButtonSharedProps & {
+  icon?: HeaderButtonIcon;
+  label: string;
+  /** Default 15, close to the height of the 16pt label. */
+  iconSize?: number;
+  /** Default 16. */
+  fontSize?: number;
+};
+
+export type HeaderGroupProps = {
+  children: ReactNode;
+  /** Shared background on Android and iOS 18 and earlier only. */
+  fallbackBackgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+};

package/src/components/HeaderWash/HeaderWash.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet, View } from "react-native";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { FORM_THEME_ROLES } from "../Form/formThemeRoles";
+import { headerWashGradient } from "./headerWashGradient";
+
+/**
+ * Background for a transparent native header: a wash from `color` to clear.
+ * Use it as the stack's `headerBackground` with `headerTransparent: true`.
+ * The stack sizes it to the header and draws it above the screen content,
+ * so content fades as it scrolls under the bar.
+ */
+export function HeaderWash({ color: colorProp }: { color?: string }) {
+  const color = useResolvedFieldColor(colorProp, FORM_THEME_ROLES.backgroundColor);
+  return (
+    <View
+      pointerEvents="none"
+      style={[StyleSheet.absoluteFill, { experimental_backgroundImage: headerWashGradient(color) }]}
+    />
+  );
+}

package/src/components/HeaderWash/headerWashGradient.test.ts

@@ -0,0 +1,22 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { headerWashGradient, withAlpha } from "./headerWashGradient.ts";
+
+describe("headerWashGradient", () => {
+  it("runs from the colour, nearly opaque, to clear at the header's bottom", () => {
+    assert.equal(
+      headerWashGradient("#F9FAFB"),
+      "linear-gradient(to bottom, rgba(249, 250, 251, 0.98) 0%, rgba(249, 250, 251, 0.92) 55%, rgba(249, 250, 251, 0) 100%)",
+    );
+  });
+});
+
+describe("withAlpha", () => {
+  it("converts a hex colour to rgba", () => {
+    assert.equal(withAlpha("#F9FAFB", 0.98), "rgba(249, 250, 251, 0.98)");
+  });
+
+  it("expands three-digit hex", () => {
+    assert.equal(withAlpha("#abc", 0.5), "rgba(170, 187, 204, 0.5)");
+  });
+});

package/src/components/{Form/withAlpha.ts → HeaderWash/headerWashGradient.ts}

@@ -7,3 +7,12 @@ export function withAlpha(hex: string, alpha: number): string {
   const b = Number.parseInt(full.slice(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
+
+/**
+ * The header wash: `color` nearly opaque at the top of the header, fading to
+ * clear at its bottom, so content fades out as it scrolls under the bar.
+ * Pure so it can be unit-tested.
+ */
+export function headerWashGradient(color: string): string {
+  return `linear-gradient(to bottom, ${withAlpha(color, 0.98)} 0%, ${withAlpha(color, 0.92)} 55%, ${withAlpha(color, 0)} 100%)`;
+}

package/src/components/HeaderWash/index.ts

@@ -0,0 +1 @@
+export { HeaderWash } from "./HeaderWash";

package/src/components/Page/Page.tsx

@@ -0,0 +1,80 @@
+import { Platform, ScrollView, StyleSheet } from "react-native";
+import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
+import { supportsLiquidGlass } from "../HeaderButton/headerButtonLayout";
+import { TabAccessoryButton } from "../TabAccessoryButton";
+import { tabAccessoryScreenClearance } from "../TabAccessoryButton/tabAccessoryLayout";
+import { useThemeSpacing } from "../../theme/useThemeSpacing";
+import { PageInsetContext } from "./pageContext";
+import { pageContentInset, pagePaddingTop, pageSideInset } from "./pageInsets";
+import { PAGE_THEME_ROLES } from "./pageThemeRoles";
+import type { PageProps } from "./types";
+
+const GLASS = supportsLiquidGlass(Platform.OS, Platform.Version);
+
+/**
+ * Scrolling screen body for a native stack inside native tabs. iOS insets
+ * the content for the header (including the large title) and the tab bar,
+ * so it starts just below the header, scrolls behind it, and clears the
+ * tabs. The title belongs to the header: set it in the stack options.
+ *
+ * The ScrollView must be a direct child of the screen: react-native-screens
+ * only links the header (large title, insets) to a direct child, so there is
+ * no wrapper view. Render `Page` as the screen's root element.
+ */
+export function Page({
+  children,
+  tabAccessory,
+  backgroundColor: backgroundColorProp,
+  padded = true,
+  contentUnderHeader,
+  contentInset,
+  contentContainerStyle,
+  style,
+  ...scrollProps
+}: PageProps) {
+  const backgroundColor = useResolvedFieldColor(
+    backgroundColorProp,
+    PAGE_THEME_ROLES.backgroundColor,
+  );
+  const spacing = useThemeSpacing();
+  const sideInset = pageSideInset(padded, spacing.screen);
+  const paddingBottom =
+    (padded ? spacing.pageBottom : 0) +
+    (tabAccessory ? tabAccessoryScreenClearance(GLASS, spacing.screen) : 0);
+
+  return (
+    <>
+      <ScrollView
+        {...scrollProps}
+        contentInsetAdjustmentBehavior="automatic"
+        contentInset={pageContentInset(Platform.OS, contentUnderHeader, contentInset)}
+        style={[styles.screen, { backgroundColor }, style]}
+        contentContainerStyle={[
+          { paddingHorizontal: sideInset },
+          {
+            paddingTop: pagePaddingTop({
+              padded,
+              underHeader: contentUnderHeader != null,
+              pageTop: spacing.pageTop,
+            }),
+          },
+          { paddingBottom },
+          contentContainerStyle,
+        ]}
+      >
+        <PageInsetContext.Provider value={sideInset}>
+          {children}
+        </PageInsetContext.Provider>
+      </ScrollView>
+      {tabAccessory ? (
+        <TabAccessoryButton placement="screen" {...tabAccessory} />
+      ) : null}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+});

package/src/components/Page/PageBleed.tsx

@@ -0,0 +1,14 @@
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import type { ReactNode } from "react";
+import { usePageSideInset } from "./pageContext";
+import { pageBleedStyle } from "./pageInsets";
+
+export type PageBleedProps = {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+/** Takes one section of a `Page` out to the screen edges, e.g. a full-width image or map. */
+export function PageBleed({ children, style }: PageBleedProps) {
+  return <View style={[pageBleedStyle(usePageSideInset()), style]}>{children}</View>;
+}

package/src/components/Page/index.ts

@@ -0,0 +1,4 @@
+export { Page } from "./Page";
+export { PageBleed, type PageBleedProps } from "./PageBleed";
+export { PAGE_THEME_ROLES, type PageThemeColorProp } from "./pageThemeRoles";
+export type { PageProps, PageTabAccessory } from "./types";

package/src/components/Page/pageContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+
+/** Side inset of the nearest `Page` content, for `PageBleed`. */
+export const PageInsetContext = createContext(0);
+
+export function usePageSideInset(): number {
+  return useContext(PageInsetContext);
+}

package/src/components/Page/pageInsets.test.ts

@@ -0,0 +1,73 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  pageBleedStyle,
+  pageContentInset,
+  pagePaddingTop,
+  pageSideInset,
+} from "./pageInsets.ts";
+
+describe("pageSideInset", () => {
+  it("uses the theme screen spacing when padded", () => {
+    assert.equal(pageSideInset(true, 16), 16);
+    assert.equal(pageSideInset(true, 20), 20);
+  });
+
+  it("is zero when the page is not padded", () => {
+    assert.equal(pageSideInset(false, 20), 0);
+  });
+});
+
+describe("pageBleedStyle", () => {
+  it("cancels the page side inset exactly", () => {
+    assert.deepEqual(pageBleedStyle(20), { marginHorizontal: -20 });
+  });
+
+  it("adds no margin when there is no inset", () => {
+    assert.deepEqual(pageBleedStyle(0), { marginHorizontal: 0 });
+  });
+});
+
+describe("pageContentInset", () => {
+  it("leaves the inset alone without contentUnderHeader", () => {
+    assert.equal(pageContentInset("ios", undefined, undefined), undefined);
+    const own = { top: 4, bottom: 8 };
+    assert.equal(pageContentInset("ios", undefined, own), own);
+  });
+
+  it("cancels only the header clearance on iOS", () => {
+    assert.deepEqual(pageContentInset("ios", 96, undefined), {
+      top: -96,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+  });
+
+  it("adds to an inset the app already set", () => {
+    assert.deepEqual(pageContentInset("ios", 96, { top: 10, bottom: 20 }), {
+      top: -86,
+      left: 0,
+      bottom: 20,
+      right: 0,
+    });
+  });
+
+  it("does nothing on Android, where the header never adds an inset", () => {
+    assert.equal(pageContentInset("android", 96, undefined), undefined);
+  });
+});
+
+describe("pagePaddingTop", () => {
+  it("uses the theme gap under the header", () => {
+    assert.equal(pagePaddingTop({ padded: true, underHeader: false, pageTop: 16 }), 16);
+  });
+
+  it("starts at the very top when content goes under the header", () => {
+    assert.equal(pagePaddingTop({ padded: true, underHeader: true, pageTop: 16 }), 0);
+  });
+
+  it("is zero when not padded", () => {
+    assert.equal(pagePaddingTop({ padded: false, underHeader: false, pageTop: 16 }), 0);
+  });
+});

package/src/components/Page/pageInsets.ts

@@ -0,0 +1,52 @@
+/** Side padding the page content actually has. Pure so it can be unit-tested. */
+export function pageSideInset(padded: boolean, screen: number): number {
+  return padded ? screen : 0;
+}
+
+/** Pulls a section out to the screen edges by cancelling the page side inset. */
+export function pageBleedStyle(sideInset: number): { marginHorizontal: number } {
+  // `0 - 0` keeps +0 rather than -0, so equality checks stay simple.
+  return { marginHorizontal: sideInset === 0 ? 0 : -sideInset };
+}
+
+export type PageInsets = {
+  top?: number;
+  left?: number;
+  bottom?: number;
+  right?: number;
+};
+
+/**
+ * iOS adds `contentInset` on top of the automatic inset, so a negative top
+ * equal to the header height cancels only the header clearance; the tab
+ * bar clearance stays automatic. Android has no automatic inset, so there
+ * is nothing to cancel. Pure so it can be unit-tested.
+ */
+export function pageContentInset(
+  os: string,
+  contentUnderHeader: number | undefined,
+  contentInset: PageInsets | undefined,
+): PageInsets | undefined {
+  if (contentUnderHeader == null || os !== "ios") {
+    return contentInset;
+  }
+  return {
+    top: (contentInset?.top ?? 0) - contentUnderHeader,
+    left: contentInset?.left ?? 0,
+    bottom: contentInset?.bottom ?? 0,
+    right: contentInset?.right ?? 0,
+  };
+}
+
+/** Gap above the first item. None when the content starts under the header. */
+export function pagePaddingTop({
+  padded,
+  underHeader,
+  pageTop,
+}: {
+  padded: boolean;
+  underHeader: boolean;
+  pageTop: number;
+}): number {
+  return padded && !underHeader ? pageTop : 0;
+}

package/src/components/Page/pageThemeRoles.test.ts

@@ -0,0 +1,9 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { PAGE_THEME_ROLES } from "./pageThemeRoles.ts";
+
+describe("PAGE_THEME_ROLES", () => {
+  it("maps the background to a page-prefixed role, not the app's own name", () => {
+    assert.equal(PAGE_THEME_ROLES.backgroundColor, "pageBackground");
+  });
+});

package/src/components/Page/pageThemeRoles.ts

@@ -0,0 +1,5 @@
+export const PAGE_THEME_ROLES = {
+  backgroundColor: "pageBackground",
+} as const;
+
+export type PageThemeColorProp = keyof typeof PAGE_THEME_ROLES;

package/src/components/Page/types.ts

@@ -0,0 +1,26 @@
+import type { ReactNode, Ref } from "react";
+import type { ScrollView, ScrollViewProps } from "react-native";
+import type { TabAccessoryButtonProps } from "../TabAccessoryButton/types";
+
+/** The in-screen `TabAccessoryButton` (Android and iOS 18 and earlier). */
+export type PageTabAccessory = Omit<
+  TabAccessoryButtonProps,
+  "placement" | "variant" | "color"
+>;
+
+export type PageProps = Omit<ScrollViewProps, "contentInsetAdjustmentBehavior"> & {
+  children?: ReactNode;
+  ref?: Ref<ScrollView>;
+  /** Renders the floating fallback pill and adds bottom room for it. */
+  tabAccessory?: PageTabAccessory;
+  /** Screen fill. Defaults to theme role `background`. */
+  backgroundColor?: string;
+  /** Screen-edge, top and bottom padding on the content. Default `true`. */
+  padded?: boolean;
+  /**
+   * Start the content at the very top, behind the header, e.g. for a hero
+   * image. Pass the header height: `useHeaderHeight()` from
+   * `expo-router/react-navigation`. The tab bar clearance is kept.
+   */
+  contentUnderHeader?: number;
+};