@oxyhq/bloom 0.50.2 → 0.51.0

package/src/tab-bar/types.ts

@@ -0,0 +1,88 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * Public API types for `@oxyhq/bloom/tab-bar`.
+ *
+ * This module imports from `react` and `react-native` ONLY. It is resolved by a
+ * consumer's `tsc`, by Metro, and by every web bundler alike, so a platform
+ * import here (expo-glass-effect / expo-symbols / expo-router) would break all
+ * three at once. Platform behaviour lives in `surface.native.tsx` /
+ * `glyph.native.tsx` / `surface.web.tsx` and the `expo-router/` adapter.
+ */
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type TabBarItem = {
+  /** Stable identity for the tab (a route name in router-driven usage). */
+  name: string;
+  /** Text under the icon; fades out and is clipped when the bar minimizes. */
+  label: string;
+  /**
+   * The glyph, as a Bloom icon element (`<Icons.Home />`) or any node. This is
+   * the primary icon API — same convention as `Tabs`/`TabsTrigger` and
+   * `FrostedIconButton`. The bar renders it TWICE (an inactive layer with the
+   * active layer crossfading on top), injecting the layer's tint as the icon's
+   * `fill` unless the element already sets one.
+   */
+  icon: ReactNode;
+  /**
+   * Optional SF Symbol name, used INSTEAD of `icon` on iOS only. A pure
+   * enhancement handled solely in `glyph.native.tsx`; the neutral and web
+   * glyphs ignore it and render `icon`, so every platform stays covered.
+   */
+  sfSymbol?: string;
+};
+
+export type TabBarTheme = {
+  /** Label/glyph color of the tab the highlight is over. */
+  activeTint: string;
+  /** Label/glyph color of every other tab. */
+  inactiveTint: string;
+  /** Sliding highlight pill color. */
+  highlight: string;
+  /** Tint layered over the liquid glass (iOS 26) surface. */
+  glassTint: string;
+  /** Near-opaque background used when liquid glass is unavailable. */
+  solidFallback: string;
+};
+
+export type TabBarProps = ViewProps & {
+  /**
+   * CONTROLLED path — the index of the focused tab. The bar owns the sliding
+   * highlight and springs it here whenever this changes. Use this when there is
+   * no router in play; the router adapter uses the per-button `isFocused` path
+   * instead (see {@link TabBarButtonProps.isFocused}) and must NOT pass this.
+   */
+  activeIndex?: number;
+  /**
+   * Called with the chosen index when a tab is picked by tap, by scrub release,
+   * or by keyboard/assistive-technology activation of a `TabBarButton`.
+   */
+  onIndexChange?: (index: number) => void;
+  /** Partial override of the theme resolved from Bloom's color tokens. */
+  theme?: Partial<TabBarTheme>;
+  /**
+   * Haptic tick as the scrub crosses tab boundaries. Defaults to `true`. Runs
+   * through Bloom's `useHaptics`, so it is already a no-op on web and when the
+   * optional `expo-haptics` peer is absent.
+   */
+  haptics?: boolean;
+};
+
+export type TabBarButtonProps = PressableProps & {
+  item: TabBarItem;
+  /** Position in the bar. Drives the highlight target and the glyph crossfade. */
+  index: number;
+  /**
+   * FOCUS-DRIVEN path — supplied by the `expo-router` adapter from the tab
+   * trigger's own focus state. When present it wins over the bar's
+   * `activeIndex`, and this button (not the bar) drives the highlight, which is
+   * what makes programmatic navigation, deep links and back gestures move it.
+   *
+   * Leave it undefined for the controlled path: the button then resolves its
+   * focus from the bar's `activeIndex` and reports presses through the bar's
+   * `onIndexChange`.
+   */
+  isFocused?: boolean;
+};

package/src/toast/Positioner.tsx

@@ -0,0 +1,121 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/positioner.tsx
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * One container per occupied position, plus the press-to-collapse area outside an
+ * expanded stack. The container pins all four edges and `getInsetValues` overrides
+ * just the anchored one, so it always has a real height and the rows inside it —
+ * which are absolutely positioned — are never laid out out of bounds. See
+ * `getContainerStyle` for what a zero-height container did to Android.
+ *
+ * `position: 'absolute'` is correct on BOTH platforms and this file stays fully
+ * universal: `ToastHost` supplies a viewport-sized containing block on web, so
+ * there is no `.web` fork and no `position: 'fixed'` here (W7).
+ *
+ * `pointerEvents` goes in `style`, never as a prop — the prop form is deprecated
+ * in react-native-web and logs on every render.
+ */
+import * as React from 'react';
+import { Platform, Pressable, View } from 'react-native';
+import {
+  SafeAreaInsetsContext,
+  initialWindowMetrics,
+} from 'react-native-safe-area-context';
+
+import { useDynamicToastContext, useToastContext } from './context';
+import {
+  calculateOutsidePressableArea,
+  getContainerStyle,
+  getInsetValues,
+} from './positioner-utils';
+import type { ToasterProps } from './types';
+
+/**
+ * Web `initialWindowMetrics` is `null`, and on native it is null until the
+ * provider measures — both fall back to zero insets, which `getInsetValues` then
+ * turns into its 16px default.
+ */
+const FALLBACK_INSETS = initialWindowMetrics?.insets ?? {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+};
+
+/**
+ * Without elevation the positioner can render behind sibling react-native-screens
+ * surfaces (native-stack, bottom-tabs) on Android, hiding toasts entirely. Kept
+ * alongside the `zIndex` the host applies, because Android orders those native
+ * siblings by elevation.
+ */
+const ANDROID_ELEVATION = 9999;
+const androidElevationStyle =
+  Platform.OS === 'android' ? { elevation: ANDROID_ELEVATION } : null;
+
+export const Positioner: React.FC<
+  React.PropsWithChildren<Pick<ToasterProps, 'position' | 'style'>>
+> = ({ children, position, style }) => {
+  const { offset, gap, visibleToasts } = useToastContext();
+  const { isExpanded, collapse, toastHeights } = useDynamicToastContext();
+  const insets = React.useContext(SafeAreaInsetsContext) ?? FALLBACK_INSETS;
+
+  const resolvedPosition = position ?? 'bottom-center';
+  const insetValues = getInsetValues({
+    position: resolvedPosition,
+    offset,
+    safeAreaInsets: { top: insets.top, bottom: insets.bottom },
+  });
+
+  const handleOutsidePress = React.useCallback(() => {
+    if (isExpanded) {
+      collapse();
+    }
+  }, [isExpanded, collapse]);
+
+  // Collapsing by pressing outside only makes sense for an anchored stack.
+  const shouldAllowCollapse = resolvedPosition !== 'center' && isExpanded;
+  const hasChildren = React.Children.count(children) > 0;
+
+  return (
+    <>
+      {shouldAllowCollapse ? (
+        <Pressable
+          style={[
+            calculateOutsidePressableArea({
+              position: resolvedPosition,
+              toastHeights,
+              gap,
+              visibleToasts,
+              insetValues,
+            }),
+            androidElevationStyle,
+          ]}
+          onPress={handleOutsidePress}
+        />
+      ) : null}
+      <View
+        style={[
+          getContainerStyle(),
+          androidElevationStyle,
+          // Overrides ONE edge of the four `getContainerStyle` pins, so the box
+          // keeps a real height and the rows inside it stay in bounds.
+          insetValues,
+          // This container spans the whole host, so it must never swallow a touch.
+          // `box-none` passes presses through to the app while still reaching the
+          // rows; an EMPTY one on Android drops to `none` outright, because the
+          // outlet's configured position always renders a container even with no
+          // rows in it (see `Toaster`'s grouping).
+          {
+            pointerEvents:
+              Platform.OS === 'android' && !hasChildren ? 'none' : 'box-none',
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </>
+  );
+};
+
+Positioner.displayName = 'ToastPositioner';

package/src/toast/Toast.stories.tsx

@@ -1,10 +1,32 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
+import { SlideInLeft } from 'react-native-reanimated';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Button } from '../button';
 import { toast, ToastOutlet } from './index';
+import type { ToasterProps } from './types';
 
+/**
+ * These stories run against the REAL `react-native-reanimated` /
+ * `react-native-gesture-handler` / `react-native-safe-area-context` bundled
+ * against react-native-web WITHOUT the worklets babel plugin — exactly what
+ * every Oxy consumer ships, which is what makes this a genuine web gate.
+ *
+ * Two shapes of multi-toast story exist on purpose and BOTH must be kept:
+ *
+ *  - `Stacking` fires four toasts in ONE tick. Every row enters at its final
+ *    slot, so no row ever changes position after it has settled.
+ *  - `Sequential*` fires one toast, waits, then fires another while the first
+ *    is AT REST. Only this shape moves a settled row, and only this shape
+ *    catches the class of bug where something pins a row at a stale position.
+ *
+ * A one-tick story passing proves nothing about the sequential case. Verify a
+ * `Sequential*` story by comparing the two rows' `getBoundingClientRect().y`:
+ * unstacked they must be ~54px apart (46px measured row + 8px gap), collapsed-
+ * stack ~8px apart. Equal `y` values mean the rows are drawn on top of each
+ * other — the failure this shape exists to catch.
+ */
 const meta: Meta = {
   title: 'Components/Toast',
 };
@@ -13,97 +35,302 @@ export default meta;
 
 type Story = StoryObj;
 
-function ToastDemo({
-  variant,
-  message,
+function Demo({
+  children,
+  outlet,
 }: {
-  variant: 'default' | 'success' | 'error' | 'warning' | 'info';
-  message: string;
+  children: React.ReactNode;
+  outlet?: ToasterProps;
 }) {
-  const fire = () => {
-    switch (variant) {
-      case 'success':
-        toast.success(message);
-        return;
-      case 'error':
-        toast.error(message);
-        return;
-      case 'warning':
-        toast.warning(message);
-        return;
-      case 'info':
-        toast.info(message);
-        return;
-      case 'default':
-      default:
-        toast(message);
-    }
-  };
-
   return (
-    <Button onPress={fire}>{`Show ${variant}`}</Button>
+    <View style={{ gap: 12, alignItems: 'flex-start' }}>
+      {children}
+      <ToastOutlet {...outlet} />
+    </View>
   );
 }
 
-function Outlet() {
-  return <ToastOutlet />;
-}
+/**
+ * All six rows must share ONE neutral surface — only the leading icon changes
+ * colour. Compare against `RichColors`, which keeps that same surface and adds the
+ * status colour to the border and title.
+ */
+export const Variants: Story = {
+  render: () => (
+    <Demo>
+      <Button onPress={() => toast('Saved')}>Default</Button>
+      <Button onPress={() => toast.success('Profile updated')}>Success</Button>
+      <Button onPress={() => toast.error('Network error')}>Error</Button>
+      <Button onPress={() => toast.warning('Storage almost full')}>Warning</Button>
+      <Button onPress={() => toast.info('New version available')}>Info</Button>
+      <Button onPress={() => toast.loading('Uploading…')}>Loading</Button>
+    </Demo>
+  ),
+};
 
-export const Basic: Story = {
+/**
+ * The direct comparison against `Variants`. The SURFACE is identical in both
+ * stories — `richColors` only widens the status colour from the icon alone to the
+ * border and title as well, so a success row here is a neutral card with a green
+ * icon, green border and green title. Two failure modes to watch for: a tinted or
+ * brand-coloured surface (the status/brand token families got mixed again), or a
+ * row indistinguishable from `Variants` (the prop stopped doing anything).
+ */
+export const RichColors: Story = {
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="default" message="Saved" />
-      <Outlet />
-    </View>
+    <Demo outlet={{ richColors: true }}>
+      <Button onPress={() => toast.success('Profile updated')}>Success</Button>
+      <Button onPress={() => toast.error('Network error')}>Error</Button>
+      <Button onPress={() => toast.warning('Storage almost full')}>Warning</Button>
+      <Button onPress={() => toast.info('New version available')}>Info</Button>
+    </Demo>
   ),
 };
 
-export const Success: Story = {
+export const WithDescription: Story = {
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="success" message="Profile updated" />
-      <Outlet />
-    </View>
+    <Demo>
+      <Button
+        onPress={() =>
+          toast.success('Profile updated', {
+            description: 'Your changes are visible to everyone.',
+          })
+        }
+      >
+        Title + description
+      </Button>
+    </Demo>
   ),
 };
 
-export const ErrorToast: Story = {
-  name: 'Error',
+export const WithAction: Story = {
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="error" message="Network error" />
-      <Outlet />
-    </View>
+    <Demo>
+      <Button
+        onPress={() =>
+          toast('Item moved to trash', {
+            action: { label: 'Undo', onClick: () => toast.success('Restored') },
+          })
+        }
+      >
+        Action
+      </Button>
+      <Button
+        onPress={() =>
+          toast('Discard draft?', {
+            action: { label: 'Discard', onClick: () => toast.error('Discarded') },
+            cancel: { label: 'Keep', onClick: () => {} },
+          })
+        }
+      >
+        Action + cancel
+      </Button>
+    </Demo>
   ),
 };
 
-export const Warning: Story = {
+export const CloseButton: Story = {
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="warning" message="Storage almost full" />
-      <Outlet />
-    </View>
+    <Demo outlet={{ closeButton: true }}>
+      <Button onPress={() => toast('Dismiss me with the close button', { duration: Infinity })}>
+        Close button
+      </Button>
+    </Demo>
   ),
 };
 
-export const Info: Story = {
+export const PromiseToast: Story = {
+  name: 'Promise',
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="info" message="New version available" />
-      <Outlet />
-    </View>
+    <Demo>
+      <Button
+        onPress={() =>
+          toast.promise(
+            new Promise<{ name: string }>((resolve) =>
+              setTimeout(() => resolve({ name: 'Nate' }), 1500),
+            ),
+            {
+              loading: 'Saving…',
+              success: (profile) => `Saved ${profile.name}`,
+              error: 'Could not save',
+            },
+          )
+        }
+      >
+        Resolves
+      </Button>
+      <Button
+        onPress={() =>
+          toast.promise(
+            new Promise<void>((_resolve, reject) =>
+              setTimeout(() => reject(new Error('offline')), 1500),
+            ),
+            {
+              loading: 'Saving…',
+              success: () => 'Saved',
+              error: (err) =>
+                `Failed: ${err instanceof Error ? err.message : 'unknown'}`,
+            },
+          )
+        }
+      >
+        Rejects
+      </Button>
+    </Demo>
   ),
 };
 
-export const Composition: Story = {
+export const UpdateInPlace: Story = {
   render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <ToastDemo variant="default" message="Default" />
-      <ToastDemo variant="success" message="Success" />
-      <ToastDemo variant="error" message="Error" />
-      <ToastDemo variant="warning" message="Warning" />
-      <ToastDemo variant="info" message="Info" />
-      <Outlet />
-    </View>
+    <Demo>
+      <Button
+        onPress={() => {
+          toast.loading('Uploading…', { id: 'upload' });
+          setTimeout(() => toast.success('Uploaded', { id: 'upload' }), 1500);
+        }}
+      >
+        Same id, updated row
+      </Button>
+    </Demo>
+  ),
+};
+
+export const Custom: Story = {
+  render: () => (
+    <Demo>
+      <Button
+        onPress={() =>
+          toast.custom(
+            <View
+              style={{
+                marginHorizontal: 16,
+                padding: 16,
+                borderRadius: 12,
+                backgroundColor: '#111',
+              }}
+            >
+              <Text style={{ color: '#fff', fontWeight: '600' }}>
+                A completely custom row
+              </Text>
+            </View>,
+          )
+        }
+      >
+        toast.custom
+      </Button>
+    </Demo>
+  ),
+};
+
+export const Stacking: Story = {
+  render: () => (
+    <Demo outlet={{ enableStacking: true, visibleToasts: 3 }}>
+      <Button
+        onPress={() => {
+          toast('First');
+          toast('Second');
+          toast('Third');
+          toast('Fourth — the first should be culled');
+        }}
+      >
+        Queue four
+      </Button>
+    </Demo>
+  ),
+};
+
+/**
+ * The three sequential regression stories. Fire `One`, let it settle, then fire
+ * `Two` — the second toast must land BESIDE the first, never on top of it. See
+ * the file header for the expected geometry.
+ */
+function SequentialDemo({ outlet }: { outlet?: ToasterProps }) {
+  return (
+    <Demo outlet={outlet}>
+      <Button onPress={() => toast('Row one', { duration: Infinity })}>One</Button>
+      <Button onPress={() => toast('Row two', { duration: Infinity })}>Two</Button>
+    </Demo>
+  );
+}
+
+export const SequentialStacked: Story = {
+  render: () => <SequentialDemo outlet={{ enableStacking: true, visibleToasts: 3 }} />,
+};
+
+export const SequentialUnstacked: Story = {
+  render: () => <SequentialDemo outlet={{ enableStacking: false, visibleToasts: 5 }} />,
+};
+
+export const SequentialTopCenter: Story = {
+  render: () => <SequentialDemo outlet={{ position: 'top-center', visibleToasts: 5 }} />,
+};
+
+/**
+ * Mixed positions on ONE outlet. The outlet is left at its default
+ * `bottom-center`, so:
+ *
+ *   "Top"   -> an explicit `position: 'top-center'` toast, near the top
+ *   "Plain" -> a POSITION-LESS toast, which must land at the outlet's configured
+ *              position (bottom-center) whether or not the top one is alive
+ *
+ * Fire Top first, then Plain. A position-less toast that relocates to the top
+ * means position grouping is keying off whichever position happens to be first in
+ * the occupied list rather than the outlet's own.
+ */
+export const MixedPositions: Story = {
+  render: () => (
+    <Demo outlet={{ visibleToasts: 5 }}>
+      <Button
+        onPress={() =>
+          toast('Top row', { position: 'top-center', duration: Infinity })
+        }
+      >
+        Top
+      </Button>
+      <Button onPress={() => toast('Plain row', { duration: Infinity })}>
+        Plain
+      </Button>
+    </Demo>
+  ),
+};
+
+export const TopCenter: Story = {
+  render: () => (
+    <Demo outlet={{ position: 'top-center' }}>
+      <Button onPress={() => toast('Anchored to the top')}>Top</Button>
+    </Demo>
+  ),
+};
+
+export const Center: Story = {
+  render: () => (
+    <Demo outlet={{ position: 'center' }}>
+      <Button onPress={() => toast('Anchored to the middle')}>Center</Button>
+    </Demo>
+  ),
+};
+
+export const SwipeUp: Story = {
+  render: () => (
+    <Demo outlet={{ swipeToDismissDirection: 'up', position: 'top-center' }}>
+      <Button onPress={() => toast('Swipe me up', { duration: Infinity })}>
+        Swipe up to dismiss
+      </Button>
+    </Demo>
+  ),
+};
+
+/**
+ * The consumer-override branch: Bloom's own enter is imperative, so a supplied
+ * `animation.enter` is the ONLY thing ever handed to reanimated's `entering`.
+ * Sequential on purpose — an override must not reintroduce the stale-position
+ * pin the default enter was moved off `entering` to avoid.
+ */
+export const CustomEnterAnimation: Story = {
+  render: () => (
+    <Demo outlet={{ animation: { enter: SlideInLeft.duration(300) }, visibleToasts: 5 }}>
+      <Button onPress={() => toast('Row one', { duration: Infinity })}>One</Button>
+      <Button onPress={() => toast('Row two', { duration: Infinity })}>Two</Button>
+    </Demo>
   ),
 };