@oxy.so/bloom 4.4.0 → 4.6.0

package/src/icons/remix/RiFloodLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `flood-line` (Weather). */
+export const RiFloodLine = createSinglePathSVG({
+  path: 'M16.0001 17.4723C17.0616 18.4223 18.4634 19 20 19H22V21H20C18.5428 21 17.1766 20.6104 15.9998 19.9296C14.8242 20.6101 13.4576 21 12 21C10.5428 21 9.17657 20.6104 7.99984 19.9296C6.8242 20.6101 5.45763 21 4 21H2V19H4C5.53713 19 6.93925 18.422 8.00013 17.4723C9.06163 18.4223 10.4634 19 12 19C13.5371 19 14.9393 18.422 16.0001 17.4723ZM12.5734 1.53204L12.6727 1.6115L23 11H20V17C19.2988 17 18.6258 16.8797 18.0003 16.6587L18 9.15698L12 3.70198L6 9.15598L6.00125 16.6582C5.4648 16.8479 4.89325 16.9635 4.29898 16.9927L4 17V11H1L11.3273 1.6115C11.677 1.29365 12.1956 1.26716 12.5734 1.53204Z',
+});

package/src/icons/remix/RiLockUnlockLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `lock-unlock-line` (System). */
+export const RiLockUnlockLine = createSinglePathSVG({
+  path: 'M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z',
+});

package/src/icons/remix/RiMoneyDollarCircleLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `money-dollar-circle-line` (Finance). */
+export const RiMoneyDollarCircleLine = createSinglePathSVG({
+  path: 'M12.0049 22.0027C6.48204 22.0027 2.00488 17.5256 2.00488 12.0027C2.00488 6.4799 6.48204 2.00275 12.0049 2.00275C17.5277 2.00275 22.0049 6.4799 22.0049 12.0027C22.0049 17.5256 17.5277 22.0027 12.0049 22.0027ZM12.0049 20.0027C16.4232 20.0027 20.0049 16.421 20.0049 12.0027C20.0049 7.58447 16.4232 4.00275 12.0049 4.00275C7.5866 4.00275 4.00488 7.58447 4.00488 12.0027C4.00488 16.421 7.5866 20.0027 12.0049 20.0027ZM8.50488 14.0027H14.0049C14.281 14.0027 14.5049 13.7789 14.5049 13.5027C14.5049 13.2266 14.281 13.0027 14.0049 13.0027H10.0049C8.62417 13.0027 7.50488 11.8835 7.50488 10.5027C7.50488 9.12203 8.62417 8.00275 10.0049 8.00275H11.0049V6.00275H13.0049V8.00275H15.5049V10.0027H10.0049C9.72874 10.0027 9.50488 10.2266 9.50488 10.5027C9.50488 10.7789 9.72874 11.0027 10.0049 11.0027H14.0049C15.3856 11.0027 16.5049 12.122 16.5049 13.5027C16.5049 14.8835 15.3856 16.0027 14.0049 16.0027H13.0049V18.0027H11.0049V16.0027H8.50488V14.0027Z',
+});

package/src/icons/remix/RiPlayCircleLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `play-circle-line` (Media). */
+export const RiPlayCircleLine = createSinglePathSVG({
+  path: 'M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM10.6219 8.41459L15.5008 11.6672C15.6846 11.7897 15.7343 12.0381 15.6117 12.2219C15.5824 12.2658 15.5447 12.3035 15.5008 12.3328L10.6219 15.5854C10.4381 15.708 10.1897 15.6583 10.0672 15.4745C10.0234 15.4088 10 15.3316 10 15.2526V8.74741C10 8.52649 10.1791 8.34741 10.4 8.34741C10.479 8.34741 10.5562 8.37078 10.6219 8.41459Z',
+});

package/src/icons/remix/RiRocket2Line.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `rocket-2-line` (Map). */
+export const RiRocket2Line = createSinglePathSVG({
+  path: 'M15.5018 20.0048C14.8432 21.5841 13.5794 22.848 12 23.5066C10.4206 22.848 9.15679 21.5841 8.49816 20.0048H10.7575C11.0838 20.4934 11.5051 20.9171 12 21.248C12.4949 20.9171 12.9162 20.4934 13.2425 20.0048H15.5018ZM18 14.8095L20 17.0777V19.0048H4V17.0777L6 14.8095V9.00478C6 5.52153 8.50442 2.55822 12 1.45999C15.4956 2.55822 18 5.52153 18 9.00478V14.8095ZM17.2692 17.0048L16 15.5653V9.00478C16 6.68694 14.4292 4.57431 12 3.58384C9.57078 4.57431 8 6.68694 8 9.00478V15.5653L6.73076 17.0048H17.2692ZM12 11.0048C10.8954 11.0048 10 10.1093 10 9.00478C10 7.90021 10.8954 7.00478 12 7.00478C13.1046 7.00478 14 7.90021 14 9.00478C14 10.1093 13.1046 11.0048 12 11.0048Z',
+});

package/src/icons/remix/RiServerLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `server-line` (Device). */
+export const RiServerLine = createSinglePathSVG({
+  path: 'M5 11H19V5H5V11ZM21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4ZM19 13H5V19H19V13ZM7 15H10V17H7V15ZM7 7H10V9H7V7Z',
+});

package/src/icons/remix/RiShareBoxLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `share-box-line` (System). */
+export const RiShareBoxLine = createSinglePathSVG({
+  path: 'M10 3V5H5V19H19V14H21V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H10ZM17.5858 5H13V3H21V11H19V6.41421L12 13.4142L10.5858 12L17.5858 5Z',
+});

package/src/icons/remix/RiTv2Line.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `tv-2-line` (Device). */
+export const RiTv2Line = createSinglePathSVG({
+  path: 'M2 4.00087C2 3.44811 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44463 22 4.00087V17.9991C22 18.5519 21.5447 19 21.0082 19H2.9918C2.44405 19 2 18.5554 2 17.9991V4.00087ZM4 5V17H20V5H4ZM5 20H19V22H5V20Z',
+});

package/src/icons/remix/index.ts

@@ -55,6 +55,7 @@ export { RiBlueskyFill } from './RiBlueskyFill';
 export { RiBold } from './RiBold';
 export { RiBookOpenFill } from './RiBookOpenFill';
 export { RiBookOpenLine } from './RiBookOpenLine';
+export { RiBookReadLine } from './RiBookReadLine';
 export { RiBookShelfLine } from './RiBookShelfLine';
 export { RiBookmark3Line } from './RiBookmark3Line';
 export { RiBookmarkFill } from './RiBookmarkFill';
@@ -63,6 +64,7 @@ export { RiBox3Line } from './RiBox3Line';
 export { RiBriefcase4Line } from './RiBriefcase4Line';
 export { RiBroadcastLine } from './RiBroadcastLine';
 export { RiBrushAiLine } from './RiBrushAiLine';
+export { RiBugLine } from './RiBugLine';
 export { RiBuilding2Line } from './RiBuilding2Line';
 export { RiBuilding4Line } from './RiBuilding4Line';
 export { RiBuildingLine } from './RiBuildingLine';
@@ -81,6 +83,7 @@ export { RiCameraSwitchLine } from './RiCameraSwitchLine';
 export { RiCapsuleFill } from './RiCapsuleFill';
 export { RiCarLine } from './RiCarLine';
 export { RiCastLine } from './RiCastLine';
+export { RiChat1Line } from './RiChat1Line';
 export { RiChat3Fill } from './RiChat3Fill';
 export { RiChat3Line } from './RiChat3Line';
 export { RiChat4Fill } from './RiChat4Fill';
@@ -101,7 +104,9 @@ export { RiCloseCircleLine } from './RiCloseCircleLine';
 export { RiCloseLine } from './RiCloseLine';
 export { RiClosedCaptioningFill } from './RiClosedCaptioningFill';
 export { RiClosedCaptioningLine } from './RiClosedCaptioningLine';
+export { RiCloudLine } from './RiCloudLine';
 export { RiCodeBlock } from './RiCodeBlock';
+export { RiCodeLine } from './RiCodeLine';
 export { RiCodeSLine } from './RiCodeSLine';
 export { RiCodeSSlashLine } from './RiCodeSSlashLine';
 export { RiCoinsFill } from './RiCoinsFill';
@@ -116,6 +121,7 @@ export { RiContractLeftRightLine } from './RiContractLeftRightLine';
 export { RiCornerDownLeftLine } from './RiCornerDownLeftLine';
 export { RiCornerDownRightLine } from './RiCornerDownRightLine';
 export { RiCornerUpLeftLine } from './RiCornerUpLeftLine';
+export { RiCpuLine } from './RiCpuLine';
 export { RiCropLine } from './RiCropLine';
 export { RiCursorLine } from './RiCursorLine';
 export { RiCustomerService2Line } from './RiCustomerService2Line';
@@ -180,6 +186,7 @@ export { RiFlaskLine } from './RiFlaskLine';
 export { RiFlightTakeoffLine } from './RiFlightTakeoffLine';
 export { RiFlipHorizontalLine } from './RiFlipHorizontalLine';
 export { RiFlipVerticalLine } from './RiFlipVerticalLine';
+export { RiFloodLine } from './RiFloodLine';
 export { RiFlowerLine } from './RiFlowerLine';
 export { RiFocus3Line } from './RiFocus3Line';
 export { RiFolder2Line } from './RiFolder2Line';
@@ -257,6 +264,7 @@ export { RiLiveLine } from './RiLiveLine';
 export { RiLoader4Line } from './RiLoader4Line';
 export { RiLock2Line } from './RiLock2Line';
 export { RiLockLine } from './RiLockLine';
+export { RiLockUnlockLine } from './RiLockUnlockLine';
 export { RiLoginBoxLine } from './RiLoginBoxLine';
 export { RiLogoutBoxRLine } from './RiLogoutBoxRLine';
 export { RiLogoutCircleLine } from './RiLogoutCircleLine';
@@ -284,6 +292,7 @@ export { RiMic2Line } from './RiMic2Line';
 export { RiMicLine } from './RiMicLine';
 export { RiMicOffFill } from './RiMicOffFill';
 export { RiMicOffLine } from './RiMicOffLine';
+export { RiMoneyDollarCircleLine } from './RiMoneyDollarCircleLine';
 export { RiMoneyEuroBoxLine } from './RiMoneyEuroBoxLine';
 export { RiMoonClearFill } from './RiMoonClearFill';
 export { RiMoonLine } from './RiMoonLine';
@@ -313,6 +322,7 @@ export { RiPencilLine } from './RiPencilLine';
 export { RiPhoneFill } from './RiPhoneFill';
 export { RiPhoneLine } from './RiPhoneLine';
 export { RiPlantLine } from './RiPlantLine';
+export { RiPlayCircleLine } from './RiPlayCircleLine';
 export { RiPlayFill } from './RiPlayFill';
 export { RiPlayLine } from './RiPlayLine';
 export { RiPlayList2Line } from './RiPlayList2Line';
@@ -343,6 +353,7 @@ export { RiResetRightLine } from './RiResetRightLine';
 export { RiRestaurantLine } from './RiRestaurantLine';
 export { RiRobot2Fill } from './RiRobot2Fill';
 export { RiRobot2Line } from './RiRobot2Line';
+export { RiRocket2Line } from './RiRocket2Line';
 export { RiRouteLine } from './RiRouteLine';
 export { RiRssFill } from './RiRssFill';
 export { RiRulerLine } from './RiRulerLine';
@@ -353,6 +364,7 @@ export { RiSearchFill } from './RiSearchFill';
 export { RiSearchLine } from './RiSearchLine';
 export { RiSeedlingLine } from './RiSeedlingLine';
 export { RiSendPlaneLine } from './RiSendPlaneLine';
+export { RiServerLine } from './RiServerLine';
 export { RiSettings3Fill } from './RiSettings3Fill';
 export { RiSettings3Line } from './RiSettings3Line';
 export { RiSettings4Line } from './RiSettings4Line';
@@ -361,6 +373,7 @@ export { RiSettingsLine } from './RiSettingsLine';
 export { RiShakeHandsLine } from './RiShakeHandsLine';
 export { RiShapesLine } from './RiShapesLine';
 export { RiShare2Line } from './RiShare2Line';
+export { RiShareBoxLine } from './RiShareBoxLine';
 export { RiShareForwardLine } from './RiShareForwardLine';
 export { RiShareLine } from './RiShareLine';
 export { RiShieldCheckFill } from './RiShieldCheckFill';
@@ -426,6 +439,7 @@ export { RiToolsLine } from './RiToolsLine';
 export { RiTrainLine } from './RiTrainLine';
 export { RiTranslate2 } from './RiTranslate2';
 export { RiTreeLine } from './RiTreeLine';
+export { RiTv2Line } from './RiTv2Line';
 export { RiTvLine } from './RiTvLine';
 export { RiTwitterXFill } from './RiTwitterXFill';
 export { RiUnpinLine } from './RiUnpinLine';

package/src/index.ts

@@ -167,7 +167,11 @@ export {
   ScrollOffsetProvider,
   useScrollOffset,
   ScreenScope,
+  HeaderDockProvider,
+  useHeaderDockInset,
+  StickySection,
 } from './layout';
+export type { StickySectionProps } from './layout';
 export { Fab } from './fab';
 export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab';
 export { FrostedIconButton } from './frosted-icon-button';

package/src/index.web.ts

@@ -172,7 +172,11 @@ export {
   ScrollOffsetProvider,
   useScrollOffset,
   ScreenScope,
+  HeaderDockProvider,
+  useHeaderDockInset,
+  StickySection,
 } from './layout';
+export type { StickySectionProps } from './layout';
 export { Fab } from './fab/index.web';
 export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab/index.web';
 export { FrostedIconButton } from './frosted-icon-button/index.web';

package/src/layout/StickySection.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_STICKY, webSurfaceStickyTopPlus, type WebCssStyle } from '../styles/web-view-style';
+import { useHeaderDockContext } from './header-dock';
+import { useTopEdgeInset } from './top-edge';
+
+export interface StickySectionProps extends ViewProps {
+  /** Native: this sticky child's Y in the list content, measured by its owner. */
+  offset?: number;
+}
+
+/** One docking section. Native lists retain ownership of stickyHeaderIndices. */
+export function StickySection({children, offset, style, onLayout, ...props}: StickySectionProps) {
+  const dock = useHeaderDockContext();
+  const top = useTopEdgeInset();
+  const fill = useSurfaceFill();
+  const marker = useRef<View>(null);
+  const section = useRef<View>(null);
+  const owner = useRef({});
+  const measure = useCallback(() => {
+    if (!dock) return;
+    if (Platform.OS !== 'web') {
+      if (offset !== undefined) {
+        dock.targets.current.set(owner.current, offset);
+        dock.sectionOffset.value = offset;
+      }
+      return;
+    }
+    const anchor = marker.current as unknown as HTMLElement | null;
+    const sticky = section.current as unknown as HTMLElement | null;
+    if (!anchor?.getBoundingClientRect || !sticky) return;
+    // The zero-height marker remains in normal flow while the section sticks.
+    // Its coordinate is measured against the actual scrolling viewport.
+    let viewportTop = 0;
+    for (let parent = anchor.parentElement; parent; parent = parent.parentElement) {
+      if (/(auto|scroll)/.test(getComputedStyle(parent).overflowY)) {
+        viewportTop = parent.getBoundingClientRect().top + parent.clientTop;
+        break;
+      }
+    }
+    const stickyTop = Number.parseFloat(getComputedStyle(sticky).top) || top;
+    const measuredOffset = anchor.getBoundingClientRect().top - viewportTop + dock.scrollY.value - stickyTop + top;
+    dock.targets.current.set(owner.current, measuredOffset);
+    dock.sectionOffset.value = measuredOffset;
+  }, [dock, offset, top]);
+  useEffect(() => {
+    measure();
+    if (Platform.OS !== 'web') return;
+    const anchor = marker.current as unknown as HTMLElement | null;
+    const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
+    // Ancestor size changes cover delayed hero images/fonts without a scroll listener.
+    for (let element = anchor?.parentElement; element; element = element.parentElement) observer?.observe(element);
+    window.addEventListener('resize', measure);
+    return () => { observer?.disconnect(); window.removeEventListener('resize', measure); };
+  }, [measure]);
+  useEffect(() => () => {
+    if (!dock) return;
+    dock.targets.current.delete(owner.current);
+    // Virtualized lists may mount a sticky clone alongside the original cell.
+    // Removing that clone must restore the still-mounted original's target.
+    let remaining = Number.POSITIVE_INFINITY;
+    for (const target of dock.targets.current.values()) remaining = target;
+    dock.sectionOffset.value = remaining;
+  }, [dock]);
+  const stickyStyle: WebCssStyle = Platform.OS === 'web'
+    ? {position:WEB_POSITION_STICKY, top:webSurfaceStickyTopPlus(top), zIndex:Z_INDEX.raised}
+    : {zIndex:Z_INDEX.raised};
+  return <>
+    {Platform.OS === 'web' && <View ref={marker} pointerEvents="none" style={{height:0}} />}
+    <View {...props} ref={section} onLayout={event => {measure(); onLayout?.(event);}}
+      style={[stickyStyle, {backgroundColor:fill}, style]}>{children}</View>
+  </>;
+}

package/src/layout/header-dock.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, useContext, useMemo, useRef, useState, type PropsWithChildren } from 'react';
+import { Platform } from 'react-native';
+import { useDerivedValue, useSharedValue, type SharedValue } from 'react-native-reanimated';
+import { useScreenContext } from '../screen/context';
+import { useScrollOffset } from './scroll-offset';
+import { TopEdgeProvider, useTopEdgeInset } from './top-edge';
+
+interface HeaderDockState {
+  scrollY: SharedValue<number>;
+  headerHeight: SharedValue<number>;
+  overlay: SharedValue<boolean>;
+  overlaps: boolean;
+  setOverlaps: React.Dispatch<React.SetStateAction<boolean>>;
+  sectionOffset: SharedValue<number>;
+  progress: SharedValue<number>;
+  targets: React.MutableRefObject<Map<object, number>>;
+}
+const HeaderDockContext = createContext<HeaderDockState | null>(null);
+export function useHeaderDockContext() { return useContext(HeaderDockContext); }
+
+/** Native lists already below an inline header need no additional clearance. */
+export function useHeaderDockInset(): number {
+  const dock = useHeaderDockContext();
+  const height = useTopEdgeInset();
+  return Platform.OS === 'web' || dock?.overlaps ? height : 0;
+}
+
+/** Pairs one header and its docking section without rendering on scroll frames. */
+export function HeaderDockProvider({ children, scrollY: supplied }: PropsWithChildren<{ scrollY?: SharedValue<number> }>) {
+  const screen = useScreenContext();
+  const contextual = useScrollOffset();
+  const rest = useSharedValue(0);
+  const scrollY = supplied ?? screen?.scrollY ?? contextual ?? rest;
+  const headerHeight = useSharedValue(0);
+  const overlay = useSharedValue(false);
+  const [overlaps, setOverlaps] = useState(false);
+  const sectionOffset = useSharedValue(Number.POSITIVE_INFINITY);
+  const targets = useRef(new Map<object, number>());
+  const progress = useDerivedValue(() => Math.min(1, Math.max(0, (scrollY.value - sectionOffset.value + (Platform.OS === 'web' || overlay.value ? headerHeight.value : 0) + 12) / 12)), [scrollY, sectionOffset, headerHeight, overlay]);
+  const value = useMemo(() => ({scrollY,headerHeight,sectionOffset,progress,targets,overlay,overlaps,setOverlaps}), [scrollY,headerHeight,sectionOffset,progress,overlay,overlaps]);
+  return <TopEdgeProvider><HeaderDockContext.Provider value={value}>{children}</HeaderDockContext.Provider></TopEdgeProvider>;
+}

package/src/layout/index.ts

@@ -14,3 +14,7 @@ export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from './bo
 export { TopEdgeProvider, useClaimTopEdge, useTopEdgeInset } from './top-edge';
 export { ScrollOffsetProvider, useScrollOffset } from './scroll-offset';
 export { ScreenScope } from './screen-scope';
+
+export { HeaderDockProvider, useHeaderDockInset } from './header-dock';
+export { StickySection } from './StickySection';
+export type { StickySectionProps } from './StickySection';

package/src/list/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/list/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export type {
   VirtualListHandle,
   VirtualListProps,

package/src/loading/Loading.tsx

@@ -1,8 +1,11 @@
-import { normalizeBloomSize } from '../appearance/legacy';
-import { resolveBloomColors } from '../appearance/colors';
-import { useBloomAppearance } from '../appearance';
-import React, { memo, useEffect, useMemo } from 'react';
-import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
+/**
+ * `Loading` — NATIVE: the `top` variant's motion on react-native-reanimated.
+ *
+ * Everything else about the family is shared (`LoadingBase`); this file holds
+ * only what forks, and binds it. The `spinner` and `inline` variants, the size
+ * table and the stylesheet are identical on both platforms.
+ */
+import React, { useEffect } from 'react';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -10,60 +13,14 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { useTheme } from '../theme/use-theme';
+import { normalizeBloomSize } from '../appearance/legacy';
+import { resolveBloomColors } from '../appearance/colors';
+import { useBloomAppearance } from '../appearance';
 import { animation } from '../styles/tokens';
+import { useTheme } from '../theme/use-theme';
+import { bindLoading, SIZE_CONFIG, styles } from './LoadingBase';
 import { SpinnerIcon } from './SpinnerIcon';
-import type {
-  LoadingProps,
-  SpinnerLoadingProps,
-  TopLoadingProps,
-  InlineLoadingProps,
-} from './types';
-
-const SIZE_CONFIG = {
-  xs: { spinner: 16, text: 12 },
-  sm: { spinner: 20, text: 13 },
-  md: { spinner: 24, text: 15 },
-  lg: { spinner: 44, text: 16 },
-} as const;
-
-const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
-  size: sizeProp,
-  color,
-  tone: toneProp,
-  className,
-  text,
-  textStyle,
-  style,
-  showText = true,
-  iconSize,
-  spinnerIcon,
-  testID,
-}) => {
-  const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
-  const sizeConfig = SIZE_CONFIG[size];
-  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
-  const spinnerColor = className ? 'currentColor' : (color ?? resolveBloomColors(theme.colors, tone, 'solid').background);
-  const textColor = color ?? theme.colors.textSecondary;
-
-  return (
-    <View style={[styles.container, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
-      {showText && text && (
-        <Text
-          style={[
-            styles.text,
-            { color: textColor, fontSize: sizeConfig.text, marginTop: 8 },
-            textStyle,
-          ]}
-        >
-          {text}
-        </Text>
-      )}
-    </View>
-  );
-};
+import type { TopLoadingProps } from './types';
 
 const TopLoading: React.FC<TopLoadingProps> = ({
   size: sizeProp,
@@ -118,81 +75,4 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   );
 };
 
-const InlineLoading: React.FC<InlineLoadingProps> = ({
-  size: sizeProp,
-  color,
-  tone: toneProp,
-  text,
-  style,
-  textStyle,
-  spinnerIcon,
-  testID,
-}) => {
-  const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
-  const sizeConfig = SIZE_CONFIG[size];
-  const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
-  const textColor = theme.colors.textSecondary;
-
-  return (
-    <View style={[styles.inlineContainer, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={sizeConfig.spinner} color={spinnerColor} />}
-      {text && (
-        <Text
-          style={[
-            { color: textColor, fontSize: sizeConfig.text, marginLeft: 8 },
-            textStyle,
-          ]}
-        >
-          {text}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-const LoadingComponent: React.FC<LoadingProps> = (props) => {
-  const variant = props.variant ?? 'spinner';
-
-  switch (variant) {
-    case 'top':
-      return <TopLoading {...(props as TopLoadingProps)} />;
-    case 'inline':
-      return <InlineLoading {...(props as InlineLoadingProps)} />;
-    case 'spinner':
-    default:
-      return <SpinnerLoading {...(props as SpinnerLoadingProps)} />;
-  }
-};
-
-export const Loading = memo(LoadingComponent);
-Loading.displayName = 'Loading';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  text: {
-    textAlign: 'center',
-  },
-  topContainer: {
-    width: '100%',
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  topLoadingView: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  },
-  inlineContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export const { Loading } = bindLoading({ SpinnerIcon, TopLoading });

package/src/loading/Loading.web.tsx

@@ -1,65 +1,24 @@
+/**
+ * `Loading` — WEB: the `top` variant's motion on CSS transitions.
+ *
+ * The native fork statically imports react-native-reanimated, whose worklets
+ * Babel plugin is native-only — importing it statically breaks every web
+ * bundler, Vite, webpack and Metro-web alike. That is the whole reason this
+ * family forks. Everything else is shared (`LoadingBase`): the `spinner` and
+ * `inline` variants, the size table and the stylesheet.
+ */
+import React from 'react';
+import { View } from 'react-native';
+
 import { normalizeBloomSize } from '../appearance/legacy';
 import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
-import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
-
+import { animation } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
-
 import { useTheme } from '../theme/use-theme';
-import { animation } from '../styles/tokens';
+import { bindLoading, SIZE_CONFIG, styles } from './LoadingBase';
 import { SpinnerIcon } from './SpinnerIcon.web';
-import type {
-  LoadingProps,
-  SpinnerLoadingProps,
-  TopLoadingProps,
-  InlineLoadingProps,
-} from './types';
-
-const SIZE_CONFIG = {
-  xs: { spinner: 16, text: 12 },
-  sm: { spinner: 20, text: 13 },
-  md: { spinner: 24, text: 15 },
-  lg: { spinner: 44, text: 16 },
-} as const;
-
-const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
-  size: sizeProp,
-  color,
-  tone: toneProp,
-  className,
-  text,
-  textStyle,
-  style,
-  showText = true,
-  iconSize,
-  spinnerIcon,
-  testID,
-}) => {
-  const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
-  const sizeConfig = SIZE_CONFIG[size];
-  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
-  const spinnerColor = className ? 'currentColor' : (color ?? resolveBloomColors(theme.colors, tone, 'solid').background);
-  const textColor = color ?? theme.colors.textSecondary;
-
-  return (
-    <View style={[styles.container, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
-      {showText && text && (
-        <Text
-          style={[
-            styles.text,
-            { color: textColor, fontSize: sizeConfig.text, marginTop: 8 },
-            textStyle,
-          ]}
-        >
-          {text}
-        </Text>
-      )}
-    </View>
-  );
-};
+import type { TopLoadingProps } from './types';
 
 /**
  * Web fork of the `top` variant.
@@ -131,81 +90,4 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   );
 };
 
-const InlineLoading: React.FC<InlineLoadingProps> = ({
-  size: sizeProp,
-  color,
-  tone: toneProp,
-  text,
-  style,
-  textStyle,
-  spinnerIcon,
-  testID,
-}) => {
-  const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
-  const sizeConfig = SIZE_CONFIG[size];
-  const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
-  const textColor = theme.colors.textSecondary;
-
-  return (
-    <View style={[styles.inlineContainer, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={sizeConfig.spinner} color={spinnerColor} />}
-      {text && (
-        <Text
-          style={[
-            { color: textColor, fontSize: sizeConfig.text, marginLeft: 8 },
-            textStyle,
-          ]}
-        >
-          {text}
-        </Text>
-      )}
-    </View>
-  );
-};
-
-const LoadingComponent: React.FC<LoadingProps> = (props) => {
-  const variant = props.variant ?? 'spinner';
-
-  switch (variant) {
-    case 'top':
-      return <TopLoading {...(props as TopLoadingProps)} />;
-    case 'inline':
-      return <InlineLoading {...(props as InlineLoadingProps)} />;
-    case 'spinner':
-    default:
-      return <SpinnerLoading {...(props as SpinnerLoadingProps)} />;
-  }
-};
-
-export const Loading = memo(LoadingComponent);
-Loading.displayName = 'Loading';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-  },
-  text: {
-    textAlign: 'center',
-  },
-  topContainer: {
-    width: '100%',
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  topLoadingView: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  },
-  inlineContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+export const { Loading } = bindLoading({ SpinnerIcon, TopLoading });