@oxy.so/bloom 2.9.0 → 2.11.0

package/src/file-upload/shared.ts

@@ -0,0 +1,32 @@
+/**
+ * The size formatter, split out of `FileUpload.tsx` so a caller can have the
+ * STRING without the component.
+ *
+ * `message-media`'s file bubble and shared-files list print the same "2.4 MB"
+ * and must agree with the uploader that produced it. Importing it from
+ * `FileUpload.tsx` would drag the whole uploader — reanimated, its icons, its
+ * drop-zone web CSS — into every consumer of `@oxy.so/bloom/message-media`,
+ * which Metro does not tree-shake away. `FileUpload.tsx` re-exports it, so the
+ * public spelling is unchanged.
+ */
+
+/**
+ * Bytes as a size string: `"312 KB"`, `"2.4 MB"`, `"15 MB"`, `"1.4 GB"`.
+ *
+ * Binary units (1024), one decimal below ten of a unit and none at or above it,
+ * and a floor of 1 KB — a 200-byte attachment reading "0 KB" looks like a failed
+ * upload.
+ */
+export function formatFileSize(bytes: number): string {
+  const GB = 1024 * 1024 * 1024;
+  const MB = 1024 * 1024;
+  if (bytes >= GB) {
+    const gb = bytes / GB;
+    return `${gb >= 10 ? Math.round(gb) : Math.round(gb * 10) / 10} GB`;
+  }
+  if (bytes >= MB) {
+    const mb = bytes / MB;
+    return `${mb >= 10 ? Math.round(mb) : Math.round(mb * 10) / 10} MB`;
+  }
+  return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+}

package/src/floating/FloatingPanel.tsx

@@ -58,7 +58,7 @@
  * than to the ones it reads, so an omitted value runs the mapper once and
  * freezes it.
  */
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
   Easing,
@@ -75,6 +75,7 @@ import {
 } from '../overlay/dropdown-placement';
 import { Portal } from '../portal/index.web';
 import { StyledView } from '../styles/styled-primitives';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
   DEFAULT_ALIGN_OFFSET,
@@ -90,6 +91,7 @@ import {
 import { useMenuPalette } from './menu-palette';
 import { cx } from './shared';
 import type { FloatingPanelProps, FloatingSide } from './types';
+import { useFrameThrottle } from './use-frame-throttle';
 
 /**
  * The one node: the panel's own chrome, the caller's classes, the computed
@@ -157,6 +159,17 @@ function resolvedSide(
   return placement.top >= anchorStart ? 'bottom' : 'top';
 }
 
+/**
+ * Did the surface land in the same place? A placement is two numbers, and while
+ * the page scrolls most passes produce the two it already had — the trigger sits
+ * in a fixed header, or in an ancestor the gesture is not scrolling.
+ */
+function samePlacement(a: DropdownPlacement | null, b: DropdownPlacement | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.top === b.top && a.left === b.left;
+}
+
 /** The corner the panel grows from: the one nearest its trigger. */
 function transformOriginFor(side: FloatingSide, align: string): string {
   const cross =
@@ -200,6 +213,12 @@ export function FloatingPanel({
   // effect keyed only on `open` would measure nothing.
   const [panelNode, setPanelNode] = useState<View | null>(null);
   const [placement, setPlacement] = useState<DropdownPlacement | null>(null);
+  // What was last published, mirrored so a pass that resolves to the position
+  // the panel already holds never reaches the dispatcher. Returning the current
+  // state from a `setState` updater is not the same thing: React still
+  // re-renders once before it bails out, which on a scroll is a render per frame
+  // for a surface that did not move.
+  const published = useRef<DropdownPlacement | null>(null);
   const [phase, setPhase] = useState<Phase>(open ? 'open' : 'closed');
   const [lastOpen, setLastOpen] = useState(open);
   const reducedMotion = useReducedMotion();
@@ -209,6 +228,12 @@ export function FloatingPanel({
     setPanelNode(node);
   }, []);
 
+  const store = useCallback((next: DropdownPlacement | null) => {
+    if (samePlacement(published.current, next)) return;
+    published.current = next;
+    setPlacement(next);
+  }, []);
+
   // `open` drives the phase; a close goes through `closing` so the exit has time
   // to run before the subtree leaves the tree.
   //
@@ -236,7 +261,11 @@ export function FloatingPanel({
     return () => clearTimeout(timer);
   }, [phase, reducedMotion, chrome.duration]);
 
-  useLayoutEffect(() => {
+  // ONE pass of the placement: two forced layout reads (`getBoundingClientRect`
+  // and the `offset*` pair) and, at most, one state update. Split out of the
+  // effect that used to own it so the listeners below can be registered once and
+  // still call the CURRENT closure.
+  const resolve = useCallback(() => {
     // While closing, the panel holds the position it was last placed at: the
     // anchor is already gone (`useAnchorRect` clears it on close) and a
     // re-resolve would snap the surface somewhere else mid-exit.
@@ -244,7 +273,7 @@ export function FloatingPanel({
     // react-native-web resolves a `View` ref to the DOM element itself. Read
     // through the one method needed rather than asserting the whole
     // `HTMLElement` interface, and capture it as a local so the narrowing holds
-    // inside `update` — a property check does not survive into a closure.
+    // below — a property check does not survive into a closure.
     const element = panelNode as unknown as {
       getBoundingClientRect?: () => DOMRect;
       offsetWidth?: number;
@@ -257,59 +286,81 @@ export function FloatingPanel({
       typeof window === 'undefined' ||
       typeof measure !== 'function'
     ) {
-      setPlacement(null);
+      store(null);
       return;
     }
 
-    const update = () => {
-      const box = measure.call(element);
-      // The LAYOUT box, not the visual one. `getBoundingClientRect` reports the
-      // TRANSFORMED rectangle, and this panel is measured while its own enter is
-      // still at `scale(0.95)` — so the rect is 5% small. `far` placements never
-      // read the extent and looked perfect; the FLIPPED and `align="end"` ones
-      // do, and were out by 5% of the surface. Measured: a 256px sub-panel read
-      // as 243.2 and flipped 12.8px over its parent. `offsetWidth`/`offsetHeight`
-      // are the untransformed border box, integer-rounded, which is the right
-      // precision for a fit/flip decision. The rect is still the fallback for a
-      // non-DOM node (a jsdom stub has neither).
-      const layoutWidth = element?.offsetWidth ?? box.width;
-      const layoutHeight = element?.offsetHeight ?? box.height;
-      // Measured BEFORE `minWidth` is applied, so the laid-out surface can only
-      // be wider than the box read here — and a wider surface wraps less, so the
-      // measured height is an upper bound. Erring that way flips early in a tie,
-      // never late. The panel's own `min-w-*` CLASS is already in the box, since
-      // a stylesheet rule applies before a layout effect can read the node.
-      const width = Math.max(layoutWidth, minWidth ?? 0);
-      // The align axis is the one `side` does not name.
-      const alignsVertically = side === 'left' || side === 'right';
-      const shiftY = alignsVertically ? alignOffset : 0;
-      const shiftX = alignsVertically ? 0 : alignOffset;
-      setPlacement(
-        resolveDropdownPlacement({
-          anchor: {
-            top: anchor.top + shiftY,
-            bottom: anchor.bottom + shiftY,
-            left: anchor.left + shiftX,
-            right: anchor.right + shiftX,
-          },
-          size: { width, height: layoutHeight },
-          viewport: { width: window.innerWidth, height: window.innerHeight },
-          offset: sideOffset,
-          gutter: VIEWPORT_GUTTER,
-          align,
-          side,
-        }),
-      );
-    };
+    const box = measure.call(element);
+    // The LAYOUT box, not the visual one. `getBoundingClientRect` reports the
+    // TRANSFORMED rectangle, and this panel is measured while its own enter is
+    // still at `scale(0.95)` — so the rect is 5% small. `far` placements never
+    // read the extent and looked perfect; the FLIPPED and `align="end"` ones
+    // do, and were out by 5% of the surface. Measured: a 256px sub-panel read
+    // as 243.2 and flipped 12.8px over its parent. `offsetWidth`/`offsetHeight`
+    // are the untransformed border box, integer-rounded, which is the right
+    // precision for a fit/flip decision. The rect is still the fallback for a
+    // non-DOM node (a jsdom stub has neither).
+    const layoutWidth = element?.offsetWidth ?? box.width;
+    const layoutHeight = element?.offsetHeight ?? box.height;
+    // Measured BEFORE `minWidth` is applied, so the laid-out surface can only
+    // be wider than the box read here — and a wider surface wraps less, so the
+    // measured height is an upper bound. Erring that way flips early in a tie,
+    // never late. The panel's own `min-w-*` CLASS is already in the box, since
+    // a stylesheet rule applies before a layout effect can read the node.
+    const width = Math.max(layoutWidth, minWidth ?? 0);
+    // The align axis is the one `side` does not name.
+    const alignsVertically = side === 'left' || side === 'right';
+    const shiftY = alignsVertically ? alignOffset : 0;
+    const shiftX = alignsVertically ? 0 : alignOffset;
+    const next = resolveDropdownPlacement({
+      anchor: {
+        top: anchor.top + shiftY,
+        bottom: anchor.bottom + shiftY,
+        left: anchor.left + shiftX,
+        right: anchor.right + shiftX,
+      },
+      size: { width, height: layoutHeight },
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      offset: sideOffset,
+      gutter: VIEWPORT_GUTTER,
+      align,
+      side,
+    });
+    // A scroll that did not move this surface resolves to the same two numbers,
+    // and storing a NEW object for them would re-render the panel and rebuild
+    // its motion style for a position it already holds. Dropping the update is
+    // what makes a settled panel free to scroll past.
+    store(next);
+  }, [store, phase, anchor, panelNode, side, align, sideOffset, alignOffset, minWidth]);
 
-    update();
-    window.addEventListener('resize', update);
-    window.addEventListener('scroll', update, true);
+  // Coalesced to one pass per frame: a scroll gesture dispatches a stream of
+  // events (one per nested scroller, several per frame) and the browser paints
+  // once between them.
+  // No cancel needed on close: `resolve` is guarded by `phase`, so a frame that
+  // lands after the panel left `'open'` either holds the exit's position or
+  // clears a placement that is already null.
+  const [schedule] = useFrameThrottle(resolve);
+
+  // Whenever an INPUT changes — the anchor moved, the side flipped, the panel
+  // node arrived — the pass runs SYNCHRONOUSLY, before paint, so the surface is
+  // never painted a frame behind the thing it is anchored to.
+  useLayoutEffect(() => {
+    resolve();
+  }, [resolve]);
+
+  // Registered ONCE per open. `schedule` is stable for the panel's whole life,
+  // so a re-measurement no longer detaches and re-attaches this pair — which it
+  // did on every scroll event, because the effect that read the anchor was also
+  // the effect that owned the listeners.
+  useEffect(() => {
+    if (phase !== 'open' || typeof window === 'undefined') return;
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
     return () => {
-      window.removeEventListener('resize', update);
-      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
     };
-  }, [phase, anchor, panelNode, side, align, sideOffset, alignOffset, minWidth]);
+  }, [phase, schedule]);
 
   // Where the panel ended up, which is what both the slide and the origin
   // describe. Held across the exit with the placement itself.
@@ -495,7 +546,19 @@ export function FloatingPanel({
             motionStyle,
             style,
           ]}>
-          {children}
+          {/*
+            The panel IS a surface, so it publishes the rung its children sit on.
+            Without it a `TextField` inside a menu or popover stepped off the PAGE
+            and landed on the panel's own fill — 1.000:1, no shell at all
+            (`styles/surface-levels.ts`).
+
+            Level 1 for EVERY surface, not only `isMenuSurface`: that flag says
+            who PAINTS the chrome (`popover` resolves its own in
+            `popover/surface.ts`), not whether there is one. Keying the rung off
+            it published level 0 inside a popover, which is the case the ladder
+            exists for.
+          */}
+          <SurfaceLevelProvider level={1}>{children}</SurfaceLevelProvider>
         </AnimatedPanel>
       </OverlayRoot>
     </Portal>

package/src/floating/menu-sub-flyout.tsx

@@ -60,6 +60,7 @@ import type {
   MenuSubProps,
   MenuSubTriggerProps,
 } from './types';
+import { useFrameThrottle } from './use-frame-throttle';
 
 /**
  * How long the panel survives after the pointer leaves the row or the panel.
@@ -233,8 +234,17 @@ function useFlyoutAnchor(
     );
   }, [ref]);
 
+  // Two `getBoundingClientRect`s per pass — the row's and the parent panel's —
+  // so the stream of events a scroll gesture dispatches is coalesced to one pass
+  // per frame, like every other anchored surface.
+  const [schedule, cancel] = useFrameThrottle(measure);
+
   useLayoutEffect(() => {
     if (!open) {
+      // Dropped in the COMMIT phase along with the box: a frame armed by the
+      // last scroll before the flyout closed would otherwise re-publish an
+      // anchor for a row that is no longer showing anything.
+      cancel();
       setAnchor(null);
       return;
     }
@@ -259,19 +269,19 @@ function useFlyoutAnchor(
       if (frame < SETTLE_FRAMES) handle = requestAnimationFrame(again);
     });
     return () => cancelAnimationFrame(handle);
-  }, [open, measure]);
+  }, [open, measure, cancel]);
 
   useEffect(() => {
     if (!open || typeof window === 'undefined') return;
     // Capture phase: a scroll inside any ancestor moves both boxes, and a
     // bubbling listener never sees a scroll on an inner container.
-    window.addEventListener('resize', measure);
-    window.addEventListener('scroll', measure, true);
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
     return () => {
-      window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', measure, true);
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
     };
-  }, [open, measure]);
+  }, [open, schedule]);
 
   return anchor;
 }

package/src/floating/use-anchor-rect.ts

@@ -8,10 +8,11 @@
  * the DOM call is synchronous — an async `measureInWindow` callback lands a
  * frame late and the surface visibly jumps into place on open.
  */
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import type { View } from 'react-native';
 
 import type { FloatingAnchor } from './types';
+import { useFrameThrottle } from './use-frame-throttle';
 
 /**
  * react-native-web resolves a `View` ref to the DOM element itself. Read
@@ -26,40 +27,85 @@ export function rectOf(node: View | null): FloatingAnchor | null {
   return { top: box.top, bottom: box.bottom, left: box.left, right: box.right };
 }
 
+/**
+ * Do two measurements describe the same box? Two `null`s do; a `null` and a box
+ * do not.
+ *
+ * The anchor is the INPUT to every surface's placement, so its identity is what
+ * decides whether an open panel re-renders. A fresh object per scroll event
+ * re-resolves the placement, re-measures the panel and re-registers its
+ * listeners for a trigger that did not move — which is most scroll events, since
+ * a trigger inside a `position: fixed` header or a non-scrolling ancestor keeps
+ * its viewport box while the page moves under it.
+ */
+export function sameAnchor(a: FloatingAnchor | null, b: FloatingAnchor | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.top === b.top && a.bottom === b.bottom && a.left === b.left && a.right === b.right;
+}
+
 /**
  * The trigger's viewport box while `open`, re-measured on scroll and resize.
  * `null` until it has been measured — callers render nothing until then rather
  * than painting at the wrong place for one frame.
+ *
+ * Opening measures SYNCHRONOUSLY in a layout effect, so the surface's first
+ * painted frame is already in the right place. Everything after that is
+ * coalesced to one measurement per animation frame ({@link useFrameThrottle})
+ * and only replaces the box when it actually moved.
  */
 export function useAnchorRect(
   ref: React.RefObject<View | null>,
   open: boolean,
 ): FloatingAnchor | null {
   const [anchor, setAnchor] = useState<FloatingAnchor | null>(null);
+  // What was last published, mirrored so an unchanged measurement never reaches
+  // the dispatcher at all. Returning the current state from a `setState` updater
+  // is NOT the same thing: React still re-renders the component once before it
+  // bails out, which on a scroll is a render per frame for a surface that has
+  // not moved.
+  const published = useRef<FloatingAnchor | null>(null);
+
+  const store = useCallback((next: FloatingAnchor | null) => {
+    if (sameAnchor(published.current, next)) return;
+    published.current = next;
+    setAnchor(next);
+  }, []);
 
   const measure = useCallback(() => {
-    setAnchor(rectOf(ref.current));
-  }, [ref]);
+    store(rectOf(ref.current));
+  }, [ref, store]);
+
+  const [schedule, cancel] = useFrameThrottle(measure);
 
   useLayoutEffect(() => {
     if (!open) {
-      setAnchor(null);
+      // The frame a scroll armed outlives the event that armed it, so a close
+      // has to drop it in the SAME phase it clears the box — a pass that
+      // survived would re-publish the anchor of a surface that is already gone.
+      // In the commit, not in the passive cleanup below: animation frames run
+      // before the paint that the passive effects are flushed after.
+      cancel();
+      store(null);
       return;
     }
     measure();
-  }, [open, measure]);
+  }, [open, measure, store, cancel]);
 
   useEffect(() => {
     if (!open || typeof window === 'undefined') return;
     // Capture phase: a scroll inside any ancestor moves the trigger too, and a
     // bubbling listener never sees a scroll on an inner container.
-    window.addEventListener('resize', measure);
-    window.addEventListener('scroll', measure, true);
+    //
+    // `schedule` is stable for the hook's whole life, so this pair is registered
+    // ONCE per open and survives every re-measurement.
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
     return () => {
-      window.removeEventListener('resize', measure);
-      window.removeEventListener('scroll', measure, true);
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
     };
-  }, [open, measure]);
+  }, [open, schedule]);
 
   return anchor;
 }

package/src/floating/use-frame-throttle.ts

@@ -0,0 +1,76 @@
+/**
+ * Coalesce a MEASUREMENT to at most one per animation frame.
+ *
+ * Every anchored surface listens to `scroll` in the CAPTURE phase, because a
+ * scroll inside any ancestor moves the trigger too. That is the right listener
+ * and the wrong cadence: a scroll gesture dispatches a stream of events, a
+ * nested scroller dispatches one per container, and each of them used to force a
+ * synchronous layout read (`getBoundingClientRect`, `offsetWidth`) and a state
+ * update. Nothing can be painted between two events in the same frame, so every
+ * read but the last was work for a frame that never existed.
+ *
+ * The scheduler is TRAILING and it is deliberate: the run happens on the frame
+ * boundary, which is the last moment before the browser paints and therefore the
+ * most recent position the surface can be given. A leading call would place the
+ * panel against the box the page had BEFORE the frame's scrolling was applied.
+ *
+ * The returned callback is stable for the component's whole life, which is the
+ * second half of the cost: a listener effect that depends on the measurement
+ * closure is torn down and re-registered every time the thing it measures moves.
+ * `run` is read through a ref, so the newest closure is always the one that runs
+ * without the identity of the scheduler ever changing.
+ *
+ * With no frame clock at all — SSR, and jest's default `node` environment — the
+ * call runs SYNCHRONOUSLY. Degrading to the previous behaviour is right where
+ * degrading to nothing would leave a surface that never follows its anchor.
+ *
+ * A trailing scheduler outlives the event that armed it, so it comes with a
+ * CANCEL. A surface that closes in the gap between a scroll and that scroll's
+ * frame would otherwise be measured — and re-published — after it was told to
+ * clear itself. Callers drop the frame from the COMMIT phase (the layout effect
+ * that clears the box), not from a passive cleanup: animation frames run before
+ * the paint that passive effects are flushed after, so a cancel scheduled after
+ * the paint can be one frame too late. Unmount is handled here. Both functions
+ * are stable for the component's whole life, so an effect can depend on the pair
+ * without being re-registered.
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+
+export function useFrameThrottle(run: () => void): [schedule: () => void, cancel: () => void] {
+  const latest = useRef(run);
+  const frame = useRef<number | null>(null);
+
+  // A layout effect, not a render-body assignment: the ref is committed state,
+  // and it has to be updated in the same phase the measuring layout effects run
+  // in so a listener can never see a closure from a render that was thrown away.
+  useLayoutEffect(() => {
+    latest.current = run;
+  });
+
+  const cancel = useCallback(() => {
+    if (frame.current !== null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(frame.current);
+    }
+    frame.current = null;
+  }, []);
+
+  useEffect(() => cancel, [cancel]);
+
+  const schedule = useCallback(() => {
+    if (typeof requestAnimationFrame !== 'function') {
+      latest.current();
+      return;
+    }
+    // Already scheduled: this frame's run will read the current state anyway, so
+    // a second one measures the same box twice.
+    if (frame.current !== null) return;
+    frame.current = requestAnimationFrame(() => {
+      // Cleared BEFORE the run, so a measurement that schedules another one (a
+      // scroll still under way) is not swallowed.
+      frame.current = null;
+      latest.current();
+    });
+  }, []);
+
+  return useMemo(() => [schedule, cancel], [schedule, cancel]);
+}

package/src/home-search/BudgetPicker.tsx

@@ -0,0 +1,116 @@
+import React, { memo, useCallback } from 'react';
+import { View } from 'react-native';
+
+import { Chip } from '../chip';
+import { RangeFields } from '../stay-filters/RangeFields';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { DEFAULT_BUDGET_PRESETS } from './constants';
+import type { BudgetPickerProps, BudgetPreset } from './types';
+
+/**
+ * A budget for a search panel: a title, a "Minimum" / "Maximum" pair of fields
+ * and a row of preset chips.
+ *
+ *   title        body-semibold, text-primary; description body-2-regular,
+ *                text-secondary, 2 under it
+ *   fields       the range filters' floating-label pair, 16 apart, 16 under
+ *   presets      Bloom `Chip`s (`large`, `outlined`; the chosen one takes the
+ *                brand tone), wrapped 8 apart, 16 under the fields
+ *
+ * `period` picks the defaults: `month` (rent) presets up to 800 / 800–1,200 /
+ * 1,200–1,800 / 1,800+ and a 50 step; `total` (sale) up to 150,000 /
+ * 150,000–300,000 / 300,000–600,000 / 600,000+ and a 5,000 step.
+ *
+ * EITHER END IS OPEN: `null` is no minimum / no maximum. An emptied field
+ * commits `null`; a typed amount snaps to `step` and can not pass the other
+ * end. A preset chip sets both ends at once; pressing the chosen one again
+ * clears the budget. Preset labels are built from `formatAmount` unless given.
+ */
+
+/** A preset's chip label from the amount formatter. Pure; exported for the tests. */
+export function budgetPresetLabel(preset: BudgetPreset, format: (n: number) => string): string {
+  if (preset.label) return preset.label;
+  if (preset.min == null && preset.max != null) return `Up to ${format(preset.max)}`;
+  if (preset.max == null && preset.min != null) return `${format(preset.min)}+`;
+  if (preset.min != null && preset.max != null) return `${format(preset.min)} – ${format(preset.max)}`;
+  return 'Any';
+}
+
+function BudgetPickerComponent({
+  value,
+  onValueChange,
+  period = 'month',
+  presets,
+  formatAmount = String,
+  title,
+  description,
+  minLabel = 'Minimum',
+  maxLabel = 'Maximum',
+  step,
+  presetsLabel = 'Budget presets',
+  style,
+  testID,
+}: BudgetPickerProps) {
+  const theme = useTheme();
+  const items = presets ?? DEFAULT_BUDGET_PRESETS[period];
+  const heading = title ?? (period === 'month' ? 'Monthly budget' : 'Price');
+  const sub =
+    description === undefined ? (period === 'month' ? 'Rent per month, before bills' : 'Total price') : description;
+
+  const onCommit = useCallback(
+    (next: [number | null, number | null]) => {
+      if (next[0] !== value[0] || next[1] !== value[1]) onValueChange(next);
+    },
+    [value, onValueChange],
+  );
+
+  return (
+    <View testID={testID} style={[{ gap: 16 }, style]}>
+      <View style={{ gap: 2 }}>
+        <Text variant="body-semibold" role="heading" style={{ color: theme.colors.text }}>
+          {heading}
+        </Text>
+        {sub ? (
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary }}>
+            {sub}
+          </Text>
+        ) : null}
+      </View>
+      <RangeFields
+        value={value}
+        onCommit={onCommit}
+        format={formatAmount}
+        labels={[minLabel, maxLabel]}
+        min={0}
+        step={step ?? (period === 'month' ? 50 : 5000)}
+        nullable
+        testID={testID}
+      />
+      {items.length > 0 ? (
+        <View role="group" accessibilityLabel={presetsLabel} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+          {items.map((preset, index) => {
+            const selected = preset.min === value[0] && preset.max === value[1];
+            return (
+              <Chip
+                key={index}
+                size="large"
+                variant="outlined"
+                selected={selected}
+                onPress={() => onValueChange(selected ? [null, null] : [preset.min, preset.max])}
+                testID={testID ? `${testID}-preset-${index}` : undefined}
+                // `paddingHorizontal`, the spelling Chip's base uses — a longhand would lose on web.
+                style={{ paddingHorizontal: 12, height: 32 }}
+              >
+                {budgetPresetLabel(preset, formatAmount)}
+              </Chip>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const BudgetPicker = memo(BudgetPickerComponent);
+BudgetPicker.displayName = 'BudgetPicker';