@onlynative/components 0.1.1-alpha.0 → 0.1.1-alpha.2

package/dist/appbar/index.d.ts

@@ -6,6 +6,19 @@ import '@expo/vector-icons/MaterialCommunityIcons';
 
 /** Size/layout variant of the AppBar. */
 type AppBarVariant = 'small' | 'center-aligned' | 'medium' | 'large';
+/**
+ * Color scheme that determines the default container and content colors.
+ *
+ * - `'surface'` — `surface` / `onSurface` (default, elevated uses `surfaceContainer`)
+ * - `'surfaceContainerLowest'` — `surfaceContainerLowest` / `onSurface`
+ * - `'surfaceContainerLow'` — `surfaceContainerLow` / `onSurface`
+ * - `'surfaceContainer'` — `surfaceContainer` / `onSurface`
+ * - `'surfaceContainerHigh'` — `surfaceContainerHigh` / `onSurface`
+ * - `'surfaceContainerHighest'` — `surfaceContainerHighest` / `onSurface`
+ * - `'primary'` — `primary` / `onPrimary`
+ * - `'primaryContainer'` — `primaryContainer` / `onPrimaryContainer`
+ */
+type AppBarColorScheme = 'surface' | 'surfaceContainerLowest' | 'surfaceContainerLow' | 'surfaceContainer' | 'surfaceContainerHigh' | 'surfaceContainerHighest' | 'primary' | 'primaryContainer';
 /** A single action item rendered in the AppBar trailing slot. */
 interface AppBarAction {
     /** MaterialCommunityIcons icon name to render. */
@@ -28,6 +41,12 @@ interface AppBarProps {
      * @default 'small'
      */
     variant?: AppBarVariant;
+    /**
+     * Color scheme that determines the default container and content colors.
+     * `containerColor` and `contentColor` props override these defaults.
+     * @default 'surface'
+     */
+    colorScheme?: AppBarColorScheme;
     /**
      * When `true`, renders a back button in the leading slot.
      * @default false
@@ -66,6 +85,6 @@ interface AppBarProps {
     style?: StyleProp<ViewStyle>;
 }
 
-declare function AppBar({ title, variant, canGoBack, onBackPress, insetTop, elevated, leading, trailing, actions, containerColor, contentColor, titleStyle, style, }: AppBarProps): react_jsx_runtime.JSX.Element;
+declare function AppBar({ title, variant, colorScheme, canGoBack, onBackPress, insetTop, elevated, leading, trailing, actions, containerColor, contentColor, titleStyle, style, }: AppBarProps): react_jsx_runtime.JSX.Element;
 
-export { AppBar, type AppBarAction, type AppBarProps, type AppBarVariant };
+export { AppBar, type AppBarAction, type AppBarColorScheme, type AppBarProps, type AppBarVariant };

package/dist/appbar/index.js

@@ -26,24 +26,98 @@ module.exports = __toCommonJS(appbar_exports);
 
 // src/appbar/AppBar.tsx
 var import_react3 = require("react");
-var import_react_native5 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_core4 = require("@onlynative/core");
 
 // src/icon-button/IconButton.tsx
 var import_react = require("react");
-var import_react_native2 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_core = require("@onlynative/core");
-var import_utils2 = require("@onlynative/utils");
 
-// src/icon-button/styles.ts
+// ../utils/dist/chunk-OQRDRRQA.mjs
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ../utils/dist/index.mjs
 var import_react_native = require("react-native");
-var import_utils = require("@onlynative/utils");
+var import_react_native2 = require("react-native");
+function parseHexColor(color) {
+  const normalized = color.replace("#", "");
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null;
+  }
+  return { r, g, b };
+}
+function clampAlpha(alpha) {
+  return Math.max(0, Math.min(1, alpha));
+}
+function alphaColor(color, alpha) {
+  const channels = parseHexColor(color);
+  const boundedAlpha = clampAlpha(alpha);
+  if (!channels) {
+    return color;
+  }
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
+}
+function blendColor(base, overlay, overlayAlpha) {
+  const baseChannels = parseHexColor(base);
+  const overlayChannels = parseHexColor(overlay);
+  const boundedAlpha = clampAlpha(overlayAlpha);
+  if (!baseChannels || !overlayChannels) {
+    return alphaColor(overlay, boundedAlpha);
+  }
+  const r = Math.round(
+    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
+  );
+  const g = Math.round(
+    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
+  );
+  const b = Math.round(
+    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
+  );
+  return `rgb(${r}, ${g}, ${b})`;
+}
+var _MCIcons = null;
+var _resolved = false;
+function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true;
+    try {
+      const mod = __require("@expo/vector-icons/MaterialCommunityIcons");
+      _MCIcons = mod.default || mod;
+    } catch {
+      _MCIcons = null;
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      "@expo/vector-icons is required for icon support. Install it with: npx expo install @expo/vector-icons"
+    );
+  }
+  return _MCIcons;
+}
+function selectRTL(ltr, rtl) {
+  return import_react_native2.I18nManager.isRTL ? rtl : ltr;
+}
+
+// src/icon-button/styles.ts
+var import_react_native3 = require("react-native");
 function createStyles(theme) {
-  const disabledContainerColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
-  const disabledOutlineColor = (0, import_utils.alphaColor)(theme.colors.onSurface, 0.12);
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
-  return import_react_native.StyleSheet.create({
+  return import_react_native3.StyleSheet.create({
     container: {
       borderRadius: theme.shape.cornerFull,
       alignItems: "center",
@@ -109,160 +183,160 @@ function createStyles(theme) {
     },
     // Hover states (M3: 8% state layer)
     hoveredFilled: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredFilledToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonal: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredTonalToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlined: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandard: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.hoveredOpacity
       )
     },
     hoveredStandardToggleSelected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.hoveredOpacity
       )
     },
     // Pressed states (M3: 12% state layer)
     pressedFilled: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedFilledToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.primary,
         theme.colors.onPrimary,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonal: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleUnselected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         toggleUnselectedContainerColor,
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedTonalToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.secondaryContainer,
         theme.colors.onSecondaryContainer,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlined: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedOutlinedToggleSelected: {
-      backgroundColor: (0, import_utils.blendColor)(
+      backgroundColor: blendColor(
         theme.colors.inverseSurface,
         theme.colors.inverseOnSurface,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandard: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleUnselected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.onSurfaceVariant,
         theme.stateLayer.pressedOpacity
       )
     },
     pressedStandardToggleSelected: {
-      backgroundColor: (0, import_utils.alphaColor)(
+      backgroundColor: alphaColor(
         theme.colors.primary,
         theme.stateLayer.pressedOpacity
       )
@@ -295,7 +369,7 @@ function createStyles(theme) {
 var import_jsx_runtime = require("react/jsx-runtime");
 function getIconColor(variant, theme, disabled, isToggle, selected) {
   if (disabled) {
-    return (0, import_utils2.alphaColor)(theme.colors.onSurface, 0.38);
+    return alphaColor(theme.colors.onSurface, 0.38);
   }
   if (isToggle) {
     if (variant === "filled") {
@@ -445,7 +519,7 @@ function IconButton({
   ...props
 }) {
   var _a;
-  const MaterialCommunityIcons = (0, import_utils2.getMaterialCommunityIcons)();
+  const MaterialCommunityIcons = getMaterialCommunityIcons();
   const theme = (0, import_core.useTheme)();
   const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
   const isDisabled = Boolean(disabled);
@@ -465,14 +539,14 @@ function IconButton({
         borderWidth: 0
       },
       hovered: {
-        backgroundColor: (0, import_utils2.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.hoveredOpacity
         )
       },
       pressed: {
-        backgroundColor: (0, import_utils2.blendColor)(
+        backgroundColor: blendColor(
           containerColor,
           overlay,
           theme.stateLayer.pressedOpacity
@@ -481,7 +555,7 @@ function IconButton({
     };
   }, [containerColor, resolvedIconColor, theme.stateLayer]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native2.Pressable,
+    import_react_native4.Pressable,
     {
       ...props,
       accessibilityRole: "button",
@@ -524,7 +598,7 @@ function IconButton({
 
 // src/typography/Typography.tsx
 var import_react2 = require("react");
-var import_react_native3 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_core2 = require("@onlynative/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var HEADING_VARIANTS = /* @__PURE__ */ new Set([
@@ -540,7 +614,7 @@ function Typography({
   variant = "bodyMedium",
   color,
   style,
-  as: Component = import_react_native3.Text,
+  as: Component = import_react_native5.Text,
   accessibilityRole,
   ...textProps
 }) {
@@ -549,7 +623,7 @@ function Typography({
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
   const lineHeightFix = (0, import_react2.useMemo)(() => {
     if (!style) return void 0;
-    const flat = import_react_native3.StyleSheet.flatten(style);
+    const flat = import_react_native5.StyleSheet.flatten(style);
     if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
     const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
     return { lineHeight: Math.ceil(flat.fontSize * ratio) };
@@ -571,27 +645,77 @@ function Typography({
   );
 }
 
-// src/appbar/AppBar.tsx
-var import_utils3 = require("@onlynative/utils");
-
 // src/appbar/styles.ts
-var import_react_native4 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_core3 = require("@onlynative/core");
-function createStyles2(theme) {
+function getColorSchemeColors(theme, colorScheme) {
+  switch (colorScheme) {
+    case "surfaceContainerLowest":
+      return {
+        containerColor: theme.colors.surfaceContainerLowest,
+        elevatedContainerColor: theme.colors.surfaceContainerLowest,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerLow":
+      return {
+        containerColor: theme.colors.surfaceContainerLow,
+        elevatedContainerColor: theme.colors.surfaceContainerLow,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainer":
+      return {
+        containerColor: theme.colors.surfaceContainer,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHigh":
+      return {
+        containerColor: theme.colors.surfaceContainerHigh,
+        elevatedContainerColor: theme.colors.surfaceContainerHigh,
+        contentColor: theme.colors.onSurface
+      };
+    case "surfaceContainerHighest":
+      return {
+        containerColor: theme.colors.surfaceContainerHighest,
+        elevatedContainerColor: theme.colors.surfaceContainerHighest,
+        contentColor: theme.colors.onSurface
+      };
+    case "primary":
+      return {
+        containerColor: theme.colors.primary,
+        elevatedContainerColor: theme.colors.primary,
+        contentColor: theme.colors.onPrimary
+      };
+    case "primaryContainer":
+      return {
+        containerColor: theme.colors.primaryContainer,
+        elevatedContainerColor: theme.colors.primaryContainer,
+        contentColor: theme.colors.onPrimaryContainer
+      };
+    case "surface":
+    default:
+      return {
+        containerColor: theme.colors.surface,
+        elevatedContainerColor: theme.colors.surfaceContainer,
+        contentColor: theme.colors.onSurface
+      };
+  }
+}
+function createStyles2(theme, schemeColors) {
   var _a;
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core3.defaultTopAppBarTokens;
-  return import_react_native4.StyleSheet.create({
+  return import_react_native6.StyleSheet.create({
     root: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     safeArea: {
-      backgroundColor: theme.colors.surface
+      backgroundColor: schemeColors.containerColor
     },
     elevatedRoot: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     elevatedSafeArea: {
-      backgroundColor: theme.colors.surfaceContainer
+      backgroundColor: schemeColors.elevatedContainerColor
     },
     smallContainer: {
       height: topAppBar.smallContainerHeight,
@@ -669,10 +793,10 @@ function createStyles2(theme) {
 // src/appbar/AppBar.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getBackIcon() {
-  if (import_react_native5.Platform.OS === "ios") {
-    return (0, import_utils3.selectRTL)("chevron-left", "chevron-right");
+  if (import_react_native7.Platform.OS === "ios") {
+    return selectRTL("chevron-left", "chevron-right");
   }
-  return (0, import_utils3.selectRTL)("arrow-left", "arrow-right");
+  return selectRTL("arrow-left", "arrow-right");
 }
 var titleVariantBySize = {
   small: "titleLarge",
@@ -700,7 +824,7 @@ function withTopInset(enabled, content, style) {
   if (enabled) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaView, { edges: ["top"], style, children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style, children: content });
 }
 function measureWidth(event) {
   return Math.round(event.nativeEvent.layout.width);
@@ -708,6 +832,7 @@ function measureWidth(event) {
 function AppBar({
   title,
   variant = "small",
+  colorScheme = "surface",
   canGoBack = false,
   onBackPress,
   insetTop = false,
@@ -723,12 +848,20 @@ function AppBar({
   var _a;
   const theme = (0, import_core4.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core4.defaultTopAppBarTokens;
-  const styles = (0, import_react3.useMemo)(() => createStyles2(theme), [theme]);
+  const schemeColors = (0, import_react3.useMemo)(
+    () => getColorSchemeColors(theme, colorScheme),
+    [theme, colorScheme]
+  );
+  const resolvedContentColor = contentColor != null ? contentColor : schemeColors.contentColor;
+  const styles = (0, import_react3.useMemo)(
+    () => createStyles2(theme, schemeColors),
+    [theme, schemeColors]
+  );
   const [leadingWidth, setLeadingWidth] = (0, import_react3.useState)(0);
   const [actionsWidth, setActionsWidth] = (0, import_react3.useState)(0);
   const titleColorStyle = (0, import_react3.useMemo)(
-    () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
-    [contentColor, theme.colors.onSurface]
+    () => ({ color: resolvedContentColor }),
+    [resolvedContentColor]
   );
   const size = resolveSize(variant);
   const titleVariant = titleVariantBySize[size];
@@ -752,25 +885,18 @@ function AppBar({
     if (!canGoBack) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       IconButton,
       {
         icon: getBackIcon(),
         size: "medium",
         variant: "standard",
-        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        iconColor: resolvedContentColor,
         accessibilityLabel: "Go back",
         onPress: onBackPress
       }
     ) });
-  }, [
-    canGoBack,
-    contentColor,
-    leading,
-    onBackPress,
-    styles.iconFrame,
-    theme.colors.onSurface
-  ]);
+  }, [canGoBack, resolvedContentColor, leading, onBackPress, styles.iconFrame]);
   const actionsContent = (0, import_react3.useMemo)(() => {
     if (trailing) {
       return trailing;
@@ -778,8 +904,8 @@ function AppBar({
     if (!actions || actions.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native5.View,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native7.View,
       {
         style: styles.iconFrame,
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -788,7 +914,7 @@ function AppBar({
             icon: action.icon,
             size: "medium",
             variant: "standard",
-            iconColor: contentColor,
+            iconColor: resolvedContentColor,
             accessibilityLabel: action.accessibilityLabel,
             onPress: action.onPress,
             disabled: action.disabled
@@ -797,7 +923,7 @@ function AppBar({
       },
       `${String(action.icon)}-${index}`
     )) });
-  }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing]);
+  }, [actions, resolvedContentColor, styles.actionsRow, styles.iconFrame, trailing]);
   const onLeadingLayout = (0, import_react3.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
@@ -816,9 +942,9 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: styles.topRow, children: [
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: styles.topRow, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native5.View,
+      import_react_native7.View,
       {
         collapsable: false,
         onLayout: onLeadingLayout,
@@ -826,9 +952,9 @@ function AppBar({
         children: leadingContent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: styles.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: styles.topRowSpacer }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_react_native5.View,
+      import_react_native7.View,
       {
         collapsable: false,
         onLayout: onActionsLayout,
@@ -850,10 +976,10 @@ function AppBar({
     containerOverride
   ];
   if (isExpanded) {
-    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
       topRow,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native5.View,
+        import_react_native7.View,
         {
           style: [
             styles.expandedTitleContainer,
@@ -877,11 +1003,11 @@ function AppBar({
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native5.View, { style: styles.smallContainer, children: [
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native7.View, { style: styles.smallContainer, children: [
     topRow,
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       Typography,
       {
         ...APP_BAR_TITLE_TEXT_PROPS,
@@ -896,7 +1022,7 @@ function AppBar({
       }
     ) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native7.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {