@oxy.so/bloom 4.0.0 → 4.2.0

package/src/map-controls/MapControls.tsx

@@ -0,0 +1,156 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import { ButtonGroupItem } from '../button-group';
+import { GlassIsland } from '../glass';
+import { RiAddLine } from '../icons/remix/RiAddLine';
+import { RiBox3Line } from '../icons/remix/RiBox3Line';
+import { RiFocus3Line } from '../icons/remix/RiFocus3Line';
+import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
+import { MAP_CONTROL_BOX, MAP_CONTROLS_GEOMETRY } from './constants';
+import { MapCompass } from './MapCompass';
+import type { MapControlsProps } from './types';
+
+/**
+ * The chrome that floats over a map — locate, compass, zoom, tilt — as a
+ * column of translucent capsules.
+ *
+ *   island   every group is a `GlassIsland`: rung 1 of the surface ladder at
+ *            the chrome alpha, with the material's own hairline and shadow.
+ *            One capsule per GROUP, so the column reads as separate controls
+ *            rather than as one bar — which is exactly what the island was
+ *            written for.
+ *   control  `ButtonGroupItem` at 44 square. It is Bloom's island-aware
+ *            control: it reads the `material` the island publishes through
+ *            `ControlSurface` and paints flush, with no `variant` written on
+ *            it, and it carries a toggle's `aria-pressed` and native selected
+ *            state in one prop.
+ *   zoom     ONE island, two items, laid out in a column. The island's `style`
+ *            is where that is said; nothing else about it changes.
+ *   stack    44 controls, 8 apart, hugging whichever edge `align` names.
+ *
+ * WHY NOT `FrostedIconButton`: it is one of the three glass materials Bloom
+ * grew independently, and `glass/` exists so there is not a fourth. Two glass
+ * recipes side by side in one stack is the drift the island was written to
+ * end, so the whole stack is one material. A single frosted button over a
+ * photograph is still the right control where there is no island.
+ *
+ * WHAT THIS DOES NOT DO: it never touches a map. Every control is a callback,
+ * every state is a prop, and there is no engine, no projection and no tile
+ * here — the app owns the map and tells the chrome what it is doing.
+ *
+ * The `MapLayerPicker` is not a prop: it is an island of its own, placed in
+ * `children`, so an app can put it above the stack, below it, or somewhere
+ * else entirely without this component growing a placement vocabulary.
+ */
+function MapControlsComponent({
+  onLocate,
+  following,
+  heading,
+  onResetNorth,
+  hideCompassAtNorth = true,
+  onZoomIn,
+  onZoomOut,
+  canZoomIn = true,
+  canZoomOut = true,
+  onTiltChange,
+  tilted,
+  children,
+  align = 'end',
+  labels,
+  style,
+  testID,
+}: MapControlsProps) {
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const zoomLabel = labels?.zoom ?? 'Zoom';
+  const zoomable = onZoomIn !== undefined && onZoomOut !== undefined;
+
+  return (
+    <View
+      role="group"
+      accessibilityLabel={labels?.group ?? 'Map controls'}
+      testID={testID}
+      style={[
+        {
+          alignItems: align === 'start' ? 'flex-start' : 'flex-end',
+          gap: MAP_CONTROLS_GEOMETRY.gap,
+        },
+        style,
+      ]}
+    >
+      {onLocate ? (
+        <GlassIsland testID={id('locate-island')}>
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiFocus3Line}
+            selected={following}
+            accessibilityLabel={
+              following ? (labels?.following ?? 'Stop following my location') : (labels?.locate ?? 'Show my location')
+            }
+            onPress={onLocate}
+            style={MAP_CONTROL_BOX}
+            testID={id('locate')}
+          />
+        </GlassIsland>
+      ) : null}
+
+      {onResetNorth && heading !== undefined ? (
+        <MapCompass
+          heading={heading}
+          onPress={onResetNorth}
+          hideAtNorth={hideCompassAtNorth}
+          testID={id('compass')}
+        />
+      ) : null}
+
+      {zoomable ? (
+        <GlassIsland
+          role="group"
+          accessibilityLabel={zoomLabel}
+          style={{ flexDirection: 'column' }}
+          testID={id('zoom')}
+        >
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiAddLine}
+            accessibilityLabel={labels?.zoomIn ?? 'Zoom in'}
+            onPress={onZoomIn}
+            disabled={!canZoomIn}
+            style={MAP_CONTROL_BOX}
+            testID={id('zoom-in')}
+          />
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiSubtractLine}
+            accessibilityLabel={labels?.zoomOut ?? 'Zoom out'}
+            onPress={onZoomOut}
+            disabled={!canZoomOut}
+            style={MAP_CONTROL_BOX}
+            testID={id('zoom-out')}
+          />
+        </GlassIsland>
+      ) : null}
+
+      {onTiltChange ? (
+        <GlassIsland testID={id('tilt-island')}>
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiBox3Line}
+            selected={tilted ?? false}
+            accessibilityLabel={
+              tilted ? (labels?.tiltOff ?? 'Flatten the map') : (labels?.tilt ?? 'Tilt the map')
+            }
+            onPress={() => onTiltChange(!tilted)}
+            style={MAP_CONTROL_BOX}
+            testID={id('tilt')}
+          />
+        </GlassIsland>
+      ) : null}
+
+      {children}
+    </View>
+  );
+}
+
+export const MapControls = memo(MapControlsComponent);
+MapControls.displayName = 'MapControls';

package/src/map-controls/MapLayerPicker.tsx

@@ -0,0 +1,115 @@
+import React, { memo } from 'react';
+
+import { ButtonGroupItem } from '../button-group';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu';
+import { GlassIsland } from '../glass';
+import { RiStackLine } from '../icons/remix/RiStackLine';
+import { MAP_CONTROL_BOX } from './constants';
+import type { MapLayerPickerProps } from './types';
+
+/**
+ * What the map is DRAWN as, and what is drawn ON it.
+ *
+ * Two vocabularies in one menu, because they are two questions a reader asks in
+ * the same breath and they answer differently:
+ *
+ *   map types   exactly one — standard, satellite, transit. A
+ *               `DropdownMenuRadioGroup`, so the announced tree is a radio
+ *               group and the chosen one carries `aria-checked`.
+ *   overlays    any number — traffic, bike lanes. `DropdownMenuCheckboxItem`s,
+ *               each its own checkbox.
+ *
+ * Neither is a control this family wrote. The rows, the indicators, the
+ * keyboard handling, the dismissal and the anchoring are `dropdown-menu`'s; the
+ * trigger is a `ButtonGroupItem` composed through `asChild`, which is why it
+ * announces its own expanded state; and the capsule it sits in is the same
+ * `GlassIsland` every other map control sits in, so the picker lands in the
+ * stack as one more island rather than as a different kind of thing.
+ */
+function MapLayerPickerComponent({
+  layers,
+  layerId,
+  onLayerChange,
+  overlays,
+  activeOverlayIds,
+  onOverlayChange,
+  icon = RiStackLine,
+  disabled = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  labels,
+  style,
+  testID,
+}: MapLayerPickerProps) {
+  const triggerLabel = labels?.trigger ?? 'Map layers';
+  const layersLabel = labels?.layers ?? 'Map';
+  const overlaysLabel = labels?.overlays ?? 'Overlays';
+  const active = new Set(activeOverlayIds ?? []);
+
+  return (
+    <DropdownMenu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      <GlassIsland style={style} testID={testID}>
+        <DropdownMenuTrigger asChild label={triggerLabel} disabled={disabled}>
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={icon}
+            accessibilityLabel={triggerLabel}
+            disabled={disabled}
+            style={MAP_CONTROL_BOX}
+            testID={testID ? `${testID}-trigger` : undefined}
+          />
+        </DropdownMenuTrigger>
+      </GlassIsland>
+
+      <DropdownMenuContent label={triggerLabel} testID={testID ? `${testID}-content` : undefined}>
+        <DropdownMenuLabel>{layersLabel}</DropdownMenuLabel>
+        <DropdownMenuRadioGroup
+          value={layerId}
+          onValueChange={(next) => onLayerChange?.(next)}
+        >
+          {layers.map((layer) => (
+            <DropdownMenuRadioItem
+              key={layer.id}
+              value={layer.id}
+              trailing={layer.icon ? <layer.icon width={16} height={16} /> : undefined}
+              testID={testID ? `${testID}-layer-${layer.id}` : undefined}
+            >
+              {layer.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+
+        {overlays && overlays.length > 0 ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>{overlaysLabel}</DropdownMenuLabel>
+            {overlays.map((overlay) => (
+              <DropdownMenuCheckboxItem
+                key={overlay.id}
+                checked={active.has(overlay.id)}
+                onCheckedChange={(next) => onOverlayChange?.(overlay.id, next)}
+                trailing={overlay.icon ? <overlay.icon width={16} height={16} /> : undefined}
+                testID={testID ? `${testID}-overlay-${overlay.id}` : undefined}
+              >
+                {overlay.label}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export const MapLayerPicker = memo(MapLayerPickerComponent);
+MapLayerPicker.displayName = 'MapLayerPicker';

package/src/map-controls/constants.ts

@@ -0,0 +1,33 @@
+export interface MapControlsGeometry {
+  /** A control's square target. */
+  control: number;
+  /** Between two islands in the stack. */
+  gap: number;
+  /**
+   * How close to north the map has to be for the compass to call itself
+   * pointed north and step out of the way.
+   */
+  northTolerance: number;
+}
+
+/**
+ * 44 is the target, not the 34 the button group's `medium` rung draws.
+ *
+ * A group rung is sized for a toolbar standing beside other chrome, where the
+ * row as a whole is the target a finger aims at. A map control is a LONE
+ * circle over a moving map with a finger already on the glass, and 34 is under
+ * every platform's minimum. The item takes the size through its own `style`,
+ * which is the override `ButtonGroupItem` publishes — nothing about its fill,
+ * its hover, its press or its focus ring changes.
+ */
+export const MAP_CONTROLS_GEOMETRY: MapControlsGeometry = {
+  control: 44,
+  gap: 8,
+  northTolerance: 0.5,
+};
+
+/** The square every control in the stack takes. */
+export const MAP_CONTROL_BOX = {
+  width: MAP_CONTROLS_GEOMETRY.control,
+  height: MAP_CONTROLS_GEOMETRY.control,
+} as const;

package/src/map-controls/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+/**
+ * The map's heading, in degrees clockwise from north, for the compass needle.
+ *
+ * WHY A CONTEXT FOR ONE NUMBER: `ButtonGroupItem` takes its glyph as a
+ * COMPONENT (`leadingIcon={RiCompass3Line}`), and a needle has to rotate. A
+ * component built from the heading would be a new component TYPE on every
+ * degree, so React would unmount and remount the SVG on every frame of a map
+ * rotation. A module-scope component reading the heading from here keeps one
+ * identity for the life of the control, and only the needle re-renders.
+ */
+export const MapHeadingContext = createContext(0);

package/src/map-controls/index.ts

@@ -0,0 +1,15 @@
+export { MapControls } from './MapControls';
+export { MapCompass } from './MapCompass';
+export { MapLayerPicker } from './MapLayerPicker';
+export { MAP_CONTROL_BOX, MAP_CONTROLS_GEOMETRY } from './constants';
+export type { MapControlsGeometry } from './constants';
+export type {
+  MapCompassProps,
+  MapControlsAlign,
+  MapControlsLabels,
+  MapControlsProps,
+  MapLayerOption,
+  MapLayerPickerLabels,
+  MapLayerPickerProps,
+  MapOverlayOption,
+} from './types';

package/src/map-controls/types.ts

@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/** Which side of the map the stack is parked against. */
+export type MapControlsAlign = 'start' | 'end';
+
+/** Every word the stack speaks, in one prop — all of it copy, none of it layout. */
+export interface MapControlsLabels {
+  /** Names the stack. Default `"Map controls"`. */
+  group?: string;
+  /** The locate button while it is off. Default `"Show my location"`. */
+  locate?: string;
+  /** The locate button while the map is following. Default `"Stop following my location"`. */
+  following?: string;
+  /** Default `"Zoom in"`. */
+  zoomIn?: string;
+  /** Default `"Zoom out"`. */
+  zoomOut?: string;
+  /** Names the zoom pair, which is a group. Default `"Zoom"`. */
+  zoom?: string;
+  /** The tilt button while the map is flat. Default `"Tilt the map"`. */
+  tilt?: string;
+  /** The tilt button while the map is tilted. Default `"Flatten the map"`. */
+  tiltOff?: string;
+}
+
+export interface MapCompassProps {
+  /**
+   * Degrees CLOCKWISE from north the map has been rotated. The needle turns
+   * the other way, so it keeps pointing at north.
+   */
+  heading: number;
+  /** Pressing it puts the map back at north. */
+  onPress?: () => void;
+  /**
+   * Hide the compass while the map is already within
+   * {@link MAP_CONTROLS_GEOMETRY}`.northTolerance` of north. Default `true` —
+   * a control that does nothing is a control a reader has to rule out.
+   */
+  hideAtNorth?: boolean;
+  disabled?: boolean;
+  /**
+   * The announced name. Default `` `Facing ${Math.round(heading)} degrees.
+   * Reset to north` `` — pass a translated sentence, since a needle announces
+   * nothing at all.
+   */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** One map TYPE — standard, satellite, transit. Exactly one is chosen. */
+export interface MapLayerOption {
+  id: string;
+  label: string;
+  /** A glyph in the row's leading slot. */
+  icon?: BloomIconComponent;
+}
+
+/** One OVERLAY — traffic, bike lanes. Any number are on at once. */
+export interface MapOverlayOption {
+  id: string;
+  label: string;
+  icon?: BloomIconComponent;
+}
+
+export interface MapLayerPickerLabels {
+  /** Names the trigger, which draws no text. Default `"Map layers"`. */
+  trigger?: string;
+  /** The heading over the map types. Default `"Map"`. */
+  layers?: string;
+  /** The heading over the overlays. Default `"Overlays"`. */
+  overlays?: string;
+}
+
+export interface MapLayerPickerProps {
+  /** The map types. */
+  layers: readonly MapLayerOption[];
+  /** The chosen type's id. */
+  layerId?: string;
+  onLayerChange?: (id: string) => void;
+  /** The overlays. Omitted, the menu is types only. */
+  overlays?: readonly MapOverlayOption[];
+  /** Which overlays are on. */
+  activeOverlayIds?: readonly string[];
+  onOverlayChange?: (id: string, active: boolean) => void;
+  /** The trigger's glyph. Default a stack. */
+  icon?: BloomIconComponent;
+  disabled?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  labels?: MapLayerPickerLabels;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-trigger`, `-content`, `-layer-<id>`, `-overlay-<id>`. */
+  testID?: string;
+}
+
+export interface MapControlsProps {
+  /** Draws the locate button. */
+  onLocate?: () => void;
+  /**
+   * Whether the map is following the reader. It is a TOGGLE — `aria-pressed`
+   * on web and the selected state on native — so leave it `undefined` for a
+   * locate button that only recentres once.
+   */
+  following?: boolean;
+  /** Draws the compass. Degrees clockwise from north. */
+  heading?: number;
+  /** Pressing the compass. Without it the compass is not drawn. */
+  onResetNorth?: () => void;
+  /** Passed to `MapCompass`. Default `true`. */
+  hideCompassAtNorth?: boolean;
+  /** Draws the zoom pair. Both are needed: one zoom button is not a pair. */
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+  /** Disables the matching zoom button at the end of the map's range. */
+  canZoomIn?: boolean;
+  canZoomOut?: boolean;
+  /** Draws the tilt toggle. */
+  onTiltChange?: (tilted: boolean) => void;
+  /** Whether the map is tilted. */
+  tilted?: boolean;
+  /**
+   * Islands appended to the stack — a `MapLayerPicker`, or one of your own.
+   * They are placed, not wrapped: the stack owns the column and the gap, and
+   * nothing else.
+   */
+  children?: ReactNode;
+  /** Which edge the stack hugs. Default `end`. */
+  align?: MapControlsAlign;
+  labels?: MapControlsLabels;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-locate`, `-compass`, `-zoom`, `-zoom-in`, `-zoom-out`, `-tilt`. */
+  testID?: string;
+}

package/src/media-header/MediaActionBar.tsx

@@ -1,5 +1,6 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -8,9 +9,13 @@ import { RiDownload2Line } from '../icons/remix/RiDownload2Line';
 import { RiListUnordered } from '../icons/remix/RiListUnordered';
 import { RiListView } from '../icons/remix/RiListView';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
+import { RiUserAddLine } from '../icons/remix/RiUserAddLine';
+import { RiUserFollowLine } from '../icons/remix/RiUserFollowLine';
+import { resolveButtonPalette } from '../button/shared';
+import { useTheme } from '../theme/use-theme';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiShuffleLine } from '../icons/remix/RiShuffleLine';
-import { GlyphButton } from '../button';
+import { Button, GlyphButton } from '../button';
 import { LikeButton } from '../media-controls/LikeButton';
 import { PlayButton } from '../media-controls/PlayButton';
 import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
@@ -266,7 +271,7 @@ export const DownloadButton = memo(DownloadButtonComponent);
 DownloadButton.displayName = 'DownloadButton';
 
 /**
- * The outline pill: "Follow" → "Following", "Save" → "Saved". A toggle with
+ * The shared Button surface: "Follow" → "Following", "Save" → "Saved". A toggle with
  * one name (`label`) and `aria-pressed`.
  */
 function FollowButtonComponent({
@@ -275,50 +280,48 @@ function FollowButtonComponent({
   label = 'Follow',
   followingLabel = 'Following',
   color,
+  tone = 'support',
+  iconOnly = false,
   size = 'small',
   disabled = false,
+  loading = false,
+  textStyle,
   style,
   testID,
 }: FollowButtonProps) {
-  const paint = useMediaHeaderPaint();
-  const { state: hovered, onIn, onOut } = useInteractionState();
-  const fg = color ?? paint.text;
-  const active = hovered && !disabled;
-  const root: WebCssStyle = {
-    height: size === 'medium' ? 36 : 32,
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderRadius: borderRadius.full,
-    borderWidth: 1,
-    borderColor: active ? fg : color ? fg : paint.border,
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: disabled ? DISABLED_OPACITY : 1,
-    '--bloom-media-header-ring': paint.ring,
-    ...(IS_WEB ? { transitionProperty: 'border-color', transitionDuration: '150ms' } : null),
-  };
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const progress = useSharedValue(Number(following));
+  useEffect(() => {
+    progress.value = reducedMotion ? Number(following) : withTiming(Number(following), { duration: 180 });
+  }, [following, progress, reducedMotion]);
+  const idleLabelStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value, transform: [{ translateY: -8 * progress.value }] }), [progress]);
+  const followedLabelStyle = useAnimatedStyle(() => ({ opacity: progress.value, transform: [{ translateY: 8 * (1 - progress.value) }] }), [progress]);
+  const labelColor = color ?? resolveButtonPalette('subtle', theme, tone).rest.foreground;
+  const visual = (
+    <View pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants"
+      style={{ height: 20, overflow: 'hidden', ...(iconOnly ? { width: 20 } : {}), justifyContent: 'center' }}>
+      {!iconOnly && <View style={{ height: 0, overflow: 'hidden' }}>
+        <Text variant="body-semibold" style={textStyle}>{label}</Text>
+        <Text variant="body-semibold" style={textStyle}>{followingLabel}</Text>
+      </View>}
+      <Animated.View testID={testID ? `${testID}-idle-label` : undefined}
+        style={[{ position: 'absolute', left: 0, right: 0, alignItems: 'center' }, idleLabelStyle]}>
+        {iconOnly ? <RiUserAddLine width={20} height={20} fill={labelColor} />
+          : <Text variant="body-semibold" style={[{ color: labelColor }, textStyle]} numberOfLines={1}>{label}</Text>}
+      </Animated.View>
+      <Animated.View testID={testID ? `${testID}-following-label` : undefined}
+        style={[{ position: 'absolute', left: 0, right: 0, alignItems: 'center' }, followedLabelStyle]}>
+        {iconOnly ? <RiUserFollowLine width={20} height={20} fill={labelColor} />
+          : <Text variant="body-semibold" style={[{ color: labelColor }, textStyle]} numberOfLines={1}>{followingLabel}</Text>}
+      </Animated.View>
+    </View>
+  );
   return (
-    <Pressable
-      {...webData({ bloomMediaHeaderPress: '' })}
-      role="button"
-      accessibilityLabel={label}
-      aria-pressed={following}
-      aria-disabled={disabled || undefined}
-      accessibilityState={{ selected: following, disabled }}
-      disabled={disabled}
-      onHoverIn={onIn}
-      onHoverOut={onOut}
-      onPress={(event) => {
-        stop(event);
-        onFollowChange(!following);
-      }}
-      style={[root, style]}
-      testID={testID}
-    >
-      <Text variant="body-semibold" style={{ color: fg }} numberOfLines={1}>
-        {following ? followingLabel : label}
-      </Text>
-    </Pressable>
+    <Button appearance="subtle" tone={tone} size={size} iconOnly={iconOnly}
+      pressed={following} stopPropagation accessibilityLabel={label} disabled={disabled} loading={loading}
+      onPress={() => onFollowChange(!following)} trailing={visual}
+      style={style} testID={testID} />
   );
 }
 

package/src/media-header/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
+import type { BloomTone } from '../appearance';
 import type { BloomIconComponent } from '../icons/icon-component';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
@@ -149,6 +150,10 @@ export interface DownloadButtonProps extends ToggleBase {
 }
 
 export interface FollowButtonProps extends ToggleBase {
+  /** Shared Button tone. Defaults to support (secondary). */
+  tone?: BloomTone;
+  /** Compact toggle with icons and the same accessible name. */
+  iconOnly?: boolean;
   following: boolean;
   onFollowChange: (following: boolean) => void;
   /** Default `"Follow"`. The name in both states. */
@@ -157,8 +162,12 @@ export interface FollowButtonProps extends ToggleBase {
   followingLabel?: string;
   /** Draw on a band: the pill takes the band's text colour. */
   color?: string;
-  /** `small` 32 (default) or `medium` 36 high. */
-  size?: 'small' | 'medium';
+  /** Shared Button sizes; small by default. */
+  size?: 'small' | 'medium' | 'large';
+  /** Reserves label geometry while showing the shared Button spinner. */
+  loading?: boolean;
+  /** Applied to both labels and their width-measuring copies. */
+  textStyle?: StyleProp<TextStyle>;
 }
 
 export interface MediaIconButtonProps extends ToggleBase {