@oxyhq/bloom 0.50.1 → 0.51.0

package/src/select/index.web.tsx

@@ -5,6 +5,8 @@ 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';
 import {
@@ -201,7 +203,7 @@ export function SelectContent<T>({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            ...bloomShadowStyle('m'),
           },
         ]}
       >
@@ -331,7 +333,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -348,9 +350,7 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     padding: 4,
     minWidth: 180,
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     // Opt back in from the Portal root's `pointer-events: none`.
     pointerEvents: 'auto',
   },

package/src/slider/Slider.tsx

@@ -12,6 +12,7 @@ import {
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { SliderProps } from './types';
 
 function clamp(v: number, min: number, max: number): number {
@@ -236,7 +237,6 @@ const SliderComponent = function Slider({
             backgroundColor: thumbColor,
             left: thumbLeft,
             transform: [{ scale: thumbScale }],
-            shadowColor: theme.colors.shadow,
           },
         ]}
       />
@@ -261,10 +261,8 @@ const styles = StyleSheet.create({
   thumb: {
     position: 'absolute',
     top: '50%',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.2,
-    shadowRadius: 2,
-    elevation: 2,
+    // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
+    ...bloomShadowStyle('s'),
   },
   disabled: {
     opacity: 0.5,

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/switch/Switch.tsx

@@ -3,6 +3,7 @@ import { Pressable, Animated, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { SwitchProps } from './types';
 
 const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
@@ -128,10 +129,8 @@ const styles = StyleSheet.create({
   },
   thumb: {
     backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.15,
-    shadowRadius: 3,
-    elevation: 3,
+    // Subtle raise (`shadow-s`) — `boxShadow` on web (RN-Web deprecated `shadow*`),
+    // RN elevation/shadow on native.
+    ...bloomShadowStyle('s'),
   },
 });

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 />,
+};