@ng-native/expo 0.6.0 → 0.8.0

package/dist/expo-ui-components.d.ts

@@ -103,7 +103,8 @@ export declare class UiContextMenu {
 }
 /**
  * A SwiftUI `Button`, as a menu item or on its own, or Compose's on Android, which draws `label` as
- * text inside it. `systemImage` and `role` are SwiftUI's alone.
+ * text inside it. `systemImage` and `role` are SwiftUI's alone. A `close` button with no label and
+ * no content is the system's own close button, from iOS 26.
  */
 export declare class UiButton {
     protected readonly nativeView: true;
@@ -111,7 +112,7 @@ export declare class UiButton {
     readonly label: import("@angular/core").InputSignal<string | undefined>;
     /** An SF Symbol name. */
     readonly systemImage: import("@angular/core").InputSignal<string | undefined>;
-    readonly role: import("@angular/core").InputSignal<"default" | "cancel" | "destructive" | undefined>;
+    readonly role: import("@angular/core").InputSignal<"default" | "cancel" | "destructive" | "close" | undefined>;
     /**
      * In a home-screen widget's layout, what a tap on it records for the app: see
      * `@ng-native/expo/widget`.
@@ -642,6 +643,50 @@ export declare class UiGroup {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<UiGroup, "ui-group", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+/**
+ * A SwiftUI `NavigationStack`, iOS only: the bar a `ui-toolbar` inside it puts its items in, and
+ * that a `navigationTitle` modifier on its content titles.
+ */
+export declare class UiNavigationStack {
+    protected readonly nativeView: true;
+    readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiNavigationStack, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiNavigationStack, "ui-navigation-stack", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * SwiftUI's `toolbar`, iOS only. Its children are the view the toolbar belongs to, and its items go
+ * in `<ui-slot name="content">`, each a `ui-toolbar-item`. It shows in the bar of the
+ * `ui-navigation-stack` around it.
+ */
+export declare class UiToolbar {
+    protected readonly nativeView: true;
+    readonly modifiers: import("@angular/core").InputSignal<readonly UiModifier[] | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToolbar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToolbar, "ui-toolbar", never, { "modifiers": { "alias": "modifiers"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/** Where a `ui-toolbar-item` sits, as SwiftUI's `ToolbarItemPlacement` names them. */
+export type UiToolbarItemPlacement = 'automatic' | 'principal' | 'navigation' | 'primaryAction' | 'secondaryAction' | 'status' | 'confirmationAction' | 'cancellationAction' | 'destructiveAction' | 'keyboard' | 'topBarLeading' | 'topBarTrailing' | 'topBarPinnedTrailing' | 'largeTitle' | 'bottomBar';
+/**
+ * One item of a `ui-toolbar`, SwiftUI's `ToolbarItem`: a `ui-button`, or a `ui-text` as a title
+ * with `placement="principal"`. Unplaced, SwiftUI places it. A placement the OS does not have is
+ * read as `automatic`.
+ *
+ * Written inside a `ui-bottom-sheet` it goes in the sheet's own toolbar, which is how a sheet
+ * shows the system's close button.
+ */
+export declare class UiToolbarItem {
+    protected readonly nativeView: true;
+    readonly placement: import("@angular/core").InputSignal<UiToolbarItemPlacement | undefined>;
+    /** How readily the item gives up its place when the bar runs out of room, from iOS 27. */
+    readonly visibilityPriority: import("@angular/core").InputSignal<"low" | "high" | "automatic" | undefined>;
+    /** What the slot tells the toolbar about itself: only what is set, so SwiftUI decides the rest. */
+    protected readonly extraProps: Signal<{
+        visibilityPriority?: "low" | "high" | "automatic" | undefined;
+        placement?: UiToolbarItemPlacement | undefined;
+    } | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToolbarItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToolbarItem, "ui-toolbar-item", never, { "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "visibilityPriority": { "alias": "visibilityPriority"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
 /**
  * A height a SwiftUI sheet rests at, as `@expo/ui`'s `PresentationDetent`: about half the screen,
  * all of it, a fraction of it from 0 to 1, or a height in points.
@@ -671,6 +716,21 @@ export interface UiBottomSheetViewFunctions {
  * `open` presents and dismisses it, and is written back when the user dismisses it. Its content is
  * what is written inside it, the app's own components, in the tree while the sheet is on screen.
  *
+ * A `ui-toolbar-item` written inside it is not content: on iOS it goes in a toolbar of the sheet's
+ * own, in a bar across its top, which is where the system's close button belongs.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting">
+ *   <ui-toolbar-item placement="cancellationAction">
+ *     <ui-button role="close" (buttonPress)="sorting.set(false)" />
+ *   </ui-toolbar-item>
+ *   <app-sort-options />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * Compose's sheet has no toolbar, so Android draws no item. Nor does an iOS build whose `@expo/ui`
+ * is older than 57.0.20, which Expo Go's can be: it warns, and shows the sheet without one.
+ *
  * The two platforms drive a sheet differently, and this is where that difference ends. SwiftUI's
  * stays in the tree and is presented by `isPresented`, reporting `isPresentedChange` and
  * `dismiss`. Compose's shows for as long as it is in the tree, and reports `dismissRequest`.
@@ -678,7 +738,8 @@ export interface UiBottomSheetViewFunctions {
  * Unlike the other components here, the element this is mounted on is a plain view, which takes
  * no room and needs no `ui-host` around it. The sheet is inside it, wrapped as `@expo/ui`'s own
  * React component wraps one: a `ui-host`, the sheet, on iOS a `ui-group` that carries the
- * presentation modifiers, and a `ui-view-host` holding the one view the content goes in.
+ * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. With
+ * toolbar items, the view host is in a `ui-toolbar` in a `ui-navigation-stack`, under the group.
  */
 export declare class UiBottomSheet {
     /**
@@ -686,7 +747,14 @@ export declare class UiBottomSheet {
      * build and there is no sheet. Overridden in a test to hide a sheet without a device.
      */
     static readonly SOURCE: InjectionToken<UiBottomSheetViewFunctions | null>;
+    /**
+     * Whether the build has SwiftUI's toolbar. `@expo/ui` has had it since 57.0.20, and Expo Go has
+     * the version its SDK shipped with. A SwiftUI view under one the build lacks is a crash, so a
+     * sheet there leaves its toolbar out. Overridden in a test.
+     */
+    static readonly TOOLBAR: InjectionToken<boolean>;
     private readonly functions;
+    private readonly toolbarInBuild;
     private readonly engine;
     private readonly injector;
     private readonly sheet;
@@ -694,7 +762,8 @@ export declare class UiBottomSheet {
     readonly open: import("@angular/core").ModelSignal<boolean>;
     /**
      * The sheet is as tall as its content. Without it the sheet rests at half the screen's height
-     * and drags up to all of it. Read as the sheet opens.
+     * and drags up to all of it. Read as the sheet opens. A sheet with a toolbar on iOS is not
+     * sized to its content: it rests at its `detents`, or at half and full height.
      */
     readonly fitToContents: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
@@ -711,6 +780,10 @@ export declare class UiBottomSheet {
      * moment another sheet or a dialog can be presented.
      */
     readonly dismissed: import("@angular/core").OutputEmitterRef<void>;
+    /** The toolbar items written inside the sheet, which give it a bar to hold them. */
+    private readonly toolbarItems;
+    /** Whether the sheet has a toolbar: it has items for one, and the build has the views. */
+    protected readonly toolbar: Signal<boolean>;
     /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
     protected readonly swiftUI: boolean;
     protected readonly width: Signal<number | undefined>;
@@ -721,7 +794,10 @@ export declare class UiBottomSheet {
     protected readonly mounted: import("@angular/core").WritableSignal<boolean>;
     /**
      * Whether the sheet is sized to its content, as it opened: a view host takes its sizing once,
-     * as it mounts. SwiftUI's sheet is not where it has detents to rest at.
+     * as it mounts. SwiftUI's sheet is not where it has detents to rest at, nor where it has a
+     * toolbar: a navigation stack fills what it is given, and the bar is no part of the content.
+     * A toolbar that comes or goes while the sheet is open is followed, since the view host is made
+     * again around it.
      */
     protected readonly fits: Signal<boolean>;
     /**
@@ -770,6 +846,6 @@ export declare class UiBottomSheet {
     /** The sheet has gone: its content leaves the tree. */
     private finish;
     static ɵfac: i0.ɵɵFactoryDeclaration<UiBottomSheet, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UiBottomSheet, "ui-bottom-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "fitToContents": { "alias": "fitToContents"; "required": false; "isSignal": true; }; "detents": { "alias": "detents"; "required": false; "isSignal": true; }; "showDragIndicator": { "alias": "showDragIndicator"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiBottomSheet, "ui-bottom-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "fitToContents": { "alias": "fitToContents"; "required": false; "isSignal": true; }; "detents": { "alias": "detents"; "required": false; "isSignal": true; }; "showDragIndicator": { "alias": "showDragIndicator"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, ["toolbarItems"], ["*", "ui-toolbar-item"], true, never>;
 }
 export {};

package/dist/expo-ui-components.js

@@ -23,7 +23,7 @@
  * Still register the names with `registerExpoUiViews`: the component types the element, the
  * registration is what makes it commit as the SwiftUI or Compose view.
  */
-import { Component, DestroyRef, forwardRef, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { Component, DestroyRef, forwardRef, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, contentChildren, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild, } from '@angular/core';
 import { Engine, HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
 import { optional } from "./native.js";
 import { optionalBoolean, optionalNumber } from "./transforms.js";
@@ -168,7 +168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /**
  * A SwiftUI `Button`, as a menu item or on its own, or Compose's on Android, which draws `label` as
- * text inside it. `systemImage` and `role` are SwiftUI's alone.
+ * text inside it. `systemImage` and `role` are SwiftUI's alone. A `close` button with no label and
+ * no content is the system's own close button, from iOS 26.
  */
 export class UiButton {
     nativeView = nativeView();
@@ -1217,6 +1218,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: { '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `NavigationStack`, iOS only: the bar a `ui-toolbar` inside it puts its items in, and
+ * that a `navigationTitle` modifier on its content titles.
+ */
+export class UiNavigationStack {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiNavigationStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiNavigationStack, isStandalone: true, selector: "ui-navigation-stack", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiNavigationStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-navigation-stack',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * SwiftUI's `toolbar`, iOS only. Its children are the view the toolbar belongs to, and its items go
+ * in `<ui-slot name="content">`, each a `ui-toolbar-item`. It shows in the bar of the
+ * `ui-navigation-stack` around it.
+ */
+export class UiToolbar {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToolbar, isStandalone: true, selector: "ui-toolbar", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toolbar',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * One item of a `ui-toolbar`, SwiftUI's `ToolbarItem`: a `ui-button`, or a `ui-text` as a title
+ * with `placement="principal"`. Unplaced, SwiftUI places it. A placement the OS does not have is
+ * read as `automatic`.
+ *
+ * Written inside a `ui-bottom-sheet` it goes in the sheet's own toolbar, which is how a sheet
+ * shows the system's close button.
+ */
+export class UiToolbarItem {
+    nativeView = nativeView();
+    placement = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** How readily the item gives up its place when the bar runs out of room, from iOS 27. */
+    visibilityPriority = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "visibilityPriority" }] : /* istanbul ignore next */ []));
+    /** What the slot tells the toolbar about itself: only what is set, so SwiftUI decides the rest. */
+    extraProps = computed(() => {
+        const placement = this.placement();
+        const visibilityPriority = this.visibilityPriority();
+        if (!placement && !visibilityPriority)
+            return undefined;
+        return { ...(placement && { placement }), ...(visibilityPriority && { visibilityPriority }) };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "extraProps" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToolbarItem, isStandalone: true, selector: "ui-toolbar-item", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, visibilityPriority: { classPropertyName: "visibilityPriority", publicName: "visibilityPriority", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "\"item\"", "extraProps": "extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToolbarItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-toolbar-item',
+                    template: '<ng-content />',
+                    host: { '[name]': '"item"', '[extraProps]': 'extraProps()' },
+                }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], visibilityPriority: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibilityPriority", required: false }] }] } });
 /** The detents of a sheet given none and not sized to its content. */
 const HALF_AND_FULL = ['medium', 'large'];
 /** The window's width as the engine knows it, or undefined before the platform has said. */
@@ -1244,6 +1319,21 @@ function windowWidth() {
  * `open` presents and dismisses it, and is written back when the user dismisses it. Its content is
  * what is written inside it, the app's own components, in the tree while the sheet is on screen.
  *
+ * A `ui-toolbar-item` written inside it is not content: on iOS it goes in a toolbar of the sheet's
+ * own, in a bar across its top, which is where the system's close button belongs.
+ *
+ * ```html
+ * <ui-bottom-sheet [(open)]="sorting">
+ *   <ui-toolbar-item placement="cancellationAction">
+ *     <ui-button role="close" (buttonPress)="sorting.set(false)" />
+ *   </ui-toolbar-item>
+ *   <app-sort-options />
+ * </ui-bottom-sheet>
+ * ```
+ *
+ * Compose's sheet has no toolbar, so Android draws no item. Nor does an iOS build whose `@expo/ui`
+ * is older than 57.0.20, which Expo Go's can be: it warns, and shows the sheet without one.
+ *
  * The two platforms drive a sheet differently, and this is where that difference ends. SwiftUI's
  * stays in the tree and is presented by `isPresented`, reporting `isPresentedChange` and
  * `dismiss`. Compose's shows for as long as it is in the tree, and reports `dismissRequest`.
@@ -1251,7 +1341,8 @@ function windowWidth() {
  * Unlike the other components here, the element this is mounted on is a plain view, which takes
  * no room and needs no `ui-host` around it. The sheet is inside it, wrapped as `@expo/ui`'s own
  * React component wraps one: a `ui-host`, the sheet, on iOS a `ui-group` that carries the
- * presentation modifiers, and a `ui-view-host` holding the one view the content goes in.
+ * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. With
+ * toolbar items, the view host is in a `ui-toolbar` in a `ui-navigation-stack`, under the group.
  */
 export class UiBottomSheet {
     /**
@@ -1265,7 +1356,19 @@ export class UiBottomSheet {
             return module ? (module.ViewPrototypes?.['ExpoUI_ModalBottomSheetView'] ?? {}) : null;
         }),
     });
+    /**
+     * Whether the build has SwiftUI's toolbar. `@expo/ui` has had it since 57.0.20, and Expo Go has
+     * the version its SDK shipped with. A SwiftUI view under one the build lacks is a crash, so a
+     * sheet there leaves its toolbar out. Overridden in a test.
+     */
+    static TOOLBAR = new InjectionToken('angular-native.bottomSheetToolbar', {
+        factory: () => {
+            const expo = globalThis.expo;
+            return ['NavigationStackView', 'ToolbarView'].every((view) => optional(() => expo?.getViewConfig?.('ExpoUI', view)) != null);
+        },
+    });
     functions = inject(UiBottomSheet.SOURCE);
+    toolbarInBuild = inject(UiBottomSheet.TOOLBAR);
     engine = inject(Engine, { optional: true });
     injector = inject(Injector);
     sheet = viewChild('sheet', { ...(ngDevMode ? { debugName: "sheet" } : /* istanbul ignore next */ {}), read: ElementRef });
@@ -1274,7 +1377,8 @@ export class UiBottomSheet {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /**
      * The sheet is as tall as its content. Without it the sheet rests at half the screen's height
-     * and drags up to all of it. Read as the sheet opens.
+     * and drags up to all of it. Read as the sheet opens. A sheet with a toolbar on iOS is not
+     * sized to its content: it rests at its `detents`, or at half and full height.
      */
     fitToContents = input(false, { ...(ngDevMode ? { debugName: "fitToContents" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /**
@@ -1292,6 +1396,12 @@ export class UiBottomSheet {
      * moment another sheet or a dialog can be presented.
      */
     dismissed = output();
+    /** The toolbar items written inside the sheet, which give it a bar to hold them. */
+    toolbarItems = contentChildren(UiToolbarItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarItems" }] : /* istanbul ignore next */ []));
+    /** Whether the sheet has a toolbar: it has items for one, and the build has the views. */
+    toolbar = computed(() => this.toolbarInBuild && this.toolbarItems().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
     /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
     swiftUI = nativePlatform() === 'ios';
     width = windowWidth();
@@ -1303,11 +1413,15 @@ export class UiBottomSheet {
         computation: (open, previous) => open || (previous?.value ?? false) });
     /**
      * Whether the sheet is sized to its content, as it opened: a view host takes its sizing once,
-     * as it mounts. SwiftUI's sheet is not where it has detents to rest at.
+     * as it mounts. SwiftUI's sheet is not where it has detents to rest at, nor where it has a
+     * toolbar: a navigation stack fills what it is given, and the bar is no part of the content.
+     * A toolbar that comes or goes while the sheet is open is followed, since the view host is made
+     * again around it.
      */
     fits = computed(() => {
         this.mounted();
-        return untracked(() => this.fitToContents() && !(this.swiftUI && this.detents()?.length));
+        const toolbar = this.toolbar();
+        return untracked(() => this.fitToContents() && !(this.swiftUI && (this.detents()?.length || toolbar)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fits" }] : /* istanbul ignore next */ []));
     /**
@@ -1342,6 +1456,17 @@ export class UiBottomSheet {
             if (!this.open())
                 untracked(() => this.close());
         });
+        if (this.swiftUI && !this.toolbarInBuild) {
+            const warned = effect(() => {
+                if (!this.toolbarItems().length)
+                    return;
+                console.warn('[angular-native] A ui-toolbar-item in a ui-bottom-sheet needs @expo/ui 57.0.20 or ' +
+                    'later in the native build. This build has no SwiftUI toolbar, as Expo Go may not, ' +
+                    'so the sheet is shown without the item.');
+                warned.destroy();
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "warned" }] : /* istanbul ignore next */ []));
+        }
     }
     presented(event) {
         if (!this.own(event))
@@ -1422,7 +1547,7 @@ export class UiBottomSheet {
         afterNextRender(() => this.mounted.set(this.open()), { injector: this.injector });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <ng-template #content><ng-content /></ng-template>
     @if (swiftUI) {
       <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
@@ -1435,9 +1560,20 @@ export class UiBottomSheet {
         >
           @if (mounted()) {
             <ui-group [modifiers]="presentation()">
-              <ui-view-host layoutRoot [matchContents]="fits() || undefined">
-                <ui-bottom-sheet-content [style]="body()" [content]="content" />
-              </ui-view-host>
+              @if (toolbar()) {
+                <ui-navigation-stack>
+                  <ui-toolbar>
+                    <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                      <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                    </ui-view-host>
+                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                  </ui-toolbar>
+                </ui-navigation-stack>
+              } @else {
+                <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                  <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                </ui-view-host>
+              }
             </ui-group>
           }
         </ui-bottom-sheet-view>
@@ -1456,13 +1592,22 @@ export class UiBottomSheet {
         </ui-bottom-sheet-view>
       </ui-host>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-bottom-sheet',
-                    imports: [UiBottomSheetContent, UiBottomSheetView, UiGroup, UiHost, UiViewHost],
+                    imports: [
+                        UiBottomSheetContent,
+                        UiBottomSheetView,
+                        UiGroup,
+                        UiHost,
+                        UiNavigationStack,
+                        UiSlot,
+                        UiToolbar,
+                        UiViewHost,
+                    ],
                     template: `
     <ng-template #content><ng-content /></ng-template>
     @if (swiftUI) {
@@ -1476,9 +1621,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         >
           @if (mounted()) {
             <ui-group [modifiers]="presentation()">
-              <ui-view-host layoutRoot [matchContents]="fits() || undefined">
-                <ui-bottom-sheet-content [style]="body()" [content]="content" />
-              </ui-view-host>
+              @if (toolbar()) {
+                <ui-navigation-stack>
+                  <ui-toolbar>
+                    <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                      <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                    </ui-view-host>
+                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                  </ui-toolbar>
+                </ui-navigation-stack>
+              } @else {
+                <ui-view-host layoutRoot [matchContents]="fits() || undefined">
+                  <ui-bottom-sheet-content [style]="body()" [content]="content" />
+                </ui-view-host>
+              }
             </ui-group>
           }
         </ui-bottom-sheet-view>
@@ -1502,5 +1658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { ...{
                             read: ElementRef,
-                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
 //# sourceMappingURL=expo-ui-components.js.map