@oxyhq/bloom 0.89.0 → 1.0.0

package/src/tab-bar/index.web.ts

@@ -0,0 +1,35 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/index.ts
+ * (MIT © 2026 David Mokos).
+ *
+ * WEB entry for `@oxyhq/bloom/tab-bar`, selected through the package's
+ * `browser` export condition.
+ *
+ * The web modules are imported by their FULL `.web` name on purpose. Inside the
+ * published `lib/` every file is plain `.js` (`surface.js` next to
+ * `surface.web.js`), and no web bundler resolves a bare `./surface` to the
+ * `.web` sibling by extension — only Metro does that. Writing the fork path
+ * explicitly is the same thing the generated root barrel does
+ * (`src/index.web.ts` → `from './dialog/index.web'`). `./glyph` has no web fork:
+ * the neutral file already renders `item.icon`, which is the correct web
+ * behaviour, and it is what any resolver lands on here.
+ */
+import { ProgressiveBlur } from '../progressive-blur/index.web';
+import { createTabBar, createTabBarButton } from './TabBarBase';
+import { TabBarGlyph } from './glyph';
+import { TabBarSurface } from './surface.web';
+
+export const TabBar = createTabBar(TabBarSurface, ProgressiveBlur);
+export const TabBarButton = createTabBarButton(TabBarGlyph);
+
+export {
+  MINIMIZE_SPRING,
+  setMinimized,
+  TabBarMinimizeProvider,
+  useMinimizeOnScroll,
+  useMinimizeState,
+  useTabBarMinimized,
+} from './context';
+export type { MinimizeState } from './context';
+export { useTabBarFootprint } from './use-footprint';
+export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/shared.ts

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * Geometry, motion constants, theme resolution and the contracts for the two
  * injected platform components. Everything here is platform-neutral — no

package/src/tab-bar/surface-solid.tsx

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * The tab bar's NON-GLASS capsule surface: a plain animated view filled with the
  * theme's near-opaque fallback. Android, pre-iOS-26 devices and any build without

package/src/tab-bar/surface.native.tsx

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * NATIVE variant of the tab bar's capsule surface — real liquid glass, degrading
  * to the solid surface whenever the glass is not actually usable.

package/src/tab-bar/surface.tsx

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * NEUTRAL default variant of the tab bar's capsule surface: the non-glass one.
  *

package/src/tab-bar/surface.web.tsx

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * WEB variant of the tab bar's capsule surface: the browser's own frosted
  * material, `backdrop-filter`, under the theme's translucent glass tint.

package/src/tab-bar/types.ts

@@ -1,6 +1,6 @@
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ * (MIT © 2026 David Mokos).
  *
  * Public API types for `@oxyhq/bloom/tab-bar`.
  *

package/src/tabs/Tabs.tsx

@@ -33,8 +33,10 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useTheme } from '../theme/use-theme';
-import { usePressAnimation } from '../hooks/usePressAnimation';
-import { borderRadius, space } from '../styles/tokens';
+import { usePressAnimation } from '../hooks/use-press-animation';
+import { useInteractionState } from '../hooks/use-interaction-state';
+import { pressedSurface } from '../theme/press-colors';
+import { animation, borderRadius, space } from '../styles/tokens';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import type { TabsProps, TabsTriggerProps, TabsContentProps, TabsVariant } from './types';
 
@@ -583,7 +585,12 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
   // The two paths meet here: an explicit `isFocused` (router adapter) wins;
   // otherwise selection comes from the bar's controlled `value`.
   const isSelected = isFocused ?? value === selectedValue;
-  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(0.97);
+  const { scaleAnim, onPressIn: onScaleIn, onPressOut: onScaleOut } =
+    usePressAnimation(animation.pressScale);
+  // Driven separately from the scale — see `Chip` for why.
+  const { state: pressed, onIn: onPressedIn, onOut: onPressedOut } = useInteractionState();
+  const onPressIn = () => { onScaleIn(); onPressedIn(); };
+  const onPressOut = () => { onScaleOut(); onPressedOut(); };
   const resolvedCount = count ?? 0;
   const showCount = resolvedCount > 0;
 
@@ -624,14 +631,23 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     if (isFocused === undefined) onValueChange?.(value);
   }, [value, disabled, onValueChange, onPressProp, isFocused]);
 
-  const tabStyle = useMemo((): ViewStyle => {
-    const base: ViewStyle = {
+  const tabStyle = useMemo((): ViewStyle & { backgroundColor: string } => {
+    const base: ViewStyle & { backgroundColor: string } = {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'center',
       paddingHorizontal: space.lg,
       paddingVertical: space.sm,
       gap: space.xs,
+      // The rest fill, narrowed to a required `string` so the press resolver can
+      // read it straight off. Only the two SELECTED states below overwrite it.
+      backgroundColor: 'transparent',
+      // Every trigger, selected or not, in every variant — not just the two that
+      // paint a fill. Invisible on a transparent background, and it is what gives
+      // the press wash a shape: without it an `underline` tab answers a press
+      // with a hard-edged rectangle while its `filled` sibling answers with a
+      // rounded one. Same rung the two filled states already use.
+      borderRadius: borderRadius.xs + 2,
     };
 
     switch (variant) {
@@ -642,7 +658,6 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
       case 'filled':
         if (isSelected) {
           base.backgroundColor = theme.colors.card;
-          base.borderRadius = borderRadius.xs + 2;
           // Subtle raise (`shadow-s`) — `boxShadow` on web, RN shadow/elevation on native.
           Object.assign(base, bloomShadowStyle('s'));
         }
@@ -650,7 +665,6 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
       case 'outlined':
         if (isSelected) {
           base.backgroundColor = theme.colors.primary;
-          base.borderRadius = borderRadius.xs + 2;
         }
         break;
     }
@@ -658,22 +672,29 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     return base;
   }, [variant, isSelected, theme]);
 
-  const labelStyle = useMemo((): TextStyle => {
-    const base: TextStyle = {
+  const labelColor = useMemo((): string => {
+    if (variant === 'outlined' && isSelected) return theme.colors.primaryForeground;
+    if (isSelected) return theme.colors.primary;
+    return theme.colors.textSecondary;
+  }, [variant, isSelected, theme]);
+
+  const labelStyle = useMemo(
+    (): TextStyle => ({
       fontSize: 14,
       fontWeight: isSelected ? '600' : '500',
-    };
-
-    if (variant === 'outlined' && isSelected) {
-      base.color = theme.colors.primaryForeground;
-    } else if (isSelected) {
-      base.color = theme.colors.primary;
-    } else {
-      base.color = theme.colors.textSecondary;
-    }
+      color: labelColor,
+    }),
+    [isSelected, labelColor],
+  );
 
-    return base;
-  }, [variant, isSelected, theme]);
+  // An unselected trigger has no fill, so its press IS the fill and it takes the
+  // neutral wash. A SELECTED one keeps its fill and gains a state layer of its
+  // own label colour, so pressing the current tab still says something instead
+  // of repainting it as one of its neighbours.
+  const pressedBackground = useMemo(
+    () => pressedSurface(theme.colors, tabStyle.backgroundColor, labelColor),
+    [theme.colors, tabStyle.backgroundColor, labelColor],
+  );
 
   return (
     <RNAnimated.View
@@ -685,7 +706,14 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
       style={[{ transform: [{ scale: scaleAnim }] }, fullWidth && { flex: 1 }]}
     >
       <Pressable
-        style={[tabStyle, fullWidth && { flex: 1 }, disabled && { opacity: 0.4 }, style]}
+        style={[
+          tabStyle,
+          fullWidth && { flex: 1 },
+          disabled && { opacity: 0.4 },
+          // Before the caller's `style`, so `style` still wins the array.
+          pressed && !disabled && { backgroundColor: pressedBackground },
+          style,
+        ]}
         onPress={handlePress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}