expo-router 7.0.0-canary-20260114-d8e19f5 → 7.0.0-canary-20260120-bb71700

package/build/layouts/stack-utils/toolbar/StackToolbarButton.d.ts

@@ -0,0 +1,144 @@
+import type { NativeStackHeaderItemButton } from '@react-navigation/native-stack';
+import type { ImageRef } from 'expo-image';
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle } from 'react-native';
+import { type StackHeaderItemSharedProps } from '../shared';
+export interface StackToolbarButtonProps {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    /**
+     * There are two ways to specify the content of the button:
+     *
+     * @example
+     * ```tsx
+     * import { Stack } from 'expo-router';
+     *
+     * export default function Page() {
+     *   return (
+     *     <>
+     *       <Stack.Toolbar placement="left">
+     *         <Stack.Toolbar.Button icon="star.fill">As text passed as children</Stack.Toolbar.Button>
+     *       </Stack.Toolbar>
+     *       <ScreenContent />
+     *     </>
+     *   );
+     * }
+     * ```
+     *
+     * @example
+     * ```tsx
+     * import { Stack } from 'expo-router';
+     *
+     * export default function Page() {
+     *   return (
+     *     <>
+     *       <Stack.Toolbar placement="left">
+     *         <Stack.Toolbar.Button>
+     *           <Stack.Toolbar.Icon sf="star.fill" />
+     *           <Stack.Toolbar.Label>As components</Stack.Toolbar.Label>
+     *           <Stack.Toolbar.Badge>3</Stack.Toolbar.Badge>
+     *         </Stack.Toolbar.Button>
+     *       </Stack.Toolbar>
+     *       <ScreenContent />
+     *     </>
+     *   );
+     * }
+     * ```
+     *
+     * > **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only. Badge is only supported in left/right placements, not in bottom (iOS toolbar limitation).
+     */
+    children?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Whether the button should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Whether to hide the shared background.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Icon to display in the button.
+     *
+     * Can be a string representing an SFSymbol or an image source.
+     */
+    icon?: StackHeaderItemSharedProps['icon'];
+    /**
+     * Image to display in the button.
+     *
+     * > **Note**: This prop is only supported in `Stack.Toolbar.Bottom`.
+     */
+    image?: ImageRef;
+    onPress?: () => void;
+    /**
+     * Whether to separate the background of this item from other header items.
+     *
+     * @default false
+     */
+    separateBackground?: boolean;
+    /**
+     * Whether the button is in a selected state
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information
+     */
+    selected?: boolean;
+    /**
+     * Style for the label of the header item.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * The tint color to apply to the button item
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.
+     */
+    tintColor?: StackHeaderItemSharedProps['tintColor'];
+    /**
+     * @default 'plain'
+     */
+    variant?: StackHeaderItemSharedProps['variant'];
+}
+/**
+ * A button used inside `Stack.Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Toolbar placement="left">
+ *           <Stack.Toolbar.Button icon="arrow.left.circle" onPress={() => alert('Left pressed')} />
+ *         </Stack.Toolbar>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="arrow.left.circle" onPress={() => alert('Left pressed')} />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare const StackToolbarButton: React.FC<StackToolbarButtonProps>;
+export declare function convertStackToolbarButtonPropsToRNHeaderItem(props: StackToolbarButtonProps): NativeStackHeaderItemButton | undefined;
+//# sourceMappingURL=StackToolbarButton.d.ts.map

package/build/layouts/stack-utils/toolbar/StackToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarButton.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AAEnB,MAAM,WAAW,uBAAuB;IACtC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwCG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAE1C;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAUhE,CAAC;AAEF,wBAAgB,4CAA4C,CAC1D,KAAK,EAAE,uBAAuB,GAC7B,2BAA2B,GAAG,SAAS,CAWzC"}

package/build/layouts/stack-utils/toolbar/StackToolbarButton.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbarButton = void 0;
+exports.convertStackToolbarButtonPropsToRNHeaderItem = convertStackToolbarButtonPropsToRNHeaderItem;
+const bottom_toolbar_native_elements_1 = require("./bottom-toolbar-native-elements");
+const context_1 = require("./context");
+const shared_1 = require("../shared");
+/**
+ * A button used inside `Stack.Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Toolbar placement="left">
+ *           <Stack.Toolbar.Button icon="arrow.left.circle" onPress={() => alert('Left pressed')} />
+ *         </Stack.Toolbar>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="arrow.left.circle" onPress={() => alert('Left pressed')} />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackToolbarButton = (props) => {
+    const placement = (0, context_1.useToolbarPlacement)();
+    if (placement === 'bottom') {
+        // TODO(@ubax): Handle image loading using useImage in a follow-up PR.
+        const icon = typeof props.icon === 'string' ? props.icon : undefined;
+        return <bottom_toolbar_native_elements_1.NativeToolbarButton {...props} icon={icon} image={props.image}/>;
+    }
+    return null;
+};
+exports.StackToolbarButton = StackToolbarButton;
+function convertStackToolbarButtonPropsToRNHeaderItem(props) {
+    if (props.hidden) {
+        return undefined;
+    }
+    return {
+        ...(0, shared_1.convertStackHeaderSharedPropsToRNSharedHeaderItem)(props),
+        type: 'button',
+        onPress: props.onPress ?? (() => { }),
+        selected: !!props.selected,
+    };
+}
+//# sourceMappingURL=StackToolbarButton.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarButton.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarButton.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;AAmKb,oGAaC;AA1KD,qFAAuE;AACvE,uCAAgD;AAChD,sCAGmB;AAsGnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACI,MAAM,kBAAkB,GAAsC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,SAAS,GAAG,IAAA,6BAAmB,GAAE,CAAC;IAExC,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;QAC3B,sEAAsE;QACtE,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QACrE,OAAO,CAAC,oDAAmB,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC;IAC5E,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAVW,QAAA,kBAAkB,sBAU7B;AAEF,SAAgB,4CAA4C,CAC1D,KAA8B;IAE9B,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,GAAG,IAAA,0DAAiD,EAAC,KAAK,CAAC;QAC3D,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;QACpC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ;KAC3B,CAAC;AACJ,CAAC","sourcesContent":["'use client';\nimport type { NativeStackHeaderItemButton } from '@react-navigation/native-stack';\nimport type { ImageRef } from 'expo-image';\nimport type { ReactNode } from 'react';\nimport type { StyleProp, TextStyle } from 'react-native';\n\nimport { NativeToolbarButton } from './bottom-toolbar-native-elements';\nimport { useToolbarPlacement } from './context';\nimport {\n  convertStackHeaderSharedPropsToRNSharedHeaderItem,\n  type StackHeaderItemSharedProps,\n} from '../shared';\n\nexport interface StackToolbarButtonProps {\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n  /**\n   * There are two ways to specify the content of the button:\n   *\n   * @example\n   * ```tsx\n   * import { Stack } from 'expo-router';\n   *\n   * export default function Page() {\n   *   return (\n   *     <>\n   *       <Stack.Toolbar placement=\"left\">\n   *         <Stack.Toolbar.Button icon=\"star.fill\">As text passed as children</Stack.Toolbar.Button>\n   *       </Stack.Toolbar>\n   *       <ScreenContent />\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @example\n   * ```tsx\n   * import { Stack } from 'expo-router';\n   *\n   * export default function Page() {\n   *   return (\n   *     <>\n   *       <Stack.Toolbar placement=\"left\">\n   *         <Stack.Toolbar.Button>\n   *           <Stack.Toolbar.Icon sf=\"star.fill\" />\n   *           <Stack.Toolbar.Label>As components</Stack.Toolbar.Label>\n   *           <Stack.Toolbar.Badge>3</Stack.Toolbar.Badge>\n   *         </Stack.Toolbar.Button>\n   *       </Stack.Toolbar>\n   *       <ScreenContent />\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * > **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only. Badge is only supported in left/right placements, not in bottom (iOS toolbar limitation).\n   */\n  children?: ReactNode;\n  disabled?: boolean;\n  /**\n   * Whether the button should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * Whether to hide the shared background.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Icon to display in the button.\n   *\n   * Can be a string representing an SFSymbol or an image source.\n   */\n  icon?: StackHeaderItemSharedProps['icon'];\n  // TODO(@ubax): Add useImage support in a follow-up PR.\n  /**\n   * Image to display in the button.\n   *\n   * > **Note**: This prop is only supported in `Stack.Toolbar.Bottom`.\n   */\n  image?: ImageRef;\n  onPress?: () => void;\n  /**\n   * Whether to separate the background of this item from other header items.\n   *\n   * @default false\n   */\n  separateBackground?: boolean;\n  /**\n   * Whether the button is in a selected state\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information\n   */\n  selected?: boolean;\n  /**\n   * Style for the label of the header item.\n   */\n  style?: StyleProp<TextStyle>;\n  /**\n   * The tint color to apply to the button item\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information.\n   */\n  tintColor?: StackHeaderItemSharedProps['tintColor'];\n  /**\n   * @default 'plain'\n   */\n  variant?: StackHeaderItemSharedProps['variant'];\n}\n\n/**\n * A button used inside `Stack.Toolbar`.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Toolbar placement=\"left\">\n *           <Stack.Toolbar.Button icon=\"arrow.left.circle\" onPress={() => alert('Left pressed')} />\n *         </Stack.Toolbar>\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar placement=\"left\">\n *         <Stack.Toolbar.Button icon=\"arrow.left.circle\" onPress={() => alert('Left pressed')} />\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackToolbarButton: React.FC<StackToolbarButtonProps> = (props) => {\n  const placement = useToolbarPlacement();\n\n  if (placement === 'bottom') {\n    // TODO(@ubax): Handle image loading using useImage in a follow-up PR.\n    const icon = typeof props.icon === 'string' ? props.icon : undefined;\n    return <NativeToolbarButton {...props} icon={icon} image={props.image} />;\n  }\n\n  return null;\n};\n\nexport function convertStackToolbarButtonPropsToRNHeaderItem(\n  props: StackToolbarButtonProps\n): NativeStackHeaderItemButton | undefined {\n  if (props.hidden) {\n    return undefined;\n  }\n\n  return {\n    ...convertStackHeaderSharedPropsToRNSharedHeaderItem(props),\n    type: 'button',\n    onPress: props.onPress ?? (() => {}),\n    selected: !!props.selected,\n  };\n}\n"]}

package/build/layouts/stack-utils/toolbar/StackToolbarClient.d.ts

@@ -0,0 +1,104 @@
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import React, { type ReactNode } from 'react';
+import { type ToolbarPlacement } from './context';
+export interface StackToolbarProps {
+    /**
+     * Child elements to compose the toolbar. Can include Stack.Toolbar.Button,
+     * Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and
+     * Stack.Toolbar.SearchBarSlot (bottom only) components.
+     */
+    children?: ReactNode;
+    /**
+     * The placement of the toolbar.
+     *
+     * - `'left'`: Renders items in the left area of the header.
+     * - `'right'`: Renders items in the right area of the header.
+     * - `'bottom'`: Renders items in the bottom toolbar (iOS only).
+     *
+     * @default 'bottom'
+     */
+    placement?: ToolbarPlacement;
+    /**
+     * When `true`, renders children as a custom component in the header area,
+     * replacing the default header layout.
+     *
+     * Only applies to `placement="left"` and `placement="right"`.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * The component used to configure the stack toolbar.
+ *
+ * - Use `placement="left"` to customize the left side of the header.
+ * - Use `placement="right"` to customize the right side of the header.
+ * - Use `placement="bottom"` (default) to show a bottom toolbar (iOS only).
+ *
+ * > **Note:** Using `Stack.Toolbar` with `placement="left"` or `placement="right"` will
+ * automatically make the header visible (`headerShown: true`), as the toolbar is rendered
+ * as part of the native header.
+ *
+ * > **Note:** `Stack.Toolbar` with `placement="bottom"` can only be used inside **page**
+ * components, not in layout components.
+ *
+ * > **Note**: Stack.Toolbar is an experimental API and may change without notice.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Toolbar placement="left">
+ *           <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
+ *         </Stack.Toolbar>
+ *         <Stack.Toolbar placement="right">
+ *           <Stack.Toolbar.Button icon="ellipsis.circle" onPress={() => alert('Right button pressed!')} />
+ *         </Stack.Toolbar>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
+ *       </Stack.Toolbar>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Spacer />
+ *         <Stack.Toolbar.Button icon="magnifyingglass" onPress={() => {}} />
+ *         <Stack.Toolbar.Spacer />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare const StackToolbar: {
+    ({ children, placement, asChild }: StackToolbarProps): React.JSX.Element;
+    Button: React.FC<import("./StackToolbarButton").StackToolbarButtonProps>;
+    Menu: React.FC<import("./StackToolbarMenu").StackToolbarMenuProps>;
+    MenuAction: React.FC<import("./StackToolbarMenu").StackToolbarMenuActionProps>;
+    SearchBarSlot: React.FC<import("./StackToolbarSearchBarSlot").StackToolbarSearchBarSlotProps>;
+    Spacer: React.FC<import("./StackToolbarSpacer").StackToolbarSpacerProps>;
+    View: React.FC<import("./StackToolbarView").StackToolbarViewProps>;
+    Label: React.FC<import("../common-primitives").StackToolbarLabelProps>;
+    Icon: React.FC<import("../common-primitives").StackToolbarIconProps>;
+    Badge: React.FC<import("../common-primitives").StackToolbarBadgeProps>;
+};
+export declare function appendStackToolbarPropsToOptions(options: NativeStackNavigationOptions, props: StackToolbarProps): NativeStackNavigationOptions;
+export default StackToolbar;
+//# sourceMappingURL=StackToolbarClient.d.ts.map

package/build/layouts/stack-utils/toolbar/StackToolbarClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarClient.d.ts","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarClient.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,KAAK,EAAE,EAA4B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkBxE,OAAO,EAAgD,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAOhG,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,eAAO,MAAM,YAAY;uCAAiD,iBAAiB;;;;;;;;;;CA4B1F,CAAC;AAiDF,wBAAgB,gCAAgC,CAC9C,OAAO,EAAE,4BAA4B,EACrC,KAAK,EAAE,iBAAiB,GACvB,4BAA4B,CAqC9B;AAYD,eAAe,YAAY,CAAC"}

package/build/layouts/stack-utils/toolbar/StackToolbarClient.js

@@ -0,0 +1,214 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackToolbar = void 0;
+exports.appendStackToolbarPropsToOptions = appendStackToolbarPropsToOptions;
+const react_1 = __importStar(require("react"));
+const react_2 = require("react");
+const StackToolbarButton_1 = require("./StackToolbarButton");
+const StackToolbarMenu_1 = require("./StackToolbarMenu");
+const StackToolbarSearchBarSlot_1 = require("./StackToolbarSearchBarSlot");
+const StackToolbarSpacer_1 = require("./StackToolbarSpacer");
+const StackToolbarView_1 = require("./StackToolbarView");
+const context_1 = require("./context");
+const NativeMenuContext_1 = require("../../../link/NativeMenuContext");
+const native_1 = require("../../../toolbar/native");
+const children_1 = require("../../../utils/children");
+const Screen_1 = require("../../../views/Screen");
+const common_primitives_1 = require("../common-primitives");
+/**
+ * The component used to configure the stack toolbar.
+ *
+ * - Use `placement="left"` to customize the left side of the header.
+ * - Use `placement="right"` to customize the right side of the header.
+ * - Use `placement="bottom"` (default) to show a bottom toolbar (iOS only).
+ *
+ * > **Note:** Using `Stack.Toolbar` with `placement="left"` or `placement="right"` will
+ * automatically make the header visible (`headerShown: true`), as the toolbar is rendered
+ * as part of the native header.
+ *
+ * > **Note:** `Stack.Toolbar` with `placement="bottom"` can only be used inside **page**
+ * components, not in layout components.
+ *
+ * > **Note**: Stack.Toolbar is an experimental API and may change without notice.
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <Stack>
+ *       <Stack.Screen name="index">
+ *         <Stack.Toolbar placement="left">
+ *           <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
+ *         </Stack.Toolbar>
+ *         <Stack.Toolbar placement="right">
+ *           <Stack.Toolbar.Button icon="ellipsis.circle" onPress={() => alert('Right button pressed!')} />
+ *         </Stack.Toolbar>
+ *       </Stack.Screen>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * import { Stack } from 'expo-router';
+ *
+ * export default function Page() {
+ *   return (
+ *     <>
+ *       <Stack.Toolbar placement="left">
+ *         <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
+ *       </Stack.Toolbar>
+ *       <Stack.Toolbar>
+ *         <Stack.Toolbar.Spacer />
+ *         <Stack.Toolbar.Button icon="magnifyingglass" onPress={() => {}} />
+ *         <Stack.Toolbar.Spacer />
+ *       </Stack.Toolbar>
+ *       <ScreenContent />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+const StackToolbar = ({ children, placement = 'bottom', asChild }) => {
+    const parentPlacement = (0, context_1.useToolbarPlacement)();
+    if (parentPlacement) {
+        throw new Error(`Stack.Toolbar cannot be nested inside another Stack.Toolbar.`);
+    }
+    if (placement === 'bottom') {
+        return (<context_1.ToolbarPlacementContext.Provider value="bottom">
+        <NativeMenuContext_1.NativeMenuContext value>
+          <native_1.RouterToolbarHost>{children}</native_1.RouterToolbarHost>
+        </NativeMenuContext_1.NativeMenuContext>
+      </context_1.ToolbarPlacementContext.Provider>);
+    }
+    // placement === 'left' or 'right'
+    // This component will only render when used inside a page
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const updatedOptions = (0, react_2.useMemo)(() => appendStackToolbarPropsToOptions({}, { children, placement, asChild }), [children, placement, asChild]);
+    return (<context_1.ToolbarPlacementContext.Provider value={placement}>
+      <Screen_1.Screen options={updatedOptions}/>
+    </context_1.ToolbarPlacementContext.Provider>);
+};
+exports.StackToolbar = StackToolbar;
+function convertToolbarChildrenToUnstableItems(children, side) {
+    const allChildren = react_1.default.Children.toArray(children);
+    const actions = allChildren.filter((child) => (0, children_1.isChildOfType)(child, StackToolbarButton_1.StackToolbarButton) ||
+        (0, children_1.isChildOfType)(child, StackToolbarMenu_1.StackToolbarMenu) ||
+        (0, children_1.isChildOfType)(child, StackToolbarSpacer_1.StackToolbarSpacer) ||
+        (0, children_1.isChildOfType)(child, StackToolbarView_1.StackToolbarView));
+    if (actions.length !== allChildren.length && process.env.NODE_ENV !== 'production') {
+        const otherElements = allChildren
+            .filter((child) => !actions.some((action) => action === child))
+            .map((e) => {
+            if ((0, react_1.isValidElement)(e)) {
+                if (e.type === react_1.Fragment) {
+                    return '<Fragment>';
+                }
+                else {
+                    return e.type?.name ?? e.type;
+                }
+            }
+            return String(e);
+        });
+        console.warn(`Stack.Toolbar with placement="${side}" only accepts <Stack.Toolbar.Button>, <Stack.Toolbar.Menu>, <Stack.Toolbar.View>, and <Stack.Toolbar.Spacer> as children. Found invalid children: ${otherElements.join(', ')}`);
+    }
+    return () => actions
+        .map((action) => {
+        if ((0, children_1.isChildOfType)(action, StackToolbarButton_1.StackToolbarButton)) {
+            return (0, StackToolbarButton_1.convertStackToolbarButtonPropsToRNHeaderItem)(action.props);
+        }
+        else if ((0, children_1.isChildOfType)(action, StackToolbarMenu_1.StackToolbarMenu)) {
+            return (0, StackToolbarMenu_1.convertStackToolbarMenuPropsToRNHeaderItem)(action.props);
+        }
+        else if ((0, children_1.isChildOfType)(action, StackToolbarSpacer_1.StackToolbarSpacer)) {
+            return (0, StackToolbarSpacer_1.convertStackToolbarSpacerPropsToRNHeaderItem)(action.props);
+        }
+        return (0, StackToolbarView_1.convertStackToolbarViewPropsToRNHeaderItem)(action.props);
+    })
+        .filter((item) => !!item);
+}
+function appendStackToolbarPropsToOptions(options, props) {
+    const { children, placement = 'bottom', asChild } = props;
+    if (placement === 'bottom') {
+        // Bottom toolbar doesn't modify navigation options
+        return options;
+    }
+    if (asChild) {
+        if (placement === 'left') {
+            return {
+                ...options,
+                headerShown: true,
+                headerLeft: () => children,
+            };
+        }
+        else {
+            return {
+                ...options,
+                headerShown: true,
+                headerRight: () => children,
+            };
+        }
+    }
+    if (placement === 'left') {
+        return {
+            ...options,
+            headerShown: true,
+            unstable_headerLeftItems: convertToolbarChildrenToUnstableItems(children, 'left'),
+        };
+    }
+    return {
+        ...options,
+        headerShown: true,
+        unstable_headerRightItems: convertToolbarChildrenToUnstableItems(children, 'right'),
+    };
+}
+exports.StackToolbar.Button = StackToolbarButton_1.StackToolbarButton;
+exports.StackToolbar.Menu = StackToolbarMenu_1.StackToolbarMenu;
+exports.StackToolbar.MenuAction = StackToolbarMenu_1.StackToolbarMenuAction;
+exports.StackToolbar.SearchBarSlot = StackToolbarSearchBarSlot_1.StackToolbarSearchBarSlot;
+exports.StackToolbar.Spacer = StackToolbarSpacer_1.StackToolbarSpacer;
+exports.StackToolbar.View = StackToolbarView_1.StackToolbarView;
+exports.StackToolbar.Label = common_primitives_1.StackToolbarLabel;
+exports.StackToolbar.Icon = common_primitives_1.StackToolbarIcon;
+exports.StackToolbar.Badge = common_primitives_1.StackToolbarBadge;
+exports.default = exports.StackToolbar;
+//# sourceMappingURL=StackToolbarClient.js.map

package/build/layouts/stack-utils/toolbar/StackToolbarClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackToolbarClient.js","sourceRoot":"","sources":["../../../../src/layouts/stack-utils/toolbar/StackToolbarClient.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack';\nimport React, { Fragment, isValidElement, type ReactNode } from 'react';\nimport { useMemo } from 'react';\n\nimport {\n  convertStackToolbarButtonPropsToRNHeaderItem,\n  StackToolbarButton,\n} from './StackToolbarButton';\nimport {\n  convertStackToolbarMenuPropsToRNHeaderItem,\n  StackToolbarMenu,\n  StackToolbarMenuAction,\n} from './StackToolbarMenu';\nimport { StackToolbarSearchBarSlot } from './StackToolbarSearchBarSlot';\nimport {\n  convertStackToolbarSpacerPropsToRNHeaderItem,\n  StackToolbarSpacer,\n} from './StackToolbarSpacer';\nimport { convertStackToolbarViewPropsToRNHeaderItem, StackToolbarView } from './StackToolbarView';\nimport { ToolbarPlacementContext, useToolbarPlacement, type ToolbarPlacement } from './context';\nimport { NativeMenuContext } from '../../../link/NativeMenuContext';\nimport { RouterToolbarHost } from '../../../toolbar/native';\nimport { isChildOfType } from '../../../utils/children';\nimport { Screen } from '../../../views/Screen';\nimport { StackToolbarBadge, StackToolbarIcon, StackToolbarLabel } from '../common-primitives';\n\nexport interface StackToolbarProps {\n  /**\n   * Child elements to compose the toolbar. Can include Stack.Toolbar.Button,\n   * Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and\n   * Stack.Toolbar.SearchBarSlot (bottom only) components.\n   */\n  children?: ReactNode;\n  /**\n   * The placement of the toolbar.\n   *\n   * - `'left'`: Renders items in the left area of the header.\n   * - `'right'`: Renders items in the right area of the header.\n   * - `'bottom'`: Renders items in the bottom toolbar (iOS only).\n   *\n   * @default 'bottom'\n   */\n  placement?: ToolbarPlacement;\n  /**\n   * When `true`, renders children as a custom component in the header area,\n   * replacing the default header layout.\n   *\n   * Only applies to `placement=\"left\"` and `placement=\"right\"`.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * The component used to configure the stack toolbar.\n *\n * - Use `placement=\"left\"` to customize the left side of the header.\n * - Use `placement=\"right\"` to customize the right side of the header.\n * - Use `placement=\"bottom\"` (default) to show a bottom toolbar (iOS only).\n *\n * > **Note:** Using `Stack.Toolbar` with `placement=\"left\"` or `placement=\"right\"` will\n * automatically make the header visible (`headerShown: true`), as the toolbar is rendered\n * as part of the native header.\n *\n * > **Note:** `Stack.Toolbar` with `placement=\"bottom\"` can only be used inside **page**\n * components, not in layout components.\n *\n * > **Note**: Stack.Toolbar is an experimental API and may change without notice.\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Layout() {\n *   return (\n *     <Stack>\n *       <Stack.Screen name=\"index\">\n *         <Stack.Toolbar placement=\"left\">\n *           <Stack.Toolbar.Button icon=\"sidebar.left\" onPress={() => alert('Left button pressed!')} />\n *         </Stack.Toolbar>\n *         <Stack.Toolbar placement=\"right\">\n *           <Stack.Toolbar.Button icon=\"ellipsis.circle\" onPress={() => alert('Right button pressed!')} />\n *         </Stack.Toolbar>\n *       </Stack.Screen>\n *     </Stack>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * import { Stack } from 'expo-router';\n *\n * export default function Page() {\n *   return (\n *     <>\n *       <Stack.Toolbar placement=\"left\">\n *         <Stack.Toolbar.Button icon=\"sidebar.left\" onPress={() => alert('Left button pressed!')} />\n *       </Stack.Toolbar>\n *       <Stack.Toolbar>\n *         <Stack.Toolbar.Spacer />\n *         <Stack.Toolbar.Button icon=\"magnifyingglass\" onPress={() => {}} />\n *         <Stack.Toolbar.Spacer />\n *       </Stack.Toolbar>\n *       <ScreenContent />\n *     </>\n *   );\n * }\n * ```\n *\n * @platform ios\n */\nexport const StackToolbar = ({ children, placement = 'bottom', asChild }: StackToolbarProps) => {\n  const parentPlacement = useToolbarPlacement();\n  if (parentPlacement) {\n    throw new Error(`Stack.Toolbar cannot be nested inside another Stack.Toolbar.`);\n  }\n\n  if (placement === 'bottom') {\n    return (\n      <ToolbarPlacementContext.Provider value=\"bottom\">\n        <NativeMenuContext value>\n          <RouterToolbarHost>{children}</RouterToolbarHost>\n        </NativeMenuContext>\n      </ToolbarPlacementContext.Provider>\n    );\n  }\n\n  // placement === 'left' or 'right'\n  // This component will only render when used inside a page\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const updatedOptions = useMemo(\n    () => appendStackToolbarPropsToOptions({}, { children, placement, asChild }),\n    [children, placement, asChild]\n  );\n  return (\n    <ToolbarPlacementContext.Provider value={placement}>\n      <Screen options={updatedOptions} />\n    </ToolbarPlacementContext.Provider>\n  );\n};\n\nfunction convertToolbarChildrenToUnstableItems(\n  children: React.ReactNode,\n  side: 'left' | 'right'\n):\n  | NativeStackNavigationOptions['unstable_headerRightItems']\n  | NativeStackNavigationOptions['unstable_headerLeftItems'] {\n  const allChildren = React.Children.toArray(children);\n  const actions = allChildren.filter(\n    (child) =>\n      isChildOfType(child, StackToolbarButton) ||\n      isChildOfType(child, StackToolbarMenu) ||\n      isChildOfType(child, StackToolbarSpacer) ||\n      isChildOfType(child, StackToolbarView)\n  );\n  if (actions.length !== allChildren.length && process.env.NODE_ENV !== 'production') {\n    const otherElements = allChildren\n      .filter((child) => !actions.some((action) => action === child))\n      .map((e) => {\n        if (isValidElement(e)) {\n          if (e.type === Fragment) {\n            return '<Fragment>';\n          } else {\n            return (e.type as { name: string })?.name ?? e.type;\n          }\n        }\n\n        return String(e);\n      });\n    console.warn(\n      `Stack.Toolbar with placement=\"${side}\" only accepts <Stack.Toolbar.Button>, <Stack.Toolbar.Menu>, <Stack.Toolbar.View>, and <Stack.Toolbar.Spacer> as children. Found invalid children: ${otherElements.join(', ')}`\n    );\n  }\n  return () =>\n    actions\n      .map((action) => {\n        if (isChildOfType(action, StackToolbarButton)) {\n          return convertStackToolbarButtonPropsToRNHeaderItem(action.props);\n        } else if (isChildOfType(action, StackToolbarMenu)) {\n          return convertStackToolbarMenuPropsToRNHeaderItem(action.props);\n        } else if (isChildOfType(action, StackToolbarSpacer)) {\n          return convertStackToolbarSpacerPropsToRNHeaderItem(action.props);\n        }\n        return convertStackToolbarViewPropsToRNHeaderItem(action.props);\n      })\n      .filter((item) => !!item);\n}\n\nexport function appendStackToolbarPropsToOptions(\n  options: NativeStackNavigationOptions,\n  props: StackToolbarProps\n): NativeStackNavigationOptions {\n  const { children, placement = 'bottom', asChild } = props;\n\n  if (placement === 'bottom') {\n    // Bottom toolbar doesn't modify navigation options\n    return options;\n  }\n\n  if (asChild) {\n    if (placement === 'left') {\n      return {\n        ...options,\n        headerShown: true,\n        headerLeft: () => children,\n      };\n    } else {\n      return {\n        ...options,\n        headerShown: true,\n        headerRight: () => children,\n      };\n    }\n  }\n\n  if (placement === 'left') {\n    return {\n      ...options,\n      headerShown: true,\n      unstable_headerLeftItems: convertToolbarChildrenToUnstableItems(children, 'left'),\n    };\n  }\n\n  return {\n    ...options,\n    headerShown: true,\n    unstable_headerRightItems: convertToolbarChildrenToUnstableItems(children, 'right'),\n  };\n}\n\nStackToolbar.Button = StackToolbarButton;\nStackToolbar.Menu = StackToolbarMenu;\nStackToolbar.MenuAction = StackToolbarMenuAction;\nStackToolbar.SearchBarSlot = StackToolbarSearchBarSlot;\nStackToolbar.Spacer = StackToolbarSpacer;\nStackToolbar.View = StackToolbarView;\nStackToolbar.Label = StackToolbarLabel;\nStackToolbar.Icon = StackToolbarIcon;\nStackToolbar.Badge = StackToolbarBadge;\n\nexport default StackToolbar;\n"]}