@expo/ui 58.0.21 → 58.0.22

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.21/expo.modules.ui-58.0.21.module → 58.0.22/expo.modules.ui-58.0.22.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "58.0.21",
+    "version": "58.0.22",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.21.aar",
-          "url": "expo.modules.ui-58.0.21.aar",
-          "size": 1861060,
-          "sha512": "61d884b5f7528ac4d2791cebbdc45eefa1bfaf4eca17faf37b322a58a5670b042b1096a860bba051adb4a9d95334f227a9ea8f69473289d7a7725ea2600d7c48",
-          "sha256": "83f788f94510400d5695ee901721e3cef284309da751b00c9df7eeb8e4fdd5ca",
-          "sha1": "0a7945dfaec70218a5a6ed678049dd831dde7c23",
-          "md5": "485ed53072102e73937c25dae52b054c"
+          "name": "expo.modules.ui-58.0.22.aar",
+          "url": "expo.modules.ui-58.0.22.aar",
+          "size": 1882334,
+          "sha512": "0a89be2233ee1dd16b1cb671e0694d6d9a428f7f199e3e3efcdd621090c541d435478b39402a6da271373a70cbed690f989e938ebcbbcd35b740e1bf240dfb64",
+          "sha256": "59cc7013ee6674f030b4f81641fa80fb1829815d6ab5a7903f0e7479e6adb96e",
+          "sha1": "7acd625f3cd50ad228fac699424fcff3c77942bb",
+          "md5": "6b7272e2ff6f2f155c76a4e7a3341af6"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-58.0.21.aar",
-          "url": "expo.modules.ui-58.0.21.aar",
-          "size": 1861060,
-          "sha512": "61d884b5f7528ac4d2791cebbdc45eefa1bfaf4eca17faf37b322a58a5670b042b1096a860bba051adb4a9d95334f227a9ea8f69473289d7a7725ea2600d7c48",
-          "sha256": "83f788f94510400d5695ee901721e3cef284309da751b00c9df7eeb8e4fdd5ca",
-          "sha1": "0a7945dfaec70218a5a6ed678049dd831dde7c23",
-          "md5": "485ed53072102e73937c25dae52b054c"
+          "name": "expo.modules.ui-58.0.22.aar",
+          "url": "expo.modules.ui-58.0.22.aar",
+          "size": 1882334,
+          "sha512": "0a89be2233ee1dd16b1cb671e0694d6d9a428f7f199e3e3efcdd621090c541d435478b39402a6da271373a70cbed690f989e938ebcbbcd35b740e1bf240dfb64",
+          "sha256": "59cc7013ee6674f030b4f81641fa80fb1829815d6ab5a7903f0e7479e6adb96e",
+          "sha1": "7acd625f3cd50ad228fac699424fcff3c77942bb",
+          "md5": "6b7272e2ff6f2f155c76a4e7a3341af6"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.21-sources.jar",
-          "url": "expo.modules.ui-58.0.21-sources.jar",
-          "size": 113113,
-          "sha512": "10ed672c04082cf5f06e6ca6dca0f28229f11f3d503d46e5b61dbc7d3ad50bfdc1399838dd38dc5b8c1643ec375c4bf1672c95606ce28f7ed36384f66b829b68",
-          "sha256": "f9a24faad34f9f66bebcdde7d05a6cf72a8b4b9030819b80049de5084a694ef0",
-          "sha1": "5d7c4fd251da7578f23af5102d539533aefb3e64",
-          "md5": "83ac1d8d00a142a3ffa834c4a6c1db65"
+          "name": "expo.modules.ui-58.0.22-sources.jar",
+          "url": "expo.modules.ui-58.0.22-sources.jar",
+          "size": 115385,
+          "sha512": "6c228c1dcbe9ee23cca52ba20eb724d39d18533e6c31ad738ab5738e5dfc64432b7c79363f7ff772f019f8bda955d0d38ccb3f4331d3236e4beddd70e6e426f4",
+          "sha256": "2487d657c68bf866e677ef379bc97b7de37edb41eb173b6d8d938b81bfcb2293",
+          "sha1": "a1628408f238e018286c0c9887ebb3cf9912577d",
+          "md5": "3367880bd9dfec581496b8b5087f9ae0"
         }
       ]
     }

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.module.md5

@@ -0,0 +1 @@
+9c0bd2c795559f590e2efcec2bfbdd40

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.module.sha1

@@ -0,0 +1 @@
+0ca2cbc2529c5570d31a5cbd827f2b9c58602e25

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.module.sha256

@@ -0,0 +1 @@
+113bc88759a3cbbb991dc12571a1b53722855970232edf6508469dc52c822423

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.module.sha512

@@ -0,0 +1 @@
+ef4e3b199c2d69deab60d857ef81dc8c786f2bdc5a4321e9397111507d9f235c8575cd91289d8c612666b901cadd7aeca414aece1769dca15ec2088f5b8c0cb4

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.21/expo.modules.ui-58.0.21.pom → 58.0.22/expo.modules.ui-58.0.22.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>58.0.21</version>
+  <version>58.0.22</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.pom.md5

@@ -0,0 +1 @@
+1fc7977e8379c6c817fa7524ff7db31f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.pom.sha1

@@ -0,0 +1 @@
+2a13240cd35aa73ed4d9787b4a70cbe0453431dd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.pom.sha256

@@ -0,0 +1 @@
+c15bb9d564da8ea75a501e89d3c855df5294966438d81168675388dab731e23e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.22/expo.modules.ui-58.0.22.pom.sha512

@@ -0,0 +1 @@
+a1a75142fcd486afa2e7bd2f27cdc21e1997cb309fb762963b61e65c88fd6e5a62af5234f448b485b0a2f3081f74eb1c8664e9d08a1f1a445ca2c62639e7f3f1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "58.0.21",
+  "version": "58.0.22",
   "description": "A collection of UI components",
   "keywords": [
     "Jetpack Compose",
@@ -141,7 +141,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
-    "@expo/internal-scripts": "58.0.3",
+    "@expo/internal-scripts": "58.0.4",
     "@playwright/test": "^1.59.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-native": "^14.0.1",

package/src/community/bottom-sheet/BottomSheet.ios.tsx

@@ -135,10 +135,14 @@ export function BottomSheet(props: BottomSheetProps) {
     } else if (indexProp >= 0) {
       closedRef.current = false;
       setIsPresented(true);
-      const clampedIndex = Math.min(indexProp, detents.length - 1);
-      setCurrentIndex(clampedIndex);
-      currentIndexRef.current = clampedIndex;
     }
+  }, [indexProp]);
+
+  useEffect(() => {
+    const requestedIndex = indexProp >= 0 ? indexProp : currentIndexRef.current;
+    const clampedIndex = Math.min(requestedIndex, detents.length - 1);
+    setCurrentIndex(clampedIndex);
+    currentIndexRef.current = clampedIndex;
   }, [indexProp, detents.length]);
 
   const handlePresentedChange = useCallback((presented: boolean) => {

package/src/community/pager-view/PagerView.ios.tsx

@@ -9,7 +9,7 @@ import {
   useState,
   type ReactElement,
 } from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { useNativeState, worklets } from '../../State';
 import { Group } from '../../swift-ui/Group';
@@ -89,6 +89,12 @@ export function PagerView(props: PagerViewProps) {
   const pageCountRef = useRef(0);
   pageCountRef.current = pageCount;
 
+  const isScrollingRef = useRef(false);
+  // The SwiftUI scroll doesn't cancel React Native touches on its pages. Like
+  // React Native's `ScrollView`, take the touch from the page content while
+  // the pager moves, so a swipe or a tap that stops it doesn't press anything.
+  const shouldCaptureTouch = () => isScrollingRef.current;
+
   // Clamp on first render — out-of-range initials produce an id that matches
   // no `Group`, leaving `.scrollPosition(id:)` silently stuck at 0.
   const [clampedInitialPage] = useState(() => {
@@ -188,17 +194,24 @@ export function PagerView(props: PagerViewProps) {
   );
   const geometryModifier = useScrollGeometryChange(handleScrollGeometry);
 
-  const phaseModifier = onPageScrollStateChanged
-    ? onScrollPhaseChange((phase) =>
-        onPageScrollStateChanged(wrapNativeEvent({ pageScrollState: phaseToPageState(phase) }))
-      )
-    : null;
+  const phaseModifier = onScrollPhaseChange((phase) => {
+    const pageScrollState = phaseToPageState(phase);
+    isScrollingRef.current = pageScrollState !== 'idle';
+    onPageScrollStateChanged?.(wrapNativeEvent({ pageScrollState }));
+  });
 
   const pages = validChildren.map((child, index) => (
     <Group
       key={child.key ?? String(index)}
       modifiers={[containerRelativeFrame({ axes: 'horizontal' }), id(String(index))]}>
-      <RNHostView>{child}</RNHostView>
+      <RNHostView>
+        <View
+          style={styles.page}
+          onStartShouldSetResponderCapture={shouldCaptureTouch}
+          onMoveShouldSetResponderCapture={shouldCaptureTouch}>
+          {child}
+        </View>
+      </RNHostView>
     </Group>
   ));
 
@@ -209,7 +222,7 @@ export function PagerView(props: PagerViewProps) {
     scrollDisabled(!scrollEnabledState),
     scrollPosition(activePageState, { onChange: handleScrolledIDChange }),
     ...(geometryModifier ? [geometryModifier] : []),
-    ...(phaseModifier ? [phaseModifier] : []),
+    phaseModifier,
   ];
 
   return (
@@ -271,3 +284,7 @@ function warnIfPreIOS18ScrollCallbacksDropped(
     );
   }
 }
+
+const styles = StyleSheet.create({
+  page: { flex: 1 },
+});

package/src/community/segmented-control/SegmentedControl.ios.tsx

@@ -1,7 +1,11 @@
 import { Host } from '../../swift-ui/Host';
 import { Picker } from '../../swift-ui/Picker';
 import { Text } from '../../swift-ui/Text';
-import { disabled as disabledModifier } from '../../swift-ui/modifiers';
+import {
+  accessibilityLabel as accessibilityLabelModifier,
+  disabled as disabledModifier,
+} from '../../swift-ui/modifiers';
+import { createModifier } from '../../swift-ui/modifiers/createModifier';
 import { environment } from '../../swift-ui/modifiers/environment';
 import { pickerStyle } from '../../swift-ui/modifiers/pickerStyle';
 import { tag } from '../../swift-ui/modifiers/tag';
@@ -15,15 +19,23 @@ export function SegmentedControl(props: SegmentedControlProps) {
     enabled = true,
     onChange,
     onValueChange,
+    tintColor,
     appearance,
     style,
     testID,
+    accessibilityLabel,
   } = props;
 
   const modifiers: ModifierConfig[] = [pickerStyle('segmented')];
   if (!enabled) {
     modifiers.push(disabledModifier());
   }
+  if (accessibilityLabel) {
+    modifiers.push(accessibilityLabelModifier(accessibilityLabel));
+  }
+  if (tintColor) {
+    modifiers.push(createModifier('selectedSegmentTintColor', { color: tintColor }));
+  }
   if (appearance) {
     modifiers.push(environment('colorScheme', appearance));
   }

package/src/community/segmented-control/types.tsx

@@ -43,7 +43,6 @@ export interface SegmentedControlProps {
   onValueChange?: (value: string) => void;
   /**
    * Accent color of the control.
-   * @platform android, web
    */
   tintColor?: string;
   /**
@@ -52,6 +51,11 @@ export interface SegmentedControlProps {
   appearance?: 'dark' | 'light';
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /**
+   * The name of the control that screen readers announce.
+   * @platform ios
+   */
+  accessibilityLabel?: string;
 }
 
 /**

package/src/jetpack-compose/CompositionLocalProvider/index.tsx

@@ -0,0 +1,43 @@
+import { requireNativeView } from 'expo';
+import type { ReactNode } from 'react';
+
+/**
+ * Composition local values that `CompositionLocalProvider` can provide.
+ */
+export type CompositionLocalValues = {
+  /**
+   * The minimum size, in dp, that Material components such as `Button`, `IconButton`, `Checkbox`, and
+   * `Switch` reserve for their touch target. Maps to `LocalMinimumInteractiveComponentSize`.
+   * Set it to `0` to let these components be smaller than Material's default of 48dp.
+   */
+  minimumInteractiveComponentSize?: number;
+};
+
+export type CompositionLocalProviderProps = {
+  /**
+   * The values to provide to the children.
+   */
+  values: CompositionLocalValues;
+  /**
+   * The content that receives the values.
+   */
+  children?: ReactNode;
+};
+
+type NativeCompositionLocalProviderProps = CompositionLocalValues & {
+  children?: ReactNode;
+};
+
+const CompositionLocalProviderNativeView: React.ComponentType<NativeCompositionLocalProviderProps> =
+  requireNativeView('ExpoUI', 'CompositionLocalProviderView');
+
+/**
+ * Provides composition local values to its children, like Jetpack Compose's `CompositionLocalProvider`.
+ * It adds no layout of its own, so children keep modifiers such as `weight` from the parent `Row`
+ * or `Column`.
+ */
+export function CompositionLocalProvider({ values, children }: CompositionLocalProviderProps) {
+  return (
+    <CompositionLocalProviderNativeView {...values}>{children}</CompositionLocalProviderNativeView>
+  );
+}

package/src/jetpack-compose/Host/index.tsx

@@ -6,13 +6,19 @@ import {
   type StyleProp,
   type ViewStyle,
   I18nManager,
+  processColor,
   useColorScheme as useRNColorScheme,
 } from 'react-native';
 
 import { NativeTreeContext, useWarnIfNestedHost } from '../../NativeTreeContext';
 import { TextInputHostProvider, useTextInputHostRef } from '../../keyboard';
 import { useMergeRefs } from '../../utils/useMergeRefs';
-import { getMaterialColors, HostPaletteContext } from '../colors';
+import {
+  getMaterialColors,
+  HostPaletteContext,
+  type MaterialColors,
+  type RgbaHex,
+} from '../colors';
 import { type PrimitiveBaseProps } from '../layout';
 
 export interface HostProps extends PrimitiveBaseProps {
@@ -52,6 +58,14 @@ export interface HostProps extends PrimitiveBaseProps {
    */
   seedColor?: ColorValue;
 
+  /**
+   * Material 3 color roles that replace the matching roles of the palette from
+   * `colorScheme` and `seedColor`. Roles you omit keep their palette value.
+   * The overrides theme Compose children and are returned by `useMaterialColors()`
+   * in the same `#RRGGBBAA` form as the other roles.
+   */
+  colorOverrides?: Partial<MaterialColors>;
+
   /**
    * The layout direction for the content.
    * Defaults to the current locale direction from I18nManager.
@@ -93,6 +107,7 @@ export function Host(props: HostProps) {
     layoutDirection,
     colorScheme,
     seedColor,
+    colorOverrides,
     ref,
     children,
     ...restProps
@@ -101,10 +116,19 @@ export function Host(props: HostProps) {
 
   const systemScheme = useRNColorScheme();
   const resolvedScheme = schemeString ?? (systemScheme === 'dark' ? 'dark' : 'light');
-  const palette = useMemo(
-    () => getMaterialColors({ scheme: resolvedScheme, seedColor }),
-    [resolvedScheme, seedColor]
+  // Key on the normalized values, not the object, so an inline `colorOverrides` object keeps
+  // the palette from `useMaterialColors()` reference-stable across re-renders.
+  const overridesKey = colorOverrides
+    ? JSON.stringify(normalizeColorOverrides(colorOverrides))
+    : null;
+  const normalizedOverrides = useMemo<Partial<MaterialColors> | undefined>(
+    () => (overridesKey ? JSON.parse(overridesKey) : undefined),
+    [overridesKey]
   );
+  const palette = useMemo(() => {
+    const basePalette = getMaterialColors({ scheme: resolvedScheme, seedColor });
+    return normalizedOverrides ? { ...basePalette, ...normalizedOverrides } : basePalette;
+  }, [resolvedScheme, seedColor, normalizedOverrides]);
   const hostRef = useTextInputHostRef();
   const mergedRef = useMergeRefs(ref, hostRef);
   useWarnIfNestedHost('Jetpack Compose');
@@ -123,6 +147,7 @@ export function Host(props: HostProps) {
           }
           colorScheme={schemeString}
           seedColor={seedColor}
+          colorOverrides={normalizedOverrides}
           onLayoutContent={onLayoutContent}
           layoutDirection={
             layoutDirection ?? (I18nManager.getConstants().isRTL ? 'rightToLeft' : 'leftToRight')
@@ -134,3 +159,24 @@ export function Host(props: HostProps) {
     </HostPaletteContext.Provider>
   );
 }
+
+function normalizeColorOverrides(overrides: Partial<MaterialColors>): Partial<MaterialColors> {
+  const normalized: Partial<MaterialColors> = {};
+  for (const [role, color] of Object.entries(overrides) as [keyof MaterialColors, RgbaHex][]) {
+    const hex = color != null ? toRgbaHex(color) : null;
+    if (hex) {
+      normalized[role] = hex;
+    }
+  }
+  return normalized;
+}
+
+// `processColor` returns `0xAARRGGBB`; the palette uses `#RRGGBBAA` like native `toTokenMap()`.
+function toRgbaHex(color: RgbaHex): RgbaHex | null {
+  const argb = processColor(color);
+  if (typeof argb !== 'number') {
+    return null;
+  }
+  const rgba = ((argb << 8) | (argb >>> 24)) >>> 0;
+  return `#${rgba.toString(16).padStart(8, '0').toUpperCase()}`;
+}

package/src/jetpack-compose/Switch/index.tsx

@@ -39,6 +39,8 @@ export interface SwitchProps {
   enabled?: boolean;
   /**
    * Callback function that is called when the checked state changes.
+   * When omitted, the switch is not interactive on its own, so a parent with the
+   * `toggleable` modifier can handle input and accessibility for it.
    */
   onCheckedChange?: (value: boolean) => void;
   /**
@@ -58,6 +60,7 @@ export interface SwitchProps {
 
 type NativeSwitchProps = Omit<SwitchProps, 'onCheckedChange' | 'children'> & {
   children?: React.ReactNode;
+  nativeClickable: boolean;
   onCheckedChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
 };
 
@@ -94,6 +97,7 @@ function transformSwitchProps(props: SwitchProps): Omit<NativeSwitchProps, 'chil
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    nativeClickable: onCheckedChange != null,
     onCheckedChange: ({ nativeEvent: { value } }) => {
       onCheckedChange?.(value);
     },

package/src/jetpack-compose/TopAppBar/index.tsx

@@ -0,0 +1,113 @@
+import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
+
+import type { ExpoModifier } from '../../types';
+import type { PaddingValuesRecord } from '../Carousel';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type { PaddingValuesRecord };
+
+/**
+ * Colors for the top app bar.
+ */
+export type TopAppBarColors = {
+  /**
+   * Color of the container (background).
+   */
+  containerColor?: ColorValue;
+  /**
+   * Color of the navigation icon.
+   */
+  navigationIconContentColor?: ColorValue;
+  /**
+   * Color of the title.
+   */
+  titleContentColor?: ColorValue;
+  /**
+   * Color of the action icons.
+   */
+  actionIconContentColor?: ColorValue;
+};
+
+export interface TopAppBarProps {
+  /**
+   * Colors for the app bar. Unset colors use `TopAppBarDefaults.topAppBarColors()`.
+   */
+  colors?: TopAppBarColors;
+  /**
+   * Insets in dp that the app bar adds around its content. Missing sides are `0`.
+   * When omitted, the app bar uses `TopAppBarDefaults.windowInsets`, which assumes
+   * the bar is at the top edge of the window, even inside a nested `Host`.
+   * Pass `{}` when a parent handles the insets. This removes both the top status
+   * bar inset and the horizontal system bar and display cutout insets.
+   */
+  windowInsets?: PaddingValuesRecord;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ExpoModifier[];
+  /**
+   * `TopAppBar.Title`, `TopAppBar.NavigationIcon`, and `TopAppBar.Actions` slots.
+   */
+  children: React.ReactNode;
+}
+
+type SlotProps = {
+  children: React.ReactNode;
+};
+
+type NativeSlotViewProps = {
+  slotName: string;
+  children: React.ReactNode;
+};
+
+const TopAppBarNativeView: React.ComponentType<TopAppBarProps> = requireNativeView(
+  'ExpoUI',
+  'TopAppBarView'
+);
+
+const SlotNativeView: React.ComponentType<NativeSlotViewProps> = requireNativeView(
+  'ExpoUI',
+  'SlotView'
+);
+
+/**
+ * Title slot for `TopAppBar`.
+ */
+function TopAppBarTitle(props: SlotProps) {
+  return <SlotNativeView slotName="title">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Navigation icon slot for `TopAppBar`. It appears at the start of the app bar.
+ */
+function TopAppBarNavigationIcon(props: SlotProps) {
+  return <SlotNativeView slotName="navigationIcon">{props.children}</SlotNativeView>;
+}
+
+/**
+ * Actions slot for `TopAppBar`. Its children appear in a row at the end of the app bar.
+ */
+function TopAppBarActions(props: SlotProps) {
+  return <SlotNativeView slotName="actions">{props.children}</SlotNativeView>;
+}
+
+/**
+ * A Material 3 small top app bar that shows a title, a navigation icon, and actions.
+ */
+function TopAppBar(props: TopAppBarProps) {
+  const { modifiers, ...restProps } = props;
+  return (
+    <TopAppBarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}
+
+TopAppBar.Title = TopAppBarTitle;
+TopAppBar.NavigationIcon = TopAppBarNavigationIcon;
+TopAppBar.Actions = TopAppBarActions;
+
+export { TopAppBar };

package/src/jetpack-compose/index.ts

@@ -59,6 +59,7 @@ export * from './SearchBar';
 export * from './Snackbar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
+export * from './TopAppBar';
 export * from './FloatingActionButton';
 export * from './PullToRefreshBox';
 export * from './RadioButton';
@@ -71,6 +72,7 @@ export * from './AnimatedVisibility';
 export * from './Box';
 export * from './Row';
 export * from './Column';
+export * from './CompositionLocalProvider';
 export * from './FlowRow';
 export { useNativeState, useWorkletCallback, type WorkletCallback } from '../State';
 export type { ViewEvent } from '../types';

package/src/jetpack-compose/modifiers/index.ts

@@ -403,13 +403,21 @@ export const selectableGroup = () => createModifier('selectableGroup');
  * @param value - The current toggle state.
  * @param handler - Function to call when toggled.
  * @param options - Optional configuration.
- * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`, `'switch'`, or `'tab'`.
+ * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`,
+ * `'switch'`, or `'tab'`.
+ * @param options.enabled - Whether the view responds to input and is reported as enabled to
+ * accessibility services. Defaults to `true`.
  */
 export const toggleable = (
   value: boolean,
   handler: () => void,
-  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab' }
-) => createModifierWithEventListener('toggleable', handler, { value, role: options?.role });
+  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab'; enabled?: boolean }
+) =>
+  createModifierWithEventListener('toggleable', handler, {
+    value,
+    role: options?.role,
+    enabled: options?.enabled,
+  });
 
 // =============================================================================
 // Lifecycle Modifiers

package/src/swift-ui/BottomSheet/index.tsx

@@ -18,6 +18,12 @@ export interface BottomSheetProps extends CommonViewModifierProps {
    * kept mounted, so presenting the sheet doesn't shift surrounding layout. Optional.
    */
   anchor?: ReactNode;
+  /**
+   * A view that fills the whole sheet behind its content, for example a `Rectangle` filled with a
+   * material. Unlike the `presentationBackground` modifier, a material in a view stays translucent
+   * on iOS 26 and later.
+   */
+  presentationBackground?: ReactNode;
   /**
    * Whether the `BottomSheet` is presented.
    */
@@ -40,7 +46,7 @@ export interface BottomSheetProps extends CommonViewModifierProps {
 
 type NativeBottomSheetProps = Omit<
   BottomSheetProps,
-  'onIsPresentedChange' | 'onDismiss' | 'anchor'
+  'onIsPresentedChange' | 'onDismiss' | 'anchor' | 'presentationBackground'
 > & {
   onIsPresentedChange: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
   onDismiss: (event: NativeSyntheticEvent<object>) => void;
@@ -55,7 +61,15 @@ const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNati
  * `BottomSheet` presents content from the bottom of the screen.
  */
 function BottomSheet(props: BottomSheetProps) {
-  const { modifiers, onIsPresentedChange, onDismiss, anchor, children, ...restProps } = props;
+  const {
+    modifiers,
+    onIsPresentedChange,
+    onDismiss,
+    anchor,
+    presentationBackground,
+    children,
+    ...restProps
+  } = props;
   const [isMounted, setIsMounted] = useState(props.isPresented);
 
   if (props.isPresented && !isMounted) {
@@ -79,7 +93,14 @@ function BottomSheet(props: BottomSheetProps) {
       {anchor != null ? <Slot name="anchor">{anchor}</Slot> : null}
       {/* Only the sheet's content is presented in its own view controller. The anchor renders in
           place, in the React Native surface, so it stays outside `PresentedContent`. */}
-      {isMounted ? <PresentedContent>{children}</PresentedContent> : null}
+      {isMounted ? (
+        <PresentedContent>
+          {presentationBackground != null ? (
+            <Slot name="presentationBackground">{presentationBackground}</Slot>
+          ) : null}
+          {children}
+        </PresentedContent>
+      ) : null}
     </BottomSheetNativeView>
   );
 }