@oxyhq/bloom 0.51.1 → 0.52.0

package/lib/typescript/module/tab-bar/index.d.ts

@@ -8,5 +8,6 @@ export declare const TabBarButton: {
 };
 export { MINIMIZE_SPRING, setMinimized, TabBarMinimizeProvider, useMinimizeOnScroll, useMinimizeState, useTabBarMinimized, } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarReservedSpace } from './use-reserved-space';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/tab-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/tab-bar/index.web.d.ts

@@ -8,5 +8,6 @@ export declare const TabBarButton: {
 };
 export { MINIMIZE_SPRING, setMinimized, TabBarMinimizeProvider, useMinimizeOnScroll, useMinimizeState, useTabBarMinimized, } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarReservedSpace } from './use-reserved-space';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/module/tab-bar/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.web.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.web.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/tab-bar/shared.d.ts

@@ -26,6 +26,15 @@ export declare const HIGHLIGHT_MINIMIZED: number;
 export declare const BLUR_BLEED = 44;
 /** Label type size. Small by design — the icon carries the meaning. */
 export declare const LABEL_FONT_SIZE = 9.5;
+/**
+ * Vertical gap between the bottom of the pill and the bottom of the window.
+ *
+ * The safe-area inset is folded in HERE, which is why anything reserving layout
+ * space for the bar must go through `useTabBarReservedSpace` (which derives its
+ * number from this same function) rather than adding `insets.bottom` to a
+ * hardcoded height — that double-counts the inset.
+ */
+export declare function tabBarBottomGap(bottomInset: number): number;
 /**
  * Slide spring: interruptible by design — rapid tab-hopping retargets with
  * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
@@ -35,6 +44,14 @@ export declare const SLIDE_SPRING: {
     duration: number;
     dampingRatio: number;
 };
+/**
+ * How long a press must be held before `onIndexLongPress` fires.
+ *
+ * Comfortably above the tap gesture's own 400ms ceiling: the two can never both
+ * be candidates at the same instant, so arming the long press cannot cost the
+ * bar a tap. Matches the platform long-press feel (iOS ~0.5s).
+ */
+export declare const LONG_PRESS_MIN_DURATION = 500;
 /**
  * Resolve the bar's five colors from Bloom's theme tokens, with an optional
  * partial override on top.
@@ -89,5 +106,13 @@ export interface TabBarGlyphProps {
     tint: string;
     /** Rendered icon size in px ({@link ICON_SIZE}). */
     size: number;
+    /**
+     * Which crossfade layer this is: `false` for the inactive one underneath,
+     * `true` for the one fading in on top. The active layer renders
+     * `item.activeIcon` when the item has one, so a set that expresses selection
+     * by shape (outline → filled) crossfades between two different nodes rather
+     * than between two tints of the same node.
+     */
+    active: boolean;
 }
 //# sourceMappingURL=shared.d.ts.map

package/lib/typescript/module/tab-bar/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/shared.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWvD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4EAA4E;AAC5E,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,qEAAqE;AACrE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,8DAA8D;AAC9D,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B;;;GAGG;AACH,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,WAAW,QAA0B,CAAC;AACnD,eAAO,MAAM,UAAU,IAAI,CAAC;AAC5B,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,QAA2C,CAAC;AAC3E,eAAO,MAAM,mBAAmB,QAA6B,CAAC;AAC9D,iEAAiE;AACjE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,uEAAuE;AACvE,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;CAAwC,CAAC;AAMlE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAC/B,WAAW,CAQb;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAe5E;AAaD,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,KAAK,EAAE,WAAW,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,UAAU,CAAC;IACjB,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;CACd"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/shared.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAWvD,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,4EAA4E;AAC5E,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,qEAAqE;AACrE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,8DAA8D;AAC9D,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,SAAS,KAAK,CAAC;AAC5B;;;GAGG;AACH,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,WAAW,QAA0B,CAAC;AACnD,eAAO,MAAM,UAAU,IAAI,CAAC;AAC5B,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,QAA2C,CAAC;AAC3E,eAAO,MAAM,mBAAmB,QAA6B,CAAC;AAC9D,iEAAiE;AACjE,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,uEAAuE;AACvE,eAAO,MAAM,eAAe,MAAM,CAAC;AAWnC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE3D;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;CAAwC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAM3C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAC/B,WAAW,CAQb;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAe5E;AAaD,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,KAAK,EAAE,WAAW,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;CAC5C;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,UAAU,CAAC;IACjB,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;CACjB"}

package/lib/typescript/module/tab-bar/types.d.ts

@@ -25,9 +25,31 @@ export type TabBarItem = {
      * type. 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.
+     * `fill` unless the element already sets one. See {@link TabBarItem.activeIcon}
+     * for a set whose selected state is a different shape rather than a tint.
      */
     icon: ReactNode;
+    /**
+     * Optional second node rendered by the ACTIVE crossfade layer instead of
+     * `icon`; without it that layer renders `icon` again, which is the original
+     * behaviour.
+     *
+     * For icon sets that express selection by SHAPE rather than by tint — an
+     * outline glyph that becomes a filled one, with a different path — a tint
+     * crossfade cannot say what the set says, because both layers would draw the
+     * same shape in two colors. Supplying the filled variant here makes the
+     * existing crossfade swap NODES, so the outline dissolves into the fill.
+     *
+     * It is also the escape hatch for an icon that ignores the injected tint: the
+     * bar tints a glyph by cloning it with a `fill` prop (see `applyIconColor`),
+     * so an icon set that paints from a `color` prop instead never lights up, with
+     * no error. Pre-color both nodes yourself and the crossfade still works.
+     *
+     * On iOS an item carrying `sfSymbol` renders the symbol on both layers and
+     * ignores this — a symbol is tinted natively, so the tint crossfade is the
+     * right expression there.
+     */
+    activeIcon?: 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
@@ -60,6 +82,20 @@ export type TabBarProps = ViewProps & {
      * or by keyboard/assistive-technology activation of a `TabBarButton`.
      */
     onIndexChange?: (index: number) => void;
+    /**
+     * Called with the index under the finger when a tab is pressed and HELD.
+     *
+     * This is the only way to reach a long press on the bar: its gesture detector
+     * consumes the touches (that is what makes scrubbing possible), so a button's
+     * own `onLongPress` never fires for a real finger. The gesture is added to the
+     * bar's gesture race only when this prop is supplied — holding still for half
+     * a second on a bar without it keeps behaving exactly as before, and can still
+     * start a scrub.
+     *
+     * Long-pressing does NOT move the highlight or select the tab; it is a
+     * secondary action (an account switcher on the profile tab, say).
+     */
+    onIndexLongPress?: (index: number) => void;
     /** Partial override of the theme resolved from Bloom's color tokens. */
     theme?: Partial<TabBarTheme>;
     /**

package/lib/typescript/module/tab-bar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG;IACpC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,IAAI,EAAE,UAAU,CAAC;IACjB,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,EAAE,SAAS,CAAC;IAChB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG;IACpC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;;;;;;;;OAYG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG;IAC/C,IAAI,EAAE,UAAU,CAAC;IACjB,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/lib/typescript/module/tab-bar/use-reserved-space.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The vertical space the tab bar occupies above the bottom of the window, in
+ * px. Use it directly as the bottom padding (or bottom offset) of anything that
+ * would otherwise sit under the bar:
+ *
+ * ```tsx
+ * const reserved = useTabBarReservedSpace();
+ *
+ * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
+ * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
+ * ```
+ *
+ * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
+ * inset into its own bottom gap, so it is measured from the true window edge,
+ * not from the safe area. Never write `reserved + insets.bottom`: that counts
+ * the home indicator twice and strands a visible band of dead space under every
+ * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
+ * number; nothing needs adding to it.
+ *
+ * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
+ * down and re-expands on the way up, so reserving the minimized height would
+ * hide the end of a list the moment the user scrolled back to it.
+ */
+export declare function useTabBarReservedSpace(): number;
+//# sourceMappingURL=use-reserved-space.d.ts.map

package/lib/typescript/module/tab-bar/use-reserved-space.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reserved-space.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/use-reserved-space.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAG/C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.51.1",
+  "version": "0.52.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/TabBar.test.tsx

@@ -46,6 +46,17 @@ const ITEMS: TabBarItem[] = [
   { name: 'you', label: 'You', icon: <BareIcon id="you-icon" /> },
 ];
 
+/**
+ * An item whose selected state is a different SHAPE, not a different tint —
+ * the icon-set convention (outline vs filled) that `activeIcon` exists for.
+ */
+const SHAPE_ITEM: TabBarItem = {
+  name: 'home',
+  label: 'Home',
+  icon: <BareIcon id="outline-icon" />,
+  activeIcon: <BareIcon id="filled-icon" />,
+};
+
 /** Captures the live `ThemeColors` so assertions compare against real tokens. */
 function ThemeProbe({ onColors }: { onColors: (colors: ThemeColors) => void }) {
   onColors(useTheme().colors);
@@ -259,6 +270,75 @@ describe('TabBar', () => {
     expect(flattenStyle(labelFor(UNSAFE_root, 'Home').props.style).color).toBe(theme.inactiveTint);
   });
 
+  describe('activeIcon', () => {
+    function ShapeBar() {
+      return (
+        <TabBar activeIndex={0}>
+          <TabBarButton item={SHAPE_ITEM} index={0} />
+        </TabBar>
+      );
+    }
+
+    it('renders the item icon underneath and activeIcon on the crossfade layer', () => {
+      // A tint crossfade cannot express an outline-to-filled swap: both layers
+      // would draw the same path in two colors. The layers must render two
+      // different NODES.
+      const { getAllByTestId } = renderWithTheme(<ShapeBar />);
+      expect(getAllByTestId('outline-icon')).toHaveLength(1);
+      expect(getAllByTestId('filled-icon')).toHaveLength(1);
+    });
+
+    it('puts activeIcon on the ACTIVE layer, not the inactive one', () => {
+      // The tint each node was cloned with is what identifies its layer — the
+      // crossfading layer is the one painted with `activeTint`.
+      const theme = readTheme();
+      const { getAllByTestId } = renderWithTheme(<ShapeBar />);
+      expect(getAllByTestId('filled-icon')[0]?.props.fill).toBe(theme.activeTint);
+      expect(getAllByTestId('outline-icon')[0]?.props.fill).toBe(theme.inactiveTint);
+    });
+
+    it('falls back to icon on both layers when the item has no activeIcon', () => {
+      // Full backward compatibility: an item that only carries `icon` behaves
+      // exactly as it did before `activeIcon` existed.
+      const theme = readTheme();
+      const { getAllByTestId } = renderWithTheme(<Bar activeIndex={0} />);
+      const fills = getAllByTestId('home-icon').map((node) => node.props.fill);
+      expect(fills).toHaveLength(2);
+      expect(fills).toEqual(expect.arrayContaining([theme.inactiveTint, theme.activeTint]));
+    });
+
+    it('is honoured by the native glyph too, per crossfade layer', () => {
+      const theme = readTheme();
+      const active = renderWithTheme(
+        <NativeTabBarGlyph item={SHAPE_ITEM} tint={theme.activeTint} size={21} active />,
+      );
+      expect(active.queryByTestId('filled-icon')).toBeTruthy();
+      expect(active.queryByTestId('outline-icon')).toBeNull();
+
+      const inactive = renderWithTheme(
+        <NativeTabBarGlyph item={SHAPE_ITEM} tint={theme.inactiveTint} size={21} active={false} />,
+      );
+      expect(inactive.queryByTestId('outline-icon')).toBeTruthy();
+      expect(inactive.queryByTestId('filled-icon')).toBeNull();
+    });
+
+    it('keeps the SF Symbol path on iOS, which is tinted natively', () => {
+      // A symbol IS tinted per layer by the system, so the tint crossfade is
+      // still the right expression there and `activeIcon` stays unused.
+      const theme = readTheme();
+      const { UNSAFE_root, queryByTestId } = renderWithTheme(
+        <NativeTabBarGlyph
+          item={{ ...SHAPE_ITEM, sfSymbol: 'house.fill' }}
+          tint={theme.activeTint}
+          size={21}
+          active
+        />,
+      );
+      expect(hosts(UNSAFE_root, 'SymbolView')).toHaveLength(1);
+      expect(queryByTestId('filled-icon')).toBeNull();
+    });
+  });
+
   describe('theming', () => {
     it('resolves its defaults from Bloom tokens, never a hardcoded palette', () => {
       const theme = readTheme();
@@ -322,7 +402,7 @@ describe('TabBar', () => {
       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} />,
+        <NativeTabBarGlyph item={item} tint={theme.activeTint} size={21} active />,
       );
       const symbol = hosts(UNSAFE_root, 'SymbolView')[0];
       expect(symbol?.props.name).toBe('house.fill');
@@ -333,7 +413,7 @@ describe('TabBar', () => {
     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} />,
+        <NativeTabBarGlyph item={ITEMS[0] as TabBarItem} tint={theme.activeTint} size={21} active />,
       );
       expect(hosts(UNSAFE_root, 'SymbolView')).toHaveLength(0);
       expect(queryByTestId('home-icon')).toBeTruthy();

package/src/__tests__/TabBarLongPress.test.tsx

@@ -0,0 +1,258 @@
+import React from 'react';
+import { act, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TabBar, TabBarButton } from '../tab-bar';
+import type { TabBarItem } from '../tab-bar/types';
+
+/**
+ * `onIndexLongPress` — the bar's only reachable long press.
+ *
+ * `TabBarButtonProps extends PressableProps`, so a consumer's `onLongPress`
+ * type-checks and silently does nothing: the bar's `GestureDetector` consumes
+ * the touches (that is what makes scrubbing possible), so the inner `Pressable`
+ * only ever fires for assistive technology and keyboard activation. A real held
+ * finger fails the tap gesture at 400ms, never activates the pan, and dies in
+ * `onFinalize`'s early return. The gesture below is the only path in.
+ *
+ * Like `BottomSheetGesture.test.tsx`, this file replaces the shared
+ * gesture-handler mock (which discards every registered callback) with a
+ * RECORDING one, so the gestures the bar builds can be inspected and their
+ * worklets invoked directly. What that CAN prove: which gestures are composed
+ * into the race, the duration windows they are configured with, and that the
+ * long-press worklet resolves the same index from the same x as the tap
+ * worklet. What it cannot prove is gesture-handler's own arbitration — that a
+ * held finger really reaches this handler on a device. The 400ms/500ms split
+ * asserted below is what makes that arbitration decidable rather than a race,
+ * and the behaviour itself is verified on a real build.
+ */
+
+interface MockGestureEvent {
+  x: number;
+}
+
+interface MockGesture {
+  kind: string;
+  /** Values captured from the builder chain. */
+  minDurationMs?: number;
+  maxDurationMs?: number;
+  /** Worklets captured from the builder chain. */
+  start?: (event: MockGestureEvent) => void;
+  update?: (event: MockGestureEvent) => void;
+  end?: (event: MockGestureEvent, success: boolean) => void;
+  /** Members of a composed `Gesture.Race(…)`; empty for a leaf gesture. */
+  members: MockGesture[];
+  /** Builder chain — every method returns the same object. */
+  activeOffsetX: (range: number[]) => MockGesture;
+  failOffsetY: (range: number[]) => MockGesture;
+  maxDistance: (px: number) => MockGesture;
+  maxDuration: (ms: number) => MockGesture;
+  minDuration: (ms: number) => MockGesture;
+  onStart: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onUpdate: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onEnd: (worklet: (event: MockGestureEvent, success: boolean) => void) => MockGesture;
+  onFinalize: (worklet: () => void) => MockGesture;
+}
+
+// Every gesture built since the last reset. Must be `mock`-prefixed so the
+// hoisted `jest.mock` factory may reference it.
+const mockGestures: MockGesture[] = [];
+
+jest.mock('react-native-gesture-handler', () => {
+  const build = (kind: string): MockGesture => {
+    const gesture: MockGesture = {
+      kind,
+      members: [],
+      activeOffsetX: () => gesture,
+      failOffsetY: () => gesture,
+      maxDistance: () => gesture,
+      maxDuration: (ms) => {
+        gesture.maxDurationMs = ms;
+        return gesture;
+      },
+      minDuration: (ms) => {
+        gesture.minDurationMs = ms;
+        return gesture;
+      },
+      onStart: (worklet) => {
+        gesture.start = worklet;
+        return gesture;
+      },
+      onUpdate: (worklet) => {
+        gesture.update = worklet;
+        return gesture;
+      },
+      onEnd: (worklet) => {
+        gesture.end = worklet;
+        return gesture;
+      },
+      onFinalize: () => gesture,
+    };
+    mockGestures.push(gesture);
+    return gesture;
+  };
+
+  return {
+    Gesture: {
+      Pan: () => build('Pan'),
+      Tap: () => build('Tap'),
+      LongPress: () => build('LongPress'),
+      Race: (...members: MockGesture[]) => {
+        const race = build('Race');
+        race.members.push(...members);
+        return race;
+      },
+    },
+    GestureDetector: ({ children }: { children: React.ReactNode }) => children,
+    GestureHandlerRootView: ({ children }: { children: React.ReactNode }) => children,
+  };
+});
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: null },
+  { name: 'search', label: 'Search', icon: null },
+  { name: 'you', label: 'You', icon: null },
+];
+
+/**
+ * Touch x positions inside the bar, in the 375pt window the react-native mock
+ * reports. Named by the tab they land on rather than by the geometry that puts
+ * them there: an edge touch belongs to the first/last tab and a centered one to
+ * the middle tab whatever the exact item width turns out to be.
+ */
+const NEAR_LEFT_EDGE = 8;
+const WINDOW_CENTER = 187;
+const NEAR_RIGHT_EDGE = 340;
+
+function renderBar(props: {
+  onIndexChange?: (index: number) => void;
+  onIndexLongPress?: (index: number) => void;
+}) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <TabBar activeIndex={0} {...props}>
+        {ITEMS.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} />
+        ))}
+      </TabBar>
+    </BloomThemeProvider>,
+  );
+}
+
+const gesturesOfKind = (kind: string) => mockGestures.filter((gesture) => gesture.kind === kind);
+
+/** The gesture the detector was actually given — the last race constructed. */
+function race(): MockGesture {
+  const races = gesturesOfKind('Race');
+  const last = races[races.length - 1];
+  if (!last) throw new Error('The bar composed no gesture race');
+  return last;
+}
+
+function member(kind: string): MockGesture {
+  const found = race().members.find((gesture) => gesture.kind === kind);
+  if (!found) throw new Error(`No ${kind} gesture in the bar's race`);
+  return found;
+}
+
+/** Hold a finger at `x` until the long press activates. */
+function longPressAt(x: number) {
+  act(() => {
+    member('LongPress').start?.({ x });
+  });
+}
+
+/** A tap that succeeded at `x`. */
+function tapAt(x: number) {
+  act(() => {
+    member('Tap').end?.({ x }, true);
+  });
+}
+
+describe('TabBar long press', () => {
+  beforeEach(() => {
+    mockGestures.length = 0;
+  });
+
+  it('composes no long-press gesture when no handler is given', () => {
+    // An always-armed long press would cancel the pan for anyone who rests a
+    // finger before scrubbing — a regression for every existing consumer.
+    renderBar({});
+    expect(gesturesOfKind('LongPress')).toHaveLength(0);
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap']);
+  });
+
+  it('adds one to the race, alongside the pan and the tap, when a handler is given', () => {
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap', 'LongPress']);
+  });
+
+  it('arms it after the tap gesture has already given up', () => {
+    // The two windows must not overlap, or arming a long press would sometimes
+    // cost the bar a tap. The tap gives up at 400ms; the long press activates
+    // at 500ms, so at no instant are both candidates.
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(member('LongPress').minDurationMs).toBe(500);
+    expect(member('Tap').maxDurationMs).toBe(400);
+    expect(member('Tap').maxDurationMs ?? 0).toBeLessThan(member('LongPress').minDurationMs ?? 0);
+  });
+
+  it('reports the index of the tab under the finger', () => {
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexLongPress });
+
+    longPressAt(NEAR_LEFT_EDGE);
+    longPressAt(WINDOW_CENTER);
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexLongPress.mock.calls).toEqual([[0], [1], [2]]);
+  });
+
+  it('resolves the same index a tap at the same point would', () => {
+    // Long press, tap and scrub all share one `indexAtX` worklet; this is what
+    // keeps a long press from ever acting on a different tab than the one the
+    // finger is visibly on.
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    for (const x of [NEAR_LEFT_EDGE, 100, WINDOW_CENTER, 250, NEAR_RIGHT_EDGE]) {
+      tapAt(x);
+      longPressAt(x);
+    }
+
+    expect(onIndexLongPress.mock.calls).toEqual(onIndexChange.mock.calls);
+  });
+
+  it('does not select the tab it long-presses', () => {
+    // It is a secondary action (an account sheet, say) — navigating as well
+    // would take the user off the screen they opened it from.
+    const onIndexChange = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress: jest.fn() });
+
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).not.toHaveBeenCalled();
+  });
+
+  it('still selects on a short tap while the long press is armed', () => {
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    tapAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).toHaveBeenCalledTimes(1);
+    expect(onIndexChange).toHaveBeenCalledWith(2);
+    expect(onIndexLongPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps the scrub gesture in the race', () => {
+    // The pan is what makes the highlight scrubbable; a long press must not
+    // have displaced it.
+    renderBar({ onIndexLongPress: jest.fn() });
+    // Its scrub worklet, not merely a pan object: this is the handler that
+    // drags the highlight under the finger.
+    expect(typeof member('Pan').update).toBe('function');
+  });
+});