@oxyhq/bloom 0.50.2 → 0.51.0

package/src/dialog/Dialog.web.tsx

@@ -21,6 +21,7 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
@@ -304,7 +305,7 @@ function CenterOrSideDialog({
               // `pointer-events: none`, which is set so the idle portal
               // doesn't intercept clicks on the underlying app.
               style={{
-                position: 'fixed' as 'absolute',
+                position: WEB_POSITION_FIXED,
                 top: 0,
                 left: 0,
                 right: 0,
@@ -790,7 +791,7 @@ function cancelFrame(token: FrameToken): void {
 function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
   const style: ViewStyle[] = [
     {
-      position: 'fixed' as 'absolute',
+      position: WEB_POSITION_FIXED,
       top: 0,
       left: 0,
       right: 0,
@@ -843,7 +844,7 @@ const sheetStyles = {
   // the per-layer `createOverlayZIndex(layer)` in `SheetSurface`, so a side
   // dialog stacked on top of another (surface stack) paints above it.
   root: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,

package/src/index.ts

@@ -112,7 +112,10 @@ export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading';
 export * from './prompt-input';
 export * from './switch';
-export { toast, type Toast } from './toast';
+// `ToastOutlet` is a required app-root mount, like `BloomDialogProvider` and
+// `SurfaceHost`. The full engine surface lives at `@oxyhq/bloom/toast`.
+export { toast, ToastOutlet } from './toast';
+export type { ToastFn, ToastOptions, ToastType } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/index.web.ts

@@ -117,7 +117,10 @@ export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading/index.web';
 export * from './prompt-input';
 export * from './switch';
-export { toast, type Toast } from './toast/index.web';
+// `ToastOutlet` is a required app-root mount, like `BloomDialogProvider` and
+// `SurfaceHost`. The full engine surface lives at `@oxyhq/bloom/toast`.
+export { toast, ToastOutlet } from './toast';
+export type { ToastFn, ToastOptions, ToastType } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/menu/index.web.tsx

@@ -17,6 +17,7 @@ import { Text } from '../typography';
 import type { DialogControlProps } from '../dialog/types';
 import { Portal } from '../portal/index.web';
 import { createDropdownZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import {
   MenuContext,
@@ -222,7 +223,7 @@ export function MenuContent({
       );
 
       setPosition({
-        position: 'fixed' as 'absolute',
+        position: WEB_POSITION_FIXED,
         top,
         left,
         right: undefined,

package/src/popover/index.web.tsx

@@ -12,6 +12,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { PopoverContext, usePopoverContext } from './context';
 import type {
@@ -308,7 +309,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -317,7 +318,7 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   panel: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     zIndex: popoverZIndex.surface,
     borderRadius: 12,
     borderWidth: 1,

package/src/portal/index.tsx

@@ -12,6 +12,7 @@ import React, {
 } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 
 type Component = React.ReactElement;
 
@@ -114,8 +115,10 @@ export const Outlet = memo(DefaultPortal.Outlet);
 export const Portal = DefaultPortal.Portal;
 
 const styles = StyleSheet.create({
+  // Applied only from the `Platform.OS === 'web'` branch of `Outlet`, which is
+  // why the web-only `position` value is honest in this universal file.
   portalOutlet: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,

package/src/progressive-blur/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ */
+import { BlurView } from 'expo-blur';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { buildTailGradient, LAYER_HEIGHTS } from './shared';
+import type { ProgressiveBlurProps } from './types';
+
+export type { ProgressiveBlurProps } from './types';
+
+/**
+ * Progressive (gradient) blur: strongest at the anchored edge, fading to none.
+ * Drop it behind a floating tab bar or a transparent header so content
+ * dissolves rather than meeting a hard blur line.
+ *
+ * NATIVE implementation. iOS has no public variable-blur API, so this stacks
+ * ten thin `BlurView`s with a tiny per-layer intensity — each layer's edge adds
+ * only an imperceptible step, so the falloff reads as continuous (see
+ * `LAYER_HEIGHTS`). A soft gradient in the theme's page color smooths the tail
+ * and keeps overlaid content legible.
+ *
+ * The web fork replaces the whole stack with one masked `backdrop-filter`:
+ * `experimental_backgroundImage` is dropped silently by react-native-web, and
+ * ten stacked backdrop passes would be far more expensive than the one the
+ * browser can do natively.
+ */
+export function ProgressiveBlur({
+  style,
+  intensity = 5,
+  direction = 'top',
+  ...rest
+}: ProgressiveBlurProps) {
+  const { colors, isDark } = useTheme();
+  const anchor = direction === 'top' ? styles.anchorTop : styles.anchorBottom;
+
+  return (
+    <View {...rest} style={[styles.root, style]}>
+      {LAYER_HEIGHTS.map((height) => (
+        <BlurView
+          key={height}
+          tint={isDark ? 'dark' : 'light'}
+          intensity={intensity}
+          style={[styles.layer, anchor, { height }]}
+        />
+      ))}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { experimental_backgroundImage: buildTailGradient(colors.background, direction) },
+        ]}
+      />
+    </View>
+  );
+}
+
+ProgressiveBlur.displayName = 'ProgressiveBlur';
+
+const styles = StyleSheet.create({
+  root: {
+    // In the style object, not as a prop: RN-Web deprecated the `pointerEvents`
+    // prop and warns on every render when it is used.
+    pointerEvents: 'none',
+  },
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  anchorTop: {
+    top: 0,
+  },
+  anchorBottom: {
+    bottom: 0,
+  },
+});

package/src/progressive-blur/index.web.tsx

@@ -0,0 +1,65 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ */
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import {
+  buildMaskGradient,
+  buildTailGradient,
+  WEB_BLUR_PER_INTENSITY,
+} from './shared';
+import type { ProgressiveBlurProps } from './types';
+
+export type { ProgressiveBlurProps } from './types';
+
+/**
+ * WEB fork of {@link ProgressiveBlur} — ONE element instead of the native
+ * ten-layer stack.
+ *
+ * Two upstream techniques do not survive a browser, which is the whole reason
+ * this fork exists:
+ *
+ *   - `experimental_backgroundImage` is dropped silently by react-native-web
+ *     (no warning, no gradient), so the tail is painted with real CSS
+ *     `background-image` instead;
+ *   - stacking ten `BlurView`s would mean ten composited backdrop passes over
+ *     the same pixels every frame. A browser can fade a single
+ *     `backdrop-filter` with `mask-image`, which is both correct and an order
+ *     of magnitude cheaper.
+ *
+ * The declarations ride in the STYLE object rather than an injected CSS class:
+ * react-native-web does not forward `className` to the DOM (it is absent from
+ * its `forwardedProps` list, and `createDOMProps` overwrites the attribute with
+ * the atomic class it generates), while unknown style properties ARE passed
+ * through its style compiler — the same route `Dialog.web.tsx` uses for its
+ * `animation` shorthand. Nothing here needs `@keyframes` or a pseudo-class, so
+ * there is no stylesheet to inject and nothing a consumer could forget to wire.
+ */
+export function ProgressiveBlur({
+  style,
+  intensity = 5,
+  direction = 'top',
+  ...rest
+}: ProgressiveBlurProps) {
+  const { colors } = useTheme();
+
+  const filter = `blur(${intensity * WEB_BLUR_PER_INTENSITY}px)`;
+  const mask = buildMaskGradient(direction);
+  // Web-only CSS, unknown to React Native's `ViewStyle`. Both spellings are set
+  // for `backdrop-filter` and `mask-image`: Safari still needs the prefixed
+  // form of each.
+  const webStyle = {
+    pointerEvents: 'none',
+    backdropFilter: filter,
+    WebkitBackdropFilter: filter,
+    maskImage: mask,
+    WebkitMaskImage: mask,
+    backgroundImage: buildTailGradient(colors.background, direction),
+  } as ViewStyle;
+
+  return <View {...rest} style={[webStyle, style]} />;
+}
+
+ProgressiveBlur.displayName = 'ProgressiveBlur';

package/src/progressive-blur/shared.ts

@@ -0,0 +1,81 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * The falloff math both forks share, so the native stack and the web mask
+ * describe the SAME curve and a bar looks the same on a phone and in a browser.
+ */
+import { withAlpha } from '../theme/color-utils';
+
+/**
+ * Per-layer heights of the native blur stack, as a fraction of the box.
+ *
+ * iOS has no public variable-blur API, so the native fork stacks many thin
+ * `BlurView`s with a tiny per-layer intensity: each layer's edge adds only an
+ * imperceptible step, so the falloff reads as continuous. Coverage at a given
+ * depth is the number of layers still tall enough to reach it — 10 at the
+ * anchored edge, ~5 at the midpoint, 1 at the far edge.
+ */
+export const LAYER_HEIGHTS = [
+  '100%',
+  '88%',
+  '76%',
+  '64%',
+  '54%',
+  '44%',
+  '36%',
+  '28%',
+  '22%',
+  '16%',
+] as const;
+
+/**
+ * px of CSS blur per unit of `intensity` on web.
+ *
+ * The web fork replaces the whole stack with ONE `backdrop-filter`, so the
+ * radius has to stand in for the accumulated effect of ten layers rather than
+ * one: the default `intensity` of 5 lands on a 20px radius, which reads like
+ * the native stack at the anchored edge. Stacking ten real blurs in a browser
+ * would cost ten composited backdrop passes for the same picture.
+ */
+export const WEB_BLUR_PER_INTENSITY = 4;
+
+/** CSS gradient direction keyword for a blur anchored at `direction`. */
+function towards(direction: 'top' | 'bottom'): 'top' | 'bottom' {
+  return direction === 'top' ? 'bottom' : 'top';
+}
+
+/**
+ * The soft tint layered over the blur. It smooths the tail and keeps overlaid
+ * content legible; upstream hardcoded black, which only worked on a dark theme,
+ * so it is derived from the theme's page background here instead.
+ */
+export function buildTailGradient(background: string, direction: 'top' | 'bottom'): string {
+  const to = towards(direction);
+  return (
+    `linear-gradient(to ${to}, ` +
+    `${withAlpha(background, 0.7)} 0%, ` +
+    `${withAlpha(background, 0.32)} 42%, ` +
+    `${withAlpha(background, 0.08)} 68%, ` +
+    `${withAlpha(background, 0)} 88%)`
+  );
+}
+
+/**
+ * Alpha ramp the web fork masks its single blur with — the only way to fade a
+ * `backdrop-filter`. The stops trace the native stack's layer coverage (full at
+ * the anchored edge, ~half at the midpoint) and then close all the way to zero,
+ * which the stack cannot do: its tallest layer spans the whole box, leaving a
+ * faint blur step at the far edge.
+ */
+export function buildMaskGradient(direction: 'top' | 'bottom'): string {
+  const to = towards(direction);
+  return (
+    `linear-gradient(to ${to}, ` +
+    `rgba(0, 0, 0, 1) 0%, ` +
+    `rgba(0, 0, 0, 0.9) 20%, ` +
+    `rgba(0, 0, 0, 0.5) 50%, ` +
+    `rgba(0, 0, 0, 0.2) 80%, ` +
+    `rgba(0, 0, 0, 0) 100%)`
+  );
+}

package/src/progressive-blur/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * Shared prop contract for both forks. It lives in its own module so the web
+ * fork can declare it without importing the native entry (`./index` resolves to
+ * `index.web.tsx` itself on a web-platform Metro build), and so `TabBarBase`
+ * can type its injected `Blur` component without importing either fork.
+ */
+import type { ViewProps } from 'react-native';
+
+export type ProgressiveBlurProps = ViewProps & {
+  /**
+   * Blur strength at the anchored edge. Follows `expo-blur`'s 0–100 scale and
+   * is applied PER LAYER on native (see the native fork); the web fork maps it
+   * onto the single CSS blur radius that approximates the same stack.
+   */
+  intensity?: number;
+  /** Which edge the blur is anchored to (strongest there, fading away). */
+  direction?: 'top' | 'bottom';
+};

package/src/select/index.web.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { RadioIndicator } from '../radio-indicator';
 import { useInteractionState } from '../hooks/useInteractionState';
@@ -332,7 +333,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,

package/src/styles/web-view-style.ts

@@ -0,0 +1,21 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * `position: fixed`, typed for React Native's `ViewStyle`.
+ *
+ * RN types `position` as `'absolute' | 'relative' | 'static'` — what Yoga
+ * implements — while react-native-web renders real CSS, where `'fixed'` is the
+ * only way for a portaled overlay to anchor to the VIEWPORT instead of the
+ * nearest positioned ancestor. This is the ONE place Bloom crosses between the
+ * two, so web forks import it instead of writing their own cast.
+ *
+ * Deliberately not a `declare module 'react-native'` augmentation, for two
+ * reasons. It does not work: `position` lives on `interface FlexStyle`, which RN
+ * re-exports from a submodule, so augmenting `'react-native'` neither merges nor
+ * errors — verified with tsc, the identical `TS2322` appears with and without it,
+ * which makes it strictly worse than a cast because it looks like a fix. And even
+ * if it worked, widening `ViewStyle` would ship through `/// <reference path>` to
+ * every consumer, so `position: 'fixed'` would start compiling in NATIVE code
+ * where Yoga silently ignores it.
+ */
+export const WEB_POSITION_FIXED = 'fixed' as ViewStyle['position'];

package/src/tab-bar/TabBar.stories.tsx

@@ -0,0 +1,217 @@
+import React, { useState, type PropsWithChildren } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import * as Icons from '../icons';
+import { useTheme } from '../theme/use-theme';
+import { TabBar, TabBarButton, TabBarMinimizeProvider, useMinimizeOnScroll } from './index';
+import type { TabBarItem, TabBarProps } from './types';
+
+/**
+ * The floating tab bar, on the ROUTER-FREE core (`activeIndex` /
+ * `onIndexChange`). No expo-router anywhere — that is the point of the core
+ * layer, and it is what lets the family be exercised in a plain web bundle.
+ *
+ * Storybook resolves `./index` through its `.web.*`-first extension list, so
+ * these stories run the WEB fork (`surface.web.tsx`'s `backdrop-filter` glass
+ * and `progressive-blur/index.web.tsx`) against the REAL reanimated,
+ * gesture-handler and safe-area-context — no worklets babel plugin, exactly
+ * what every Oxy RN-Web app ships. That makes every animated path here
+ * observable rather than assumed:
+ *
+ *  - **tap / scrub**: the highlight springs to the tapped tab, and follows the
+ *    finger 1:1 while dragging across the bar
+ *  - **minimize**: scrolling down shrinks the pill and fades the labels out
+ *  - **glyph crossfade**: the active tint tracks the highlight, not the tap
+ *
+ * All of them are driven by shared values read inside `useAnimatedStyle`
+ * mappers, so if a dependency array is ever dropped (the web freeze-at-first-
+ * frame failure mode documented in `TabBarBase`) these stories visibly stop
+ * moving while nothing errors.
+ */
+const meta: Meta<typeof TabBar> = {
+  title: 'Components/TabBar',
+  component: TabBar,
+  // The bar is a screen-level element: its highlight geometry comes from
+  // `useWindowDimensions()`, so the demo has to be exactly window-wide or the
+  // pill drifts out of step with the tabs and reads as a component bug.
+  // `fullscreen` drops Storybook's own canvas padding; the preview decorator's
+  // padding is cancelled by `Screen`'s negative margin.
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TabBar>;
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: <Icons.Home_Stroke2_Corner0_Rounded /> },
+  { name: 'search', label: 'Search', icon: <Icons.MagnifyingGlass_Stroke2_Corner0_Rounded /> },
+  { name: 'inbox', label: 'Inbox', icon: <Icons.Message_Stroke2_Corner0_Rounded /> },
+  { name: 'profile', label: 'Profile', icon: <Icons.Person_Stroke2_Corner0_Rounded /> },
+];
+
+/** Padding the preview decorator puts around every story (`.storybook/preview.tsx`). */
+const PREVIEW_PADDING = 24;
+/** Height of the demo viewport — a phone-ish screen for the bar to float over. */
+const SCREEN_HEIGHT = 560;
+/** Keeps the last rows scrollable clear of the pill. */
+const CONTENT_BOTTOM_PAD = 140;
+
+const ROWS = Array.from({ length: 18 }, (_, index) => index + 1);
+
+/**
+ * The demo viewport.
+ *
+ * It bleeds past the preview decorator's padding on purpose: the bar is a
+ * screen-level element and derives its highlight geometry from
+ * `useWindowDimensions()`, so anything narrower than the window would put the
+ * pill out of step with the tabs and look like a component bug.
+ *
+ * `SafeAreaProvider` is here because `TabBar` reads safe-area insets to sit
+ * above the home indicator; a consuming app already has one at its root, the
+ * Storybook preview does not.
+ */
+function Screen({ children }: PropsWithChildren) {
+  const { colors } = useTheme();
+  return (
+    <SafeAreaProvider
+      style={{ flex: 0, alignSelf: 'stretch', marginHorizontal: -PREVIEW_PADDING }}
+    >
+      <GestureHandlerRootView
+        style={{
+          height: SCREEN_HEIGHT,
+          backgroundColor: colors.background,
+          overflow: 'hidden',
+        }}
+      >
+        {children}
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  );
+}
+
+/** Tall themed filler so there is something for the bar to float over — and to scroll. */
+function Feed({ heading, caption }: { heading: string; caption: string }) {
+  const { colors } = useTheme();
+  return (
+    <>
+      <Text style={{ color: colors.text, fontSize: 24, fontWeight: '700' }}>{heading}</Text>
+      <Text style={{ color: colors.textSecondary, fontSize: 14 }}>{caption}</Text>
+      {ROWS.map((row) => (
+        <View
+          key={row}
+          style={{
+            padding: 16,
+            borderRadius: 16,
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.backgroundSecondary,
+            gap: 4,
+          }}
+        >
+          <Text style={{ color: colors.text, fontSize: 15, fontWeight: '600' }}>Item {row}</Text>
+          <Text style={{ color: colors.textSecondary, fontSize: 13 }}>
+            Scrolls under the glass so the surface has something to refract.
+          </Text>
+        </View>
+      ))}
+    </>
+  );
+}
+
+const CONTENT_STYLE = { padding: 16, paddingBottom: CONTENT_BOTTOM_PAD, gap: 12 } as const;
+
+/** Controlled core: local state in, `onIndexChange` out. No router involved. */
+function ControlledBar(props: TabBarProps) {
+  return (
+    <TabBar {...props}>
+      {ITEMS.map((item, index) => (
+        <TabBarButton key={item.name} item={item} index={index} />
+      ))}
+    </TabBar>
+  );
+}
+
+function DefaultScreen() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <Screen>
+      <ScrollView contentContainerStyle={CONTENT_STYLE}>
+        <Feed
+          heading={ITEMS[activeIndex]?.label ?? 'Feed'}
+          caption="Tap a tab, or press and drag across the bar to scrub the highlight."
+        />
+      </ScrollView>
+      <ControlledBar activeIndex={activeIndex} onIndexChange={setActiveIndex} />
+    </Screen>
+  );
+}
+
+/**
+ * Body of {@link MinimizeOnScroll} — a separate component because
+ * `useMinimizeOnScroll()` has to run INSIDE `TabBarMinimizeProvider` to share
+ * the bar's progress value. Called outside it, the hook silently falls back to
+ * its own local shared value and nothing minimizes.
+ */
+function MinimizeScreen() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const onScroll = useMinimizeOnScroll();
+  return (
+    <Screen>
+      <Animated.ScrollView
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        contentContainerStyle={CONTENT_STYLE}
+      >
+        <Feed
+          heading="Minimize on scroll"
+          caption="Scroll down: the pill shrinks in both dimensions and the labels fade out. Scroll up, or tap a tab, and it expands again."
+        />
+      </Animated.ScrollView>
+      <ControlledBar activeIndex={activeIndex} onIndexChange={setActiveIndex} />
+    </Screen>
+  );
+}
+
+function ThemeOverrideScreen() {
+  const { colors } = useTheme();
+  const [activeIndex, setActiveIndex] = useState(1);
+  return (
+    <Screen>
+      <ScrollView contentContainerStyle={CONTENT_STYLE}>
+        <Feed
+          heading="Theme override"
+          caption="Only the highlight and the active tint are overridden — the inactive tint, the glass tint and the solid fallback still come from the active preset."
+        />
+      </ScrollView>
+      <ControlledBar
+        activeIndex={activeIndex}
+        onIndexChange={setActiveIndex}
+        theme={{ highlight: colors.primary, activeTint: colors.primaryForeground }}
+      />
+    </Screen>
+  );
+}
+
+/** Four tabs, controlled highlight, floating over scrollable content. */
+export const Default: Story = {
+  render: () => <DefaultScreen />,
+};
+
+/** The Revolut-style minimize: the shared progress value driven by a scroll handler. */
+export const MinimizeOnScroll: Story = {
+  render: () => (
+    <TabBarMinimizeProvider>
+      <MinimizeScreen />
+    </TabBarMinimizeProvider>
+  ),
+};
+
+/** A partial `theme` override on top of the token-derived defaults. */
+export const ThemeOverride: Story = {
+  render: () => <ThemeOverrideScreen />,
+};