expo-router 7.0.0-canary-20251216-3f01dbf → 7.0.0-canary-20251223-b83b31e

package/build/toolbar/elements.d.ts

@@ -1,24 +1,333 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type ReactNode } from 'react';
+import { type ColorValue, type StyleProp } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
-import type { RouterToolbarHostProps, RouterToolbarItemProps } from './native.types';
-import { LinkMenuAction, type LinkMenuActionProps, type LinkMenuProps } from '../link/elements';
-export type ToolbarMenuProps = LinkMenuProps;
-export declare const ToolbarMenu: import("react").FC<LinkMenuProps>;
+import { LinkMenuAction, type LinkMenuActionProps } from '../link/elements';
+import type { BasicTextStyle } from '../utils/font';
+export interface ToolbarMenuProps {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    children?: React.ReactNode;
+    /**
+     * If `true`, the menu item will be displayed as destructive.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive) for more information.
+     */
+    destructive?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    /**
+     * Whether to hide the shared background when `sharesBackground` is enabled.
+     *
+     * Only available for root level menus.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Optional SF Symbol displayed alongside the menu item.
+     */
+    icon?: SFSymbol;
+    /**
+     * If `true`, the menu will be displayed inline.
+     * This means that the menu will not be collapsed
+     *
+     * > **Note*: Inline menus are only supported in submenus.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.
+     */
+    inline?: boolean;
+    /**
+     * If `true`, the menu will be displayed as a palette.
+     * This means that the menu will be displayed as one row
+     *
+     * > **Note**: Palette menus are only supported in submenus.
+     *
+     * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.
+     */
+    palette?: boolean;
+    /**
+     * Whether to separate the background of this item from other header items.
+     *
+     * > **Note**: Text buttons cannot share the background.
+     *
+     * This prop reverses the native behavior of `sharesBackground`.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
+     *
+     * @default false
+     *
+     * @platform iOS 26+
+     */
+    separateBackground?: boolean;
+    /**
+     * Style for the label of the header item.
+     */
+    style?: StyleProp<BasicTextStyle>;
+    /**
+     * The title of the menu item
+     */
+    title?: string;
+    /**
+     * Tint color for the menu icon and text.
+     */
+    tintColor?: ColorValue;
+    /**
+     * Controls the visual style of the menu when represented as a bar button.
+     *
+     * @default 'plain'
+     */
+    variant?: 'plain' | 'done' | 'prominent';
+}
+/**
+ * Adds a context menu for to a toolbar.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Menu title="Options">
+ *     <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
+ *     <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
+ *   </Toolbar.Menu>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+export declare const ToolbarMenu: React.FC<ToolbarMenuProps>;
 export type ToolbarMenuActionProps = LinkMenuActionProps;
+/**
+ * A single action item within a toolbar menu.
+ *
+ * For available props, see [`LinkMenuActionProps`](./router/#linkmenuactionprops).
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Menu title="Options">
+ *     <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
+ *     <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
+ *   </Toolbar.Menu>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
 export declare const ToolbarMenuAction: typeof LinkMenuAction;
-export interface ToolbarButtonProps extends Pick<RouterToolbarItemProps, 'barButtonItemStyle' | 'hidden' | 'selected' | 'possibleTitles' | 'tintColor' | 'hidesSharedBackground' | 'sharesBackground'> {
-    children?: string;
-    sf?: SFSymbol;
+export interface ToolbarButtonProps {
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    /**
+     * The text label for the button.
+     *
+     * > **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.
+     *
+     * @example
+     * ```tsx
+     * import { Toolbar } from 'expo-router/unstable-toolbar';
+     *
+     * ...
+     * <Toolbar.Button>This is button label</Toolbar.Button>
+     * ```
+     */
+    children?: ReactNode;
+    disabled?: boolean;
+    /**
+     * Whether the button should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Whether to hide the shared background.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * The name of the SF Symbol to display as the button icon.
+     * For a list of available symbols, see [SF Symbols](https://developer.apple.com/sf-symbols/).
+     */
+    icon?: SFSymbol;
+    /**
+     * Callback function when the button is pressed.
+     */
     onPress?: () => void;
+    /**
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.
+     */
+    possibleTitles?: string[];
+    /**
+     * Whether the button is in a selected state
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.
+     */
+    selected?: boolean;
+    /**
+     * Whether to separate the background of this item from other header items.
+     *
+     * > **Note**: Text buttons cannot share the background.
+     *
+     * This prop reverses the native behavior of `sharesBackground`.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
+     *
+     * @default false
+     *
+     * @platform iOS 26+
+     */
+    separateBackground?: boolean;
+    /**
+     * Style for the label of the header item.
+     */
+    style?: StyleProp<BasicTextStyle>;
+    /**
+     * Tint color for the button icon and text.
+     */
+    tintColor?: ColorValue;
+    /**
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/style-swift.enum) for more information.
+     *
+     * @default 'plain'
+     */
+    variant?: 'plain' | 'done' | 'prominent';
 }
-export declare const ToolbarButton: ({ children, sf, onPress, ...rest }: ToolbarButtonProps) => import("react").JSX.Element;
-export type ToolbarSpacerProps = Pick<RouterToolbarItemProps, 'width' | 'hidden'>;
-export declare const ToolbarSpacer: ({ width, ...rest }: ToolbarSpacerProps) => import("react").JSX.Element;
-export interface ToolbarViewProps extends Pick<RouterToolbarItemProps, 'hidesSharedBackground' | 'sharesBackground'> {
+/**
+ * A button component for use in the toolbar.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
+ *   <Toolbar.Button>Text Button</Toolbar.Button>
+ *   <Toolbar.Button hidden={!isSearchFocused} icon="xmark" onPress={handleClear} />
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+export declare const ToolbarButton: (props: ToolbarButtonProps) => import("react").JSX.Element;
+export type ToolbarSpacerProps = {
+    /**
+     * Whether to hide the shared background when `sharesBackground` is enabled.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
+     *
+     * @platform iOS 26+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Whether the spacer should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Whether the spacer shares the background with adjacent toolbar items.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
+     *
+     * @platform iOS 26+
+     * @default false
+     */
+    sharesBackground?: boolean;
+    /**
+     * By default, the spacer is flexible and expands to fill available space.
+     * If a width is provided, it creates a [fixed-width spacer](https://developer.apple.com/documentation/uikit/uibarbuttonitem/fixedspace(_:)).
+     */
+    width?: number;
+};
+/**
+ * A spacer component for the toolbar.
+ * Without a width, it creates a flexible spacer that expands to fill available space.
+ * With a width, it creates a fixed-width spacer.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Spacer />
+ *   <Toolbar.Button icon="magnifyingglass" />
+ *   <Toolbar.Spacer width={20} />
+ *   <Toolbar.Button icon="mic" />
+ *   <Toolbar.Spacer />
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+export declare const ToolbarSpacer: (props: ToolbarSpacerProps) => import("react").JSX.Element;
+/**
+ * Props for the ToolbarView component.
+ *
+ * @platform ios
+ */
+export interface ToolbarViewProps {
+    /**
+     * React elements to render inside the toolbar view.
+     */
     children: React.ReactNode;
-    style?: StyleProp<Omit<ViewStyle, 'position' | 'inset' | 'top' | 'left' | 'right' | 'bottom' | 'flex'>>;
+    /**
+     * Whether the view should be hidden.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Whether to hide the shared background when `sharesBackground` is enabled.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
+     *
+     * @platform iOS 18+
+     */
+    hidesSharedBackground?: boolean;
+    /**
+     * Whether to separate the background of this item from other header items.
+     *
+     * This prop reverses the native behavior of `sharesBackground`.
+     *
+     * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
+     *
+     * @default false
+     *
+     * @platform iOS 26+
+     */
+    separateBackground?: boolean;
+}
+/**
+ * A custom view component for the toolbar that can contain any React elements.
+ * Useful for embedding custom components.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * The items within the view will be absolutely positioned, so flexbox styles will not work as expected.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Spacer />
+ *   <Toolbar.View>
+ *     <TextInput
+ *       placeholder="Search"
+ *       placeholderTextColor={Color.ios.placeholderText}
+ *     />
+ *   </Toolbar.View>
+ *   <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>
+ *     <Pressable onPress={handlePress}>
+ *       <SymbolView name="plus" size={22} />
+ *     </Pressable>
+ *   </Toolbar.View>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+export declare const ToolbarView: ({ children, hidden, hidesSharedBackground, separateBackground, }: ToolbarViewProps) => import("react").JSX.Element;
+export interface ToolbarProps {
+    children?: React.ReactNode;
 }
-export declare const ToolbarView: ({ children, style, ...rest }: ToolbarViewProps) => import("react").JSX.Element;
-export type ToolbarHostProps = RouterToolbarHostProps;
-export declare const ToolbarHost: (props: ToolbarHostProps) => import("react").JSX.Element;
+export declare const ToolbarHost: (props: ToolbarProps) => import("react").JSX.Element;
 //# sourceMappingURL=elements.d.ts.map

package/build/toolbar/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAErF,OAAO,EAEL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC;AAC7C,eAAO,MAAM,WAAW,mCAAW,CAAC;AAEpC,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,CAAC;AACzD,eAAO,MAAM,iBAAiB,uBAAiB,CAAC;AAEhD,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,sBAAsB,EACpB,oBAAoB,GACpB,QAAQ,GACR,UAAU,GACV,gBAAgB,GAChB,WAAW,GACX,uBAAuB,GACvB,kBAAkB,CACrB;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,eAAO,MAAM,aAAa,GAAI,oCAAoC,kBAAkB,gCAWnF,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;AAClF,eAAO,MAAM,aAAa,GAAI,oBAAoB,kBAAkB,gCAUnE,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,uBAAuB,GAAG,kBAAkB,CAAC;IAClF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CACf,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CACrF,CAAC;CACH;AACD,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,gCAOzE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,CAAC;AACtD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAOlD,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":"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"}

package/build/toolbar/elements.js

@@ -1,28 +1,146 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarHost = exports.ToolbarView = exports.ToolbarSpacer = exports.ToolbarButton = exports.ToolbarMenuAction = exports.ToolbarMenu = void 0;
-const non_secure_1 = require("nanoid/non-secure");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const native_1 = require("./native");
 const InternalLinkPreviewContext_1 = require("../link/InternalLinkPreviewContext");
 const elements_1 = require("../link/elements");
-exports.ToolbarMenu = elements_1.LinkMenu;
+const native_2 = require("../link/preview/native");
+const primitives_1 = require("../primitives");
+const children_1 = require("../utils/children");
+/**
+ * Adds a context menu for to a toolbar.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Menu title="Options">
+ *     <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
+ *     <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
+ *   </Toolbar.Menu>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+const ToolbarMenu = ({ accessibilityHint, accessibilityLabel, separateBackground, hidesSharedBackground, palette, inline, hidden, title, destructive, children, icon, tintColor, variant, style, }) => {
+    const identifier = (0, react_1.useId)();
+    const validChildren = react_1.Children.toArray(children).filter((child) => (0, react_1.isValidElement)(child) && (child.type === exports.ToolbarMenuAction || child.type === exports.ToolbarMenu));
+    const label = (0, children_1.getFirstChildOfType)(children, primitives_1.Label);
+    const iconComponent = (0, children_1.getFirstChildOfType)(children, primitives_1.Icon);
+    const computedTitle = title ?? label?.props.children ?? '';
+    const computedIcon = icon ??
+        (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);
+    const sf = typeof computedIcon === 'string' ? computedIcon : undefined;
+    const titleStyle = react_native_1.StyleSheet.flatten(style);
+    return (<native_2.NativeLinkPreviewAction sharesBackground={!separateBackground} hidesSharedBackground={hidesSharedBackground} hidden={hidden} icon={sf} destructive={destructive} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} displayAsPalette={palette} displayInline={inline} tintColor={tintColor} titleStyle={titleStyle} barButtonItemStyle={variant === 'done' ? 'prominent' : variant} title={computedTitle} onSelected={() => { }} children={validChildren} identifier={identifier}/>);
+};
+exports.ToolbarMenu = ToolbarMenu;
+/**
+ * A single action item within a toolbar menu.
+ *
+ * For available props, see [`LinkMenuActionProps`](./router/#linkmenuactionprops).
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Menu title="Options">
+ *     <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
+ *     <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
+ *   </Toolbar.Menu>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
 exports.ToolbarMenuAction = elements_1.LinkMenuAction;
-const ToolbarButton = ({ children, sf, onPress, ...rest }) => {
-    const id = (0, react_1.useMemo)(() => (0, non_secure_1.nanoid)(), []);
-    return (<native_1.RouterToolbarItem {...rest} onSelected={onPress} identifier={id} title={children} systemImageName={sf}/>);
+// As noted in https://sebvidal.com/blog/whats-new-in-uikit-26/?utm_source=chatgpt.com#:~:text=It%27s%20worth%20noting%20that%2C%20at%20the%20time%20of%20writing%2C%20bar%20button%20badges%20are%20only%20supported%20in%20navigation%20bars%20%2D%20not%20tool%20bars.
+// currently badges are not supported in toolbars, and only in navigation bars.
+// Therefore, there is no badge support in ToolbarButton
+/**
+ * A button component for use in the toolbar.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
+ *   <Toolbar.Button>Text Button</Toolbar.Button>
+ *   <Toolbar.Button hidden={!isSearchFocused} icon="xmark" onPress={handleClear} />
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+const ToolbarButton = (props) => {
+    const id = (0, react_1.useId)();
+    const areChildrenString = typeof props.children === 'string';
+    const label = areChildrenString
+        ? props.children
+        : (0, children_1.getFirstChildOfType)(props.children, primitives_1.Label)?.props.children;
+    const iconComponent = !props.icon && !areChildrenString ? (0, children_1.getFirstChildOfType)(props.children, primitives_1.Icon) : undefined;
+    const icon = props.icon ??
+        (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);
+    const sf = typeof icon === 'string' ? icon : undefined;
+    return (<native_1.RouterToolbarItem accessibilityHint={props.accessibilityHint} accessibilityLabel={props.accessibilityLabel} barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant} disabled={props.disabled} hidden={props.hidden} hidesSharedBackground={props.hidesSharedBackground} identifier={id} onSelected={props.onPress} possibleTitles={props.possibleTitles} selected={props.selected} sharesBackground={!props.separateBackground} systemImageName={sf} title={label} tintColor={props.tintColor} titleStyle={react_native_1.StyleSheet.flatten(props.style)}/>);
 };
 exports.ToolbarButton = ToolbarButton;
-const ToolbarSpacer = ({ width, ...rest }) => {
-    const id = (0, react_1.useMemo)(() => (0, non_secure_1.nanoid)(), []);
-    return (<native_1.RouterToolbarItem {...rest} identifier={id} type={width ? 'fixedSpacer' : 'fluidSpacer'} width={width}/>);
+/**
+ * A spacer component for the toolbar.
+ * Without a width, it creates a flexible spacer that expands to fill available space.
+ * With a width, it creates a fixed-width spacer.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Spacer />
+ *   <Toolbar.Button icon="magnifyingglass" />
+ *   <Toolbar.Spacer width={20} />
+ *   <Toolbar.Button icon="mic" />
+ *   <Toolbar.Spacer />
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+const ToolbarSpacer = (props) => {
+    const id = (0, react_1.useId)();
+    return (<native_1.RouterToolbarItem hidesSharedBackground={props.hidesSharedBackground} hidden={props.hidden} identifier={id} sharesBackground={props.sharesBackground} type={props.width ? 'fixedSpacer' : 'fluidSpacer'} width={props.width}/>);
 };
 exports.ToolbarSpacer = ToolbarSpacer;
-const ToolbarView = ({ children, style, ...rest }) => {
-    const id = (0, react_1.useMemo)(() => (0, non_secure_1.nanoid)(), []);
-    return (<native_1.RouterToolbarItem {...rest} identifier={id}>
-      <react_native_1.View style={[style, { position: 'absolute' }]}>{children}</react_native_1.View>
+/**
+ * A custom view component for the toolbar that can contain any React elements.
+ * Useful for embedding custom components.
+ * It should only be used as a child of `Toolbar`.
+ *
+ * The items within the view will be absolutely positioned, so flexbox styles will not work as expected.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar>
+ *   <Toolbar.Spacer />
+ *   <Toolbar.View>
+ *     <TextInput
+ *       placeholder="Search"
+ *       placeholderTextColor={Color.ios.placeholderText}
+ *     />
+ *   </Toolbar.View>
+ *   <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>
+ *     <Pressable onPress={handlePress}>
+ *       <SymbolView name="plus" size={22} />
+ *     </Pressable>
+ *   </Toolbar.View>
+ * </Toolbar>
+ * ```
+ *
+ * @platform ios
+ */
+const ToolbarView = ({ children, hidden, hidesSharedBackground, separateBackground, }) => {
+    const id = (0, react_1.useId)();
+    return (<native_1.RouterToolbarItem hidesSharedBackground={hidesSharedBackground} hidden={hidden} identifier={id} sharesBackground={!separateBackground}>
+      {children}
     </native_1.RouterToolbarItem>);
 };
 exports.ToolbarView = ToolbarView;

package/build/toolbar/elements.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":";;;AAAA,kDAA2C;AAC3C,iCAAgC;AAChC,+CAAoE;AAGpE,qCAAgE;AAEhE,mFAAgF;AAChF,+CAK0B;AAGb,QAAA,WAAW,GAAG,mBAAQ,CAAC;AAGvB,QAAA,iBAAiB,GAAG,yBAAc,CAAC;AAiBzC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,EAAsB,EAAE,EAAE;IACtF,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAM,GAAE,EAAE,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,CAAC,0BAAiB,CAChB,IAAI,IAAI,CAAC,CACT,UAAU,CAAC,CAAC,OAAO,CAAC,CACpB,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,eAAe,CAAC,CAAC,EAAE,CAAC,EACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,aAAa,iBAWxB;AAGK,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,EAAsB,EAAE,EAAE;IACtE,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAM,GAAE,EAAE,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,CAAC,0BAAiB,CAChB,IAAI,IAAI,CAAC,CACT,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAC5C,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB;AASK,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAoB,EAAE,EAAE;IAC5E,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,mBAAM,GAAE,EAAE,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,CAAC,0BAAiB,CAAC,IAAI,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAC1C;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAI,CAClE;IAAA,EAAE,0BAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB;AAGK,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,uEAAuE;IACvE,OAAO,CACL,CAAC,uDAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChE;MAAA,CAAC,0BAAiB,CAAC,IAAI,KAAK,CAAC,EAC/B;IAAA,EAAE,uDAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB","sourcesContent":["import { nanoid } from 'nanoid/non-secure';\nimport { useMemo } from 'react';\nimport { View, type StyleProp, type ViewStyle } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { RouterToolbarHost, RouterToolbarItem } from './native';\nimport type { RouterToolbarHostProps, RouterToolbarItemProps } from './native.types';\nimport { InternalLinkPreviewContext } from '../link/InternalLinkPreviewContext';\nimport {\n  LinkMenu,\n  LinkMenuAction,\n  type LinkMenuActionProps,\n  type LinkMenuProps,\n} from '../link/elements';\n\nexport type ToolbarMenuProps = LinkMenuProps;\nexport const ToolbarMenu = LinkMenu;\n\nexport type ToolbarMenuActionProps = LinkMenuActionProps;\nexport const ToolbarMenuAction = LinkMenuAction;\n\nexport interface ToolbarButtonProps\n  extends Pick<\n    RouterToolbarItemProps,\n    | 'barButtonItemStyle'\n    | 'hidden'\n    | 'selected'\n    | 'possibleTitles'\n    | 'tintColor'\n    | 'hidesSharedBackground'\n    | 'sharesBackground'\n  > {\n  children?: string;\n  sf?: SFSymbol;\n  onPress?: () => void;\n}\nexport const ToolbarButton = ({ children, sf, onPress, ...rest }: ToolbarButtonProps) => {\n  const id = useMemo(() => nanoid(), []);\n  return (\n    <RouterToolbarItem\n      {...rest}\n      onSelected={onPress}\n      identifier={id}\n      title={children}\n      systemImageName={sf}\n    />\n  );\n};\n\nexport type ToolbarSpacerProps = Pick<RouterToolbarItemProps, 'width' | 'hidden'>;\nexport const ToolbarSpacer = ({ width, ...rest }: ToolbarSpacerProps) => {\n  const id = useMemo(() => nanoid(), []);\n  return (\n    <RouterToolbarItem\n      {...rest}\n      identifier={id}\n      type={width ? 'fixedSpacer' : 'fluidSpacer'}\n      width={width}\n    />\n  );\n};\n\nexport interface ToolbarViewProps\n  extends Pick<RouterToolbarItemProps, 'hidesSharedBackground' | 'sharesBackground'> {\n  children: React.ReactNode;\n  style?: StyleProp<\n    Omit<ViewStyle, 'position' | 'inset' | 'top' | 'left' | 'right' | 'bottom' | 'flex'>\n  >;\n}\nexport const ToolbarView = ({ children, style, ...rest }: ToolbarViewProps) => {\n  const id = useMemo(() => nanoid(), []);\n  return (\n    <RouterToolbarItem {...rest} identifier={id}>\n      <View style={[style, { position: 'absolute' }]}>{children}</View>\n    </RouterToolbarItem>\n  );\n};\n\nexport type ToolbarHostProps = RouterToolbarHostProps;\nexport const ToolbarHost = (props: ToolbarHostProps) => {\n  // TODO: Replace InternalLinkPreviewContext with a more generic context\n  return (\n    <InternalLinkPreviewContext value={{ isVisible: false, href: '' }}>\n      <RouterToolbarHost {...props} />\n    </InternalLinkPreviewContext>\n  );\n};\n"]}
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../../src/toolbar/elements.tsx"],"names":[],"mappings":";;;AAAA,iCAAwE;AACxE,+CAA2E;AAG3E,qCAAgE;AAChE,mFAAgF;AAChF,+CAA4E;AAC5E,mDAAiE;AACjE,8CAA4C;AAC5C,gDAAwD;AAmFxD;;;;;;;;;;;;;;GAcG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,EACP,KAAK,GACN,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,IAAA,aAAK,GAAE,CAAC;IAC3B,MAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CACrD,CAAC,KAAK,EAAE,EAAE,CACR,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,yBAAiB,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAW,CAAC,CAC5F,CAAC;IACF,MAAM,KAAK,GAAG,IAAA,8BAAmB,EAAC,QAAQ,EAAE,kBAAK,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,IAAA,8BAAmB,EAAC,QAAQ,EAAE,iBAAI,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,KAAK,IAAI,KAAK,EAAE,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC;IAC3D,MAAM,YAAY,GAChB,IAAI;QACJ,CAAC,aAAa,EAAE,KAAK,IAAI,IAAI,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7F,MAAM,EAAE,GAAG,OAAO,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,UAAU,GAAG,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7C,OAAO,CACL,CAAC,gCAAuB,CACtB,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CACtC,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,CAAC,CAAC,EAAE,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAC1B,aAAa,CAAC,CAAC,MAAM,CAAC,CACtB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,kBAAkB,CAAC,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAC/D,KAAK,CAAC,CAAC,aAAa,CAAC,CACrB,UAAU,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CACrB,QAAQ,CAAC,CAAC,aAAa,CAAC,CACxB,UAAU,CAAC,CAAC,UAAU,CAAC,EACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,WAAW,eAkDtB;AAIF;;;;;;;;;;;;;;;;GAgBG;AACU,QAAA,iBAAiB,GAAG,yBAAc,CAAC;AA8FhD,yQAAyQ;AACzQ,+EAA+E;AAC/E,wDAAwD;AACxD;;;;;;;;;;;;;;GAcG;AACI,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,MAAM,iBAAiB,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC;IAC7D,MAAM,KAAK,GAAG,iBAAiB;QAC7B,CAAC,CAAE,KAAK,CAAC,QAAmB;QAC5B,CAAC,CAAC,IAAA,8BAAmB,EAAC,KAAK,CAAC,QAAQ,EAAE,kBAAK,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC;IAC/D,MAAM,aAAa,GACjB,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAA,8BAAmB,EAAC,KAAK,CAAC,QAAQ,EAAE,iBAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5F,MAAM,IAAI,GACR,KAAK,CAAC,IAAI;QACV,CAAC,aAAa,EAAE,KAAK,IAAI,IAAI,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7F,MAAM,EAAE,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IACvD,OAAO,CACL,CAAC,0BAAiB,CAChB,iBAAiB,CAAC,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAC3C,kBAAkB,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7C,kBAAkB,CAAC,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAC3E,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,qBAAqB,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CACnD,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,UAAU,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAC1B,cAAc,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CACrC,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CACzB,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC5C,eAAe,CAAC,CAAC,EAAE,CAAC,CACpB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAC3B,UAAU,CAAC,CAAC,yBAAU,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,aAAa,iBA+BxB;AAiCF;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,OAAO,CACL,CAAC,0BAAiB,CAChB,qBAAqB,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CACnD,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CACrB,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,gBAAgB,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CACzC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAClD,KAAK,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,MAAM,EACN,qBAAqB,EACrB,kBAAkB,GACD,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,IAAA,aAAK,GAAE,CAAC;IACnB,OAAO,CACL,CAAC,0BAAiB,CAChB,qBAAqB,CAAC,CAAC,qBAAqB,CAAC,CAC7C,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,UAAU,CAAC,CAAC,EAAE,CAAC,CACf,gBAAgB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CACtC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,0BAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB;AAMK,MAAM,WAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;IACjD,uEAAuE;IACvE,OAAO,CACL,CAAC,uDAA0B,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChE;MAAA,CAAC,0BAAiB,CAAC,IAAI,KAAK,CAAC,EAC/B;IAAA,EAAE,uDAA0B,CAAC,CAC9B,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB","sourcesContent":["import { Children, isValidElement, useId, type ReactNode } from 'react';\nimport { StyleSheet, type ColorValue, type StyleProp } from 'react-native';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nimport { RouterToolbarHost, RouterToolbarItem } from './native';\nimport { InternalLinkPreviewContext } from '../link/InternalLinkPreviewContext';\nimport { LinkMenuAction, type LinkMenuActionProps } from '../link/elements';\nimport { NativeLinkPreviewAction } from '../link/preview/native';\nimport { Icon, Label } from '../primitives';\nimport { getFirstChildOfType } from '../utils/children';\nimport type { BasicTextStyle } from '../utils/font';\n\nexport interface ToolbarMenuProps {\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n  children?: React.ReactNode;\n  /**\n   * If `true`, the menu item will be displayed as destructive.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/destructive) for more information.\n   */\n  destructive?: boolean;\n  disabled?: boolean;\n  hidden?: boolean;\n  /**\n   * Whether to hide the shared background when `sharesBackground` is enabled.\n   *\n   * Only available for root level menus.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Optional SF Symbol displayed alongside the menu item.\n   */\n  icon?: SFSymbol;\n  /**\n   * If `true`, the menu will be displayed inline.\n   * This means that the menu will not be collapsed\n   *\n   * > **Note*: Inline menus are only supported in submenus.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayinline) for more information.\n   */\n  inline?: boolean;\n  /**\n   * If `true`, the menu will be displayed as a palette.\n   * This means that the menu will be displayed as one row\n   *\n   * > **Note**: Palette menus are only supported in submenus.\n   *\n   * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uimenu/options-swift.struct/displayaspalette) for more information.\n   */\n  palette?: boolean;\n  /**\n   * Whether to separate the background of this item from other header items.\n   *\n   * > **Note**: Text buttons cannot share the background.\n   *\n   * This prop reverses the native behavior of `sharesBackground`.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n   *\n   * @default false\n   *\n   * @platform iOS 26+\n   */\n  separateBackground?: boolean;\n  /**\n   * Style for the label of the header item.\n   */\n  style?: StyleProp<BasicTextStyle>;\n  /**\n   * The title of the menu item\n   */\n  title?: string;\n\n  /**\n   * Tint color for the menu icon and text.\n   */\n  tintColor?: ColorValue;\n\n  /**\n   * Controls the visual style of the menu when represented as a bar button.\n   *\n   * @default 'plain'\n   */\n  variant?: 'plain' | 'done' | 'prominent';\n}\n\n/**\n * Adds a context menu for to a toolbar.\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <Toolbar.Menu title=\"Options\">\n *     <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n *     <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n *   </Toolbar.Menu>\n * </Toolbar>\n * ```\n *\n * @platform ios\n */\nexport const ToolbarMenu: React.FC<ToolbarMenuProps> = ({\n  accessibilityHint,\n  accessibilityLabel,\n  separateBackground,\n  hidesSharedBackground,\n  palette,\n  inline,\n  hidden,\n  title,\n  destructive,\n  children,\n  icon,\n  tintColor,\n  variant,\n  style,\n}) => {\n  const identifier = useId();\n  const validChildren = Children.toArray(children).filter(\n    (child) =>\n      isValidElement(child) && (child.type === ToolbarMenuAction || child.type === ToolbarMenu)\n  );\n  const label = getFirstChildOfType(children, Label);\n  const iconComponent = getFirstChildOfType(children, Icon);\n\n  const computedTitle = title ?? label?.props.children ?? '';\n  const computedIcon =\n    icon ??\n    (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n  const sf = typeof computedIcon === 'string' ? computedIcon : undefined;\n  const titleStyle = StyleSheet.flatten(style);\n  return (\n    <NativeLinkPreviewAction\n      sharesBackground={!separateBackground}\n      hidesSharedBackground={hidesSharedBackground}\n      hidden={hidden}\n      icon={sf}\n      destructive={destructive}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      displayAsPalette={palette}\n      displayInline={inline}\n      tintColor={tintColor}\n      titleStyle={titleStyle}\n      barButtonItemStyle={variant === 'done' ? 'prominent' : variant}\n      title={computedTitle}\n      onSelected={() => {}}\n      children={validChildren}\n      identifier={identifier}\n    />\n  );\n};\n\nexport type ToolbarMenuActionProps = LinkMenuActionProps;\n\n/**\n * A single action item within a toolbar menu.\n *\n * For available props, see [`LinkMenuActionProps`](./router/#linkmenuactionprops).\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <Toolbar.Menu title=\"Options\">\n *     <Toolbar.MenuAction title=\"Action 1\" onPress={() => {}} />\n *     <Toolbar.MenuAction title=\"Action 2\" onPress={() => {}} />\n *   </Toolbar.Menu>\n * </Toolbar>\n * ```\n *\n * @platform ios\n */\nexport const ToolbarMenuAction = LinkMenuAction;\n\nexport interface ToolbarButtonProps {\n  accessibilityLabel?: string;\n  accessibilityHint?: string;\n  /**\n   * The text label for the button.\n   *\n   * > **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only.\n   *\n   * @example\n   * ```tsx\n   * import { Toolbar } from 'expo-router/unstable-toolbar';\n   *\n   * ...\n   * <Toolbar.Button>This is button label</Toolbar.Button>\n   * ```\n   */\n  children?: ReactNode;\n  disabled?: boolean;\n\n  /**\n   * Whether the button should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n\n  /**\n   * Whether to hide the shared background.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n\n  // TODO: support ImageSourcePropType icons in addition to SFSymbols\n  /**\n   * The name of the SF Symbol to display as the button icon.\n   * For a list of available symbols, see [SF Symbols](https://developer.apple.com/sf-symbols/).\n   */\n  icon?: SFSymbol;\n\n  /**\n   * Callback function when the button is pressed.\n   */\n  onPress?: () => void;\n\n  /**\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.\n   */\n  possibleTitles?: string[];\n\n  /**\n   * Whether the button is in a selected state\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.\n   */\n  selected?: boolean;\n\n  /**\n   * Whether to separate the background of this item from other header items.\n   *\n   * > **Note**: Text buttons cannot share the background.\n   *\n   * This prop reverses the native behavior of `sharesBackground`.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n   *\n   * @default false\n   *\n   * @platform iOS 26+\n   */\n  separateBackground?: boolean;\n\n  /**\n   * Style for the label of the header item.\n   */\n  style?: StyleProp<BasicTextStyle>;\n\n  /**\n   * Tint color for the button icon and text.\n   */\n  tintColor?: ColorValue;\n\n  /**\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/style-swift.enum) for more information.\n   *\n   * @default 'plain'\n   */\n  variant?: 'plain' | 'done' | 'prominent';\n}\n\n// As noted in https://sebvidal.com/blog/whats-new-in-uikit-26/?utm_source=chatgpt.com#:~:text=It%27s%20worth%20noting%20that%2C%20at%20the%20time%20of%20writing%2C%20bar%20button%20badges%20are%20only%20supported%20in%20navigation%20bars%20%2D%20not%20tool%20bars.\n// currently badges are not supported in toolbars, and only in navigation bars.\n// Therefore, there is no badge support in ToolbarButton\n/**\n * A button component for use in the toolbar.\n * It should only be used as a child of `Toolbar`.\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <Toolbar.Button icon=\"magnifyingglass\" tintColor={Color.ios.placeholderText} />\n *   <Toolbar.Button>Text Button</Toolbar.Button>\n *   <Toolbar.Button hidden={!isSearchFocused} icon=\"xmark\" onPress={handleClear} />\n * </Toolbar>\n * ```\n *\n * @platform ios\n */\nexport const ToolbarButton = (props: ToolbarButtonProps) => {\n  const id = useId();\n  const areChildrenString = typeof props.children === 'string';\n  const label = areChildrenString\n    ? (props.children as string)\n    : getFirstChildOfType(props.children, Label)?.props.children;\n  const iconComponent =\n    !props.icon && !areChildrenString ? getFirstChildOfType(props.children, Icon) : undefined;\n  const icon =\n    props.icon ??\n    (iconComponent?.props && 'sf' in iconComponent.props ? iconComponent.props.sf : undefined);\n  const sf = typeof icon === 'string' ? icon : undefined;\n  return (\n    <RouterToolbarItem\n      accessibilityHint={props.accessibilityHint}\n      accessibilityLabel={props.accessibilityLabel}\n      barButtonItemStyle={props.variant === 'done' ? 'prominent' : props.variant}\n      disabled={props.disabled}\n      hidden={props.hidden}\n      hidesSharedBackground={props.hidesSharedBackground}\n      identifier={id}\n      onSelected={props.onPress}\n      possibleTitles={props.possibleTitles}\n      selected={props.selected}\n      sharesBackground={!props.separateBackground}\n      systemImageName={sf}\n      title={label}\n      tintColor={props.tintColor}\n      titleStyle={StyleSheet.flatten(props.style)}\n    />\n  );\n};\n\nexport type ToolbarSpacerProps = {\n  /**\n   * Whether to hide the shared background when `sharesBackground` is enabled.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n   *\n   * @platform iOS 26+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Whether the spacer should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * Whether the spacer shares the background with adjacent toolbar items.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n   *\n   * @platform iOS 26+\n   * @default false\n   */\n  sharesBackground?: boolean;\n  /**\n   * By default, the spacer is flexible and expands to fill available space.\n   * If a width is provided, it creates a [fixed-width spacer](https://developer.apple.com/documentation/uikit/uibarbuttonitem/fixedspace(_:)).\n   */\n  width?: number;\n};\n\n/**\n * A spacer component for the toolbar.\n * Without a width, it creates a flexible spacer that expands to fill available space.\n * With a width, it creates a fixed-width spacer.\n * It should only be used as a child of `Toolbar`.\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <Toolbar.Spacer />\n *   <Toolbar.Button icon=\"magnifyingglass\" />\n *   <Toolbar.Spacer width={20} />\n *   <Toolbar.Button icon=\"mic\" />\n *   <Toolbar.Spacer />\n * </Toolbar>\n * ```\n *\n * @platform ios\n */\nexport const ToolbarSpacer = (props: ToolbarSpacerProps) => {\n  const id = useId();\n  return (\n    <RouterToolbarItem\n      hidesSharedBackground={props.hidesSharedBackground}\n      hidden={props.hidden}\n      identifier={id}\n      sharesBackground={props.sharesBackground}\n      type={props.width ? 'fixedSpacer' : 'fluidSpacer'}\n      width={props.width}\n    />\n  );\n};\n\n/**\n * Props for the ToolbarView component.\n *\n * @platform ios\n */\nexport interface ToolbarViewProps {\n  /**\n   * React elements to render inside the toolbar view.\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the view should be hidden.\n   *\n   * @default false\n   */\n  hidden?: boolean;\n  /**\n   * Whether to hide the shared background when `sharesBackground` is enabled.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.\n   *\n   * @platform iOS 18+\n   */\n  hidesSharedBackground?: boolean;\n  /**\n   * Whether to separate the background of this item from other header items.\n   *\n   * This prop reverses the native behavior of `sharesBackground`.\n   *\n   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.\n   *\n   * @default false\n   *\n   * @platform iOS 26+\n   */\n  separateBackground?: boolean;\n}\n\n/**\n * A custom view component for the toolbar that can contain any React elements.\n * Useful for embedding custom components.\n * It should only be used as a child of `Toolbar`.\n *\n * The items within the view will be absolutely positioned, so flexbox styles will not work as expected.\n *\n * @example\n * ```tsx\n * <Toolbar>\n *   <Toolbar.Spacer />\n *   <Toolbar.View>\n *     <TextInput\n *       placeholder=\"Search\"\n *       placeholderTextColor={Color.ios.placeholderText}\n *     />\n *   </Toolbar.View>\n *   <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>\n *     <Pressable onPress={handlePress}>\n *       <SymbolView name=\"plus\" size={22} />\n *     </Pressable>\n *   </Toolbar.View>\n * </Toolbar>\n * ```\n *\n * @platform ios\n */\nexport const ToolbarView = ({\n  children,\n  hidden,\n  hidesSharedBackground,\n  separateBackground,\n}: ToolbarViewProps) => {\n  const id = useId();\n  return (\n    <RouterToolbarItem\n      hidesSharedBackground={hidesSharedBackground}\n      hidden={hidden}\n      identifier={id}\n      sharesBackground={!separateBackground}>\n      {children}\n    </RouterToolbarItem>\n  );\n};\n\nexport interface ToolbarProps {\n  children?: React.ReactNode;\n}\n\nexport const ToolbarHost = (props: ToolbarProps) => {\n  // TODO: Replace InternalLinkPreviewContext with a more generic context\n  return (\n    <InternalLinkPreviewContext value={{ isVisible: false, href: '' }}>\n      <RouterToolbarHost {...props} />\n    </InternalLinkPreviewContext>\n  );\n};\n"]}

package/build/toolbar/index.d.ts

@@ -1,9 +1,41 @@
-export declare const Toolbar: ((props: import("./elements").ToolbarHostProps) => import("react").JSX.Element) & {
-    Menu: import("react").FC<import("..").LinkMenuProps>;
+import { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarView } from './elements';
+/**
+ * A component that provides a [bottom toolbar](https://developer.apple.com/design/human-interface-guidelines/toolbars).
+ *
+ * @example
+ * ```tsx
+ * import { Toolbar } from "expo-router";
+ *
+ * export default function MyScreen() {
+ *   return (
+ *     <>
+ *       <YourScreenContent />
+ *       <Toolbar>
+ *         <Toolbar.Spacer />
+ *         <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
+ *         <Toolbar.View style={{ width: 200 }}>
+ *           <TextInput placeholder="Search" />
+ *         </Toolbar.View>
+ *         <Toolbar.Menu icon="ellipsis">
+ *           <Toolbar.MenuAction icon="mail" title="Send email" onPress={() => {}} />
+ *           <Toolbar.MenuAction icon="trash" title="Delete" destructive onPress={() => {}} />
+ *         </Toolbar.Menu>
+ *         <Toolbar.Spacer />
+ *       </Toolbar>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @platform ios
+ */
+export declare const Toolbar: ((props: import("./elements").ToolbarProps) => import("react").JSX.Element) & {
+    Menu: import("react").FC<import("./elements").ToolbarMenuProps>;
     MenuAction: typeof import("..").LinkMenuAction;
-    Button: ({ children, sf, onPress, ...rest }: import("./elements").ToolbarButtonProps) => import("react").JSX.Element;
-    Spacer: ({ width, ...rest }: import("./elements").ToolbarSpacerProps) => import("react").JSX.Element;
-    View: ({ children, style, ...rest }: import("./elements").ToolbarViewProps) => import("react").JSX.Element;
+    Button: (props: import("./elements").ToolbarButtonProps) => import("react").JSX.Element;
+    Spacer: (props: import("./elements").ToolbarSpacerProps) => import("react").JSX.Element;
+    View: ({ children, hidden, hidesSharedBackground, separateBackground, }: import("./elements").ToolbarViewProps) => import("react").JSX.Element;
 };
-export type { ToolbarHostProps, ToolbarMenuProps, ToolbarMenuActionProps, ToolbarButtonProps, ToolbarSpacerProps, ToolbarViewProps as ToolbarCustomViewProps, } from './elements';
+export { ToolbarMenu, ToolbarMenuAction, ToolbarButton, ToolbarSpacer, ToolbarView };
+export type { ToolbarProps, ToolbarMenuProps, ToolbarMenuActionProps, ToolbarButtonProps, ToolbarSpacerProps, ToolbarViewProps as ToolbarCustomViewProps, } from './elements';
 //# sourceMappingURL=index.d.ts.map

package/build/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC;AAEH,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,IAAI,sBAAsB,GAC3C,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,WAAW,EACZ,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,OAAO;;;;;;CAMlB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC;AAErF,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,IAAI,sBAAsB,GAC3C,MAAM,YAAY,CAAC"}