@oxyhq/bloom 0.50.1 → 0.51.0

package/lib/typescript/module/toast/use-toast-colors.d.ts

@@ -0,0 +1,22 @@
+import type { ToastVariant } from './types';
+export type ToastActionColors = {
+    background: string;
+    text: string;
+    pressedBackground: string;
+    pressedText: string;
+};
+export type ToastColors = {
+    surface: string;
+    border: string;
+    title: string;
+    description: string;
+    icon: string;
+    closeButton: string;
+    action: ToastActionColors;
+    cancelText: string;
+};
+export declare function useToastColors({ variant, richColors, }: {
+    variant: ToastVariant | undefined;
+    richColors: boolean;
+}): ToastColors;
+//# sourceMappingURL=use-toast-colors.d.ts.map

package/lib/typescript/module/toast/use-toast-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast-colors.d.ts","sourceRoot":"","sources":["../../../../src/toast/use-toast-colors.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAoEF,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,UAAU,GACX,EAAE;IACD,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;CACrB,GAAG,WAAW,CAMd"}

package/lib/typescript/module/toast/use-toast-position.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/use-toast-position.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Upstream computes the row's offset inside a `useDerivedValue` worklet and
+ * returns `withTiming(...)` from it, which does not animate on web. Bloom computes
+ * the target in plain JS — `calculateToastPosition` is pure and unit-tested — and
+ * hands it to `useAnimatedTarget`, which drives the shared value imperatively. See
+ * that file for the full reasoning.
+ *
+ * Two dependency traps disappear with the worklet:
+ *
+ *  - No memo and no dependency array. The target is a NUMBER, and
+ *    `useAnimatedTarget` keys its effect on that number, so recomputing a pure
+ *    O(visibleToasts) sum on every render costs nothing and cannot go stale.
+ *    Upstream needs a deps array (including a joined `orderedToastIds` key) purely
+ *    because a mapper has no other way to know when to re-run.
+ *  - No `toastHeightsVersion`. The store creates a new `toastHeights` OBJECT on
+ *    every mutation, and React re-renders on that; the manual version counter only
+ *    existed because a mapper cannot observe a plain object. The invariant that
+ *    replaces it is ordinary React — the store must never mutate `toastHeights` in
+ *    place — pinned by `toast-store.test.ts`.
+ */
+import type { SharedValue } from 'react-native-reanimated';
+import type { ToastPosition } from './types';
+export declare const useToastPosition: (params: {
+    index: number;
+    numberOfToasts: number;
+    enableStacking: boolean;
+    position: ToastPosition;
+    allToastHeights: Record<string | number, number>;
+    gap: number;
+    orderedToastIds: Array<string | number>;
+    isExpanded: boolean;
+    stackGap: number;
+}) => SharedValue<number>;
+//# sourceMappingURL=use-toast-position.d.ts.map

package/lib/typescript/module/toast/use-toast-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toast-position.d.ts","sourceRoot":"","sources":["../../../../src/toast/use-toast-position.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAK3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,eAAO,MAAM,gBAAgB,GAAI,QAAQ;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,KAAG,WAAW,CAAC,MAAM,CAIlB,CAAC"}

package/lib/typescript/module/tooltip/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/index.web.tsx"],"names":[],"mappings":"AA0BA;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAEA;yBANe,0BAA0B;;;AAS1C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,QAAmB,EACnB,OAAO,EACP,eAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,2CAkBA;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMzE;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,kDAgEA;AAED,eAAO,MAAM,iBAAiB;;6CAAmC,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/index.web.tsx"],"names":[],"mappings":"AA2BA;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAEA;yBANe,0BAA0B;;;AAS1C,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,QAAmB,EACnB,OAAO,EACP,eAAe,GAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C,2CAkBA;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAMzE;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,kDAgEA;AAED,eAAO,MAAM,iBAAiB;;6CAAmC,CAAC"}

package/lib/typescript/module/zoomable-image-gallery/ZoomableImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAiEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAu3BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAwK9D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAkEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA44BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.50.1",
+  "version": "0.51.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -334,11 +334,6 @@
     },
     "./toast": {
       "react-native": "./src/toast/index.tsx",
-      "browser": {
-        "types": "./lib/typescript/module/toast/index.web.d.ts",
-        "import": "./lib/module/toast/index.web.js",
-        "require": "./lib/commonjs/toast/index.web.js"
-      },
       "import": {
         "types": "./lib/typescript/module/toast/index.d.ts",
         "default": "./lib/module/toast/index.js"
@@ -1012,12 +1007,56 @@
         "default": "./lib/commonjs/list/index.js"
       }
     },
+    "./tab-bar": {
+      "react-native": "./src/tab-bar/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/tab-bar/index.web.d.ts",
+        "import": "./lib/module/tab-bar/index.web.js",
+        "require": "./lib/commonjs/tab-bar/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/tab-bar/index.d.ts",
+        "default": "./lib/module/tab-bar/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tab-bar/index.d.ts",
+        "default": "./lib/commonjs/tab-bar/index.js"
+      }
+    },
+    "./tab-bar/expo-router": {
+      "react-native": "./src/tab-bar/expo-router/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/tab-bar/expo-router/index.d.ts",
+        "default": "./lib/module/tab-bar/expo-router/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tab-bar/expo-router/index.d.ts",
+        "default": "./lib/commonjs/tab-bar/expo-router/index.js"
+      }
+    },
+    "./progressive-blur": {
+      "react-native": "./src/progressive-blur/index.tsx",
+      "browser": {
+        "types": "./lib/typescript/module/progressive-blur/index.web.d.ts",
+        "import": "./lib/module/progressive-blur/index.web.js",
+        "require": "./lib/commonjs/progressive-blur/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/progressive-blur/index.d.ts",
+        "default": "./lib/module/progressive-blur/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/progressive-blur/index.d.ts",
+        "default": "./lib/commonjs/progressive-blur/index.js"
+      }
+    },
     "./design-tokens/theme.css": "./src/design-tokens/theme.css",
     "./package.json": "./package.json"
   },
   "files": [
     "src",
-    "lib"
+    "lib",
+    "NOTICE"
   ],
   "keywords": [
     "react-native",
@@ -1088,8 +1127,8 @@
     "typescript": "tsc --noEmit",
     "pretypescript": "node scripts/generate-font-data.mjs",
     "clean": "rm -rf lib",
-    "prepack": "bun run clean && bunx bob build",
-    "prepare": "bob build || true",
+    "prepack": "bun run clean && bun run build",
+    "prepare": "bun run build || true",
     "release": "rm -rf lib && bun run build && release-it",
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build -o storybook-static"
@@ -1121,9 +1160,11 @@
     "@vitejs/plugin-react": "^6.0.2",
     "expo-blur": "~56.0.3",
     "expo-font": "^56.0.5",
+    "expo-glass-effect": "~56.0.4",
     "expo-haptics": "~56.0.3",
     "expo-image": "~56.0.11",
     "expo-router": "^56.0.0",
+    "expo-symbols": "~56.0.6",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
     "react": "19.2.0",
@@ -1131,14 +1172,14 @@
     "react-native": "0.83.2",
     "react-native-builder-bob": "^0.40.16",
     "react-native-gesture-handler": "^2.30.0",
-    "react-native-reanimated": "^4.2.2",
+    "react-native-reanimated": "^4.5.0",
     "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "^4.25.2",
     "react-native-svg": "^15.15.3",
     "react-native-web": "^0.21.2",
+    "react-native-worklets": "0.10.0",
     "react-test-renderer": "^19.2.0",
     "release-it": "^19.0.6",
-    "sonner": "^2.0.3",
-    "sonner-native": "^0.23.1",
     "storybook": "^10",
     "ts-jest": "^29.4.6",
     "typescript": "~5.9.2",
@@ -1148,18 +1189,19 @@
     "expo": "*",
     "expo-blur": "*",
     "expo-font": "*",
+    "expo-glass-effect": ">=0.1.5",
     "expo-haptics": "*",
     "expo-image": "*",
     "expo-router": ">=3.0.0",
+    "expo-symbols": ">=0.4.5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-native": ">=0.73.0",
-    "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-reanimated": ">=3.13.0",
     "react-native-safe-area-context": ">=5.0.0",
+    "react-native-screens": ">=3.16.0",
     "react-native-svg": ">=13.0.0",
-    "sonner": ">=2.0.0",
-    "sonner-native": ">=0.17.0",
     "nativewind": ">=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -1169,22 +1211,19 @@
     "expo-font": {
       "optional": true
     },
-    "expo-haptics": {
-      "optional": true
-    },
-    "expo-router": {
+    "expo-glass-effect": {
       "optional": true
     },
-    "react-dom": {
+    "expo-haptics": {
       "optional": true
     },
-    "react-native-svg": {
+    "expo-router": {
       "optional": true
     },
-    "sonner": {
+    "expo-symbols": {
       "optional": true
     },
-    "sonner-native": {
+    "react-dom": {
       "optional": true
     },
     "nativewind": {
@@ -1218,7 +1257,6 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.3",
-    "nanoid": "^5.1.5",
     "react-native-css": "3.0.7",
     "react-remove-scroll-bar": "^2.3.8"
   },

package/src/__tests__/TabBar.test.tsx

@@ -0,0 +1,342 @@
+import React from 'react';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import type { ThemeColors } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { TabBar, TabBarButton } from '../tab-bar';
+import { TabBarGlyph as NativeTabBarGlyph } from '../tab-bar/glyph.native';
+import { resolveTabBarTheme } from '../tab-bar/shared';
+import { TabBarSurface as NativeTabBarSurface } from '../tab-bar/surface.native';
+import type { TabBarItem, TabBarTheme } from '../tab-bar/types';
+
+/**
+ * Behaviour tests for the floating tab bar.
+ *
+ * Three properties of the environment shape every assertion here:
+ *
+ *  1. Jest has no platform-extension resolution, so `../tab-bar` binds the
+ *     NEUTRAL `surface.tsx` / `glyph.tsx`. The two `.native` variants are pulled
+ *     in by their full path where they are asserted on directly — which is also
+ *     what makes the `expo-glass-effect` / `expo-symbols` mocks load-bearing
+ *     rather than decorative.
+ *  2. Labels render through `Animated.Text`, a plain host string under the
+ *     reanimated mock, so testing-library's text queries cannot see them.
+ *     `labelFor` walks the tree instead.
+ *  3. The reanimated mock's shared values are plain boxes: writing
+ *     `slideIndex.value` does NOT re-render, and `useAnimatedStyle` runs during
+ *     render. A mapper reading a shared value that an EFFECT wrote therefore
+ *     reflects the write only on the NEXT render — hence `renderSettled`. The
+ *     motion itself is verified in a real browser, not here.
+ */
+
+/**
+ * Stand-in for a Bloom icon element: a host node tagged with the `fill` it was
+ * cloned with, so a test can read back the tint the bar injected through
+ * `applyIconColor`.
+ */
+function BareIcon({ id, fill }: { id: string; fill?: string }) {
+  return React.createElement('bloom-test-icon', { testID: id, fill });
+}
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: <BareIcon id="home-icon" /> },
+  { name: 'search', label: 'Search', icon: <BareIcon id="search-icon" /> },
+  { name: 'you', label: 'You', icon: <BareIcon id="you-icon" /> },
+];
+
+/** Captures the live `ThemeColors` so assertions compare against real tokens. */
+function ThemeProbe({ onColors }: { onColors: (colors: ThemeColors) => void }) {
+  onColors(useTheme().colors);
+  return null;
+}
+
+function withTheme(ui: React.ReactElement) {
+  return (
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>
+  );
+}
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(withTheme(ui));
+}
+
+/**
+ * Render, then re-render an equivalent tree so mappers see the shared-value
+ * writes the mount effects made. See note 3 in the file header.
+ *
+ * Takes a FACTORY, not an element: React bails out of re-rendering a
+ * referentially identical element, which would skip the second pass entirely
+ * and silently leave the assertion reading first-frame values.
+ */
+function renderSettled(ui: () => React.ReactElement) {
+  const utils = renderWithTheme(ui());
+  utils.rerender(withTheme(ui()));
+  return utils;
+}
+
+/** The theme the bar resolves for `mode="light" colorPreset="teal"`. */
+function readTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
+  let resolved: TabBarTheme | undefined;
+  renderWithTheme(
+    <ThemeProbe
+      onColors={(colors) => {
+        resolved = resolveTabBarTheme(colors, overrides);
+      }}
+    />,
+  );
+  if (!resolved) throw new Error('ThemeProbe never ran');
+  return resolved;
+}
+
+// Flatten a (possibly nested / conditional) RN style prop into one object.
+function flattenStyle(style: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  const visit = (s: unknown): void => {
+    if (Array.isArray(s)) s.forEach(visit);
+    else if (s && typeof s === 'object') Object.assign(out, s);
+  };
+  visit(style);
+  return out;
+}
+
+/**
+ * The host tag a node renders as, or `null` for a composite.
+ *
+ * `ReactTestInstance['type']` is typed as `ElementType`, whose string arm is the
+ * union of KNOWN intrinsic tags — so comparing it directly to a mock host name
+ * like `'Animated.Text'` is a TS2367 "no overlap" error. Widening to `string`
+ * behind this accessor is the honest fix: these really are host tags, they are
+ * just ones the RN/reanimated mocks invent.
+ */
+function hostName(node: ReactTestInstance): string | null {
+  const { type } = node;
+  return typeof type === 'string' ? type : null;
+}
+
+/**
+ * Every tab trigger, in bar order.
+ *
+ * Restricted to HOST nodes: the tree carries both the composite `Pressable` and
+ * the host element it renders, and both hold the same props — counting them all
+ * would double every tab.
+ */
+function triggers(root: ReactTestInstance): ReactTestInstance[] {
+  return root.findAll(
+    (node) => hostName(node) !== null && node.props?.accessibilityRole === 'tab',
+  );
+}
+
+/** The `Animated.Text` label node of the tab whose text is `label`. */
+function labelFor(root: ReactTestInstance, label: string): ReactTestInstance {
+  const found = root.findAll(
+    (node) => hostName(node) === 'Animated.Text' && node.props?.children === label,
+  );
+  const first = found[0];
+  if (!first) throw new Error(`No tab label rendered with text "${label}"`);
+  return first;
+}
+
+/** Every host node rendered as `tag`. */
+function hosts(root: ReactTestInstance, tag: string): ReactTestInstance[] {
+  return root.findAll((node) => hostName(node) === tag);
+}
+
+function selectedFlags(root: ReactTestInstance): boolean[] {
+  return triggers(root).map((node) => node.props.accessibilityState.selected);
+}
+
+function Bar({
+  activeIndex,
+  onIndexChange,
+  theme,
+  focusedIndex,
+}: {
+  activeIndex?: number;
+  onIndexChange?: (index: number) => void;
+  theme?: Partial<TabBarTheme>;
+  /** When set, drives the FOCUS path (`isFocused`) instead of `activeIndex`. */
+  focusedIndex?: number;
+}) {
+  return (
+    <TabBar activeIndex={activeIndex} onIndexChange={onIndexChange} theme={theme}>
+      {ITEMS.map((item, index) => (
+        <TabBarButton
+          key={item.name}
+          item={item}
+          index={index}
+          isFocused={focusedIndex === undefined ? undefined : focusedIndex === index}
+        />
+      ))}
+    </TabBar>
+  );
+}
+
+describe('TabBar', () => {
+  it('renders every item label', () => {
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} />);
+    for (const item of ITEMS) expect(labelFor(UNSAFE_root, item.label)).toBeTruthy();
+  });
+
+  it("renders each item's own icon node, on both crossfade layers", () => {
+    const { getAllByTestId } = renderWithTheme(<Bar activeIndex={0} />);
+    // The bar renders the glyph twice per tab: an inactive layer with the
+    // active layer crossfading on top.
+    for (const id of ['home-icon', 'search-icon', 'you-icon']) {
+      expect(getAllByTestId(id)).toHaveLength(2);
+    }
+  });
+
+  it('injects the layer tint as the icon fill, from theme tokens', () => {
+    const theme = readTheme();
+    const { getAllByTestId } = renderWithTheme(<Bar activeIndex={0} />);
+    const fills = getAllByTestId('home-icon').map((node) => node.props.fill);
+    expect(fills).toEqual(expect.arrayContaining([theme.inactiveTint, theme.activeTint]));
+  });
+
+  it('marks the tab at activeIndex as selected for accessibility', () => {
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={1} />);
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, true, false]);
+  });
+
+  it('moves the selection when activeIndex changes', () => {
+    const { UNSAFE_root, rerender } = renderWithTheme(<Bar activeIndex={0} />);
+    rerender(withTheme(<Bar activeIndex={2} />));
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, false, true]);
+  });
+
+  it('tints the label of the tab the highlight sits on', () => {
+    const theme = readTheme();
+    const { UNSAFE_root } = renderSettled(() => <Bar activeIndex={1} />);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Search').props.style).color).toBe(theme.activeTint);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Home').props.style).color).toBe(theme.inactiveTint);
+  });
+
+  it('calls onIndexChange with the pressed index', () => {
+    const onIndexChange = jest.fn();
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} onIndexChange={onIndexChange} />);
+    fireEvent.press(triggers(UNSAFE_root)[2] as ReactTestInstance);
+    expect(onIndexChange).toHaveBeenCalledTimes(1);
+    expect(onIndexChange).toHaveBeenCalledWith(2);
+  });
+
+  it('does not report the press itself on the focus-driven path', () => {
+    // With `isFocused` supplied the router trigger's own onPress navigates;
+    // reporting through the bar as well would navigate twice.
+    const onIndexChange = jest.fn();
+    const { UNSAFE_root } = renderWithTheme(
+      <Bar focusedIndex={0} onIndexChange={onIndexChange} />,
+    );
+    fireEvent.press(triggers(UNSAFE_root)[1] as ReactTestInstance);
+    expect(onIndexChange).not.toHaveBeenCalled();
+  });
+
+  it('lets isFocused override the bar activeIndex', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <TabBar activeIndex={0}>
+        {ITEMS.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} isFocused={index === 2} />
+        ))}
+      </TabBar>,
+    );
+    // Index 0 is the bar's activeIndex, but every button carries an explicit
+    // isFocused, so focus comes from the buttons alone.
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, false, true]);
+  });
+
+  it('drives the highlight from isFocused when the bar is uncontrolled', () => {
+    const theme = readTheme();
+    // The router path: `RouterTabBarProps` omits `activeIndex` on purpose, so
+    // the focused BUTTON is the only writer of the highlight. This is what
+    // keeps the pill correct through deep links and back gestures.
+    const { UNSAFE_root } = renderSettled(() => <Bar focusedIndex={2} />);
+    // The label tint follows the sliding highlight, so it reports where the
+    // pill actually is.
+    expect(flattenStyle(labelFor(UNSAFE_root, 'You').props.style).color).toBe(theme.activeTint);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Home').props.style).color).toBe(theme.inactiveTint);
+  });
+
+  describe('theming', () => {
+    it('resolves its defaults from Bloom tokens, never a hardcoded palette', () => {
+      const theme = readTheme();
+      // Upstream shipped a fixed dark palette; every role must instead come
+      // from the active preset, which resolves to Bloom's `rgb(...)` tokens.
+      for (const [role, value] of Object.entries(theme)) {
+        expect([role, value]).toEqual([role, expect.stringMatching(/^rgba?\(/)]);
+      }
+      expect(theme.activeTint).not.toBe('#FFFFFF');
+      expect(theme.activeTint).not.toBe(theme.inactiveTint);
+    });
+
+    it('paints the highlight with the resolved highlight token', () => {
+      const theme = readTheme();
+      const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} />);
+      const painted = UNSAFE_root.findAll(
+        (node) => flattenStyle(node.props?.style).backgroundColor === theme.highlight,
+      );
+      expect(painted.length).toBeGreaterThan(0);
+    });
+
+    it('applies a partial theme override without dropping the other roles', () => {
+      const defaults = readTheme();
+      const overridden = readTheme({ highlight: 'rgb(1 2 3)' });
+      expect(overridden.highlight).toBe('rgb(1 2 3)');
+      expect(overridden.activeTint).toBe(defaults.activeTint);
+      expect(overridden.glassTint).toBe(defaults.glassTint);
+    });
+
+    it('never lets an explicit undefined in a partial punch a hole', () => {
+      const defaults = readTheme();
+      expect(readTheme({ activeTint: undefined }).activeTint).toBe(defaults.activeTint);
+    });
+
+    it('paints the bar with an overridden highlight', () => {
+      const { UNSAFE_root } = renderWithTheme(
+        <Bar activeIndex={0} theme={{ highlight: 'rgb(9 9 9)' }} />,
+      );
+      const painted = UNSAFE_root.findAll(
+        (node) => flattenStyle(node.props?.style).backgroundColor === 'rgb(9 9 9)',
+      );
+      expect(painted.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('native platform variants', () => {
+    it('falls back to the solid theme fill when liquid glass is unavailable', () => {
+      // The `expo-glass-effect` mock reports `isLiquidGlassAvailable() === false`
+      // (see the note in that file), so this is the branch every Android and
+      // pre-iOS-26 device takes.
+      const theme = readTheme();
+      const { UNSAFE_root } = renderWithTheme(
+        <NativeTabBarSurface theme={theme} style={{ borderRadius: 29 }} />,
+      );
+      expect(hosts(UNSAFE_root, 'GlassView')).toHaveLength(0);
+      const surface = hosts(UNSAFE_root, 'Animated.View')[0];
+      expect(flattenStyle(surface?.props.style).backgroundColor).toBe(theme.solidFallback);
+    });
+
+    it('renders an SF Symbol on iOS when the item carries one', () => {
+      const theme = readTheme();
+      const item: TabBarItem = { ...(ITEMS[0] as TabBarItem), sfSymbol: 'house.fill' };
+      const { UNSAFE_root } = renderWithTheme(
+        <NativeTabBarGlyph item={item} tint={theme.activeTint} size={21} />,
+      );
+      const symbol = hosts(UNSAFE_root, 'SymbolView')[0];
+      expect(symbol?.props.name).toBe('house.fill');
+      expect(symbol?.props.tintColor).toBe(theme.activeTint);
+      expect(symbol?.props.size).toBe(21);
+    });
+
+    it('falls back to the item icon when no SF Symbol is given', () => {
+      const theme = readTheme();
+      const { queryByTestId, UNSAFE_root } = renderWithTheme(
+        <NativeTabBarGlyph item={ITEMS[0] as TabBarItem} tint={theme.activeTint} size={21} />,
+      );
+      expect(hosts(UNSAFE_root, 'SymbolView')).toHaveLength(0);
+      expect(queryByTestId('home-icon')).toBeTruthy();
+    });
+  });
+});