@oxy.so/bloom 2.10.0 → 2.12.0

package/src/stat-bar/Meter.tsx

@@ -0,0 +1,116 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import {
+  METER_DURATION_VAR,
+  adoptMeterStyleSheet,
+  meterFraction,
+  meterValue,
+  resolveMeterColors,
+} from './shared';
+import type { AnyMeterProps } from './types';
+
+/**
+ * ONE determinate bar. Every progress bar in Bloom is this one.
+ *
+ *   track   `height` tall (6), radius `height / 2`, `neutral-200` (dark
+ *           `neutral-700`), clipping its fill
+ *   fill    `value / max` of the width, the accent, the same radius
+ *
+ * It draws NOTHING else — no label, no value, no footer. A bar with a label is
+ * `StatBar`; a bar inside a card is that card's business. What this owns is the
+ * geometry, the two colours and the accessibility, which is the part every
+ * hand-rolled copy got subtly differently.
+ *
+ * Accessibility: a `progressbar` named by `accessibilityLabel`, with the FLAT
+ * `aria-value*` props — react-native-web drops the `accessibilityValue` object
+ * entirely, so a bar setting only that announces its role and no value, while
+ * React Native folds the flat props back into `accessibilityValue` and native
+ * is unchanged. `valueText` carries the reading ("4 of 5"), since a bare number
+ * is announced as a percentage.
+ *
+ * A bar that is one SEGMENT of a larger progressbar passes `decorative` and
+ * gets no role at all — two nested progressbars announce the measurement twice.
+ */
+function MeterComponent(props: AnyMeterProps) {
+  const theme = useTheme();
+  const defaults = useMemo(() => resolveMeterColors(theme), [theme]);
+  const {
+    value,
+    max = 1,
+    height = 6,
+    radius = height / 2,
+    fill = defaults.fill,
+    track = defaults.track,
+    width,
+    transitionMs = 0,
+    style,
+    testID,
+    fillTestID = testID ? `${testID}-fill` : undefined,
+  } = props;
+
+  useEffect(() => {
+    if (Platform.OS === 'web' && transitionMs > 0) adoptMeterStyleSheet();
+  }, [transitionMs]);
+
+  const fraction = meterFraction(value, max);
+
+  const fillStyle: WebCssStyle = {
+    width: `${fraction * 100}%`,
+    height: '100%',
+    borderRadius: radius,
+    backgroundColor: fill,
+    ...(transitionMs > 0 ? { [METER_DURATION_VAR]: `${transitionMs}ms` } : null),
+  };
+
+  const bar = (
+    <View
+      {...(transitionMs > 0 ? webDataSet({ bloomMeterFill: '' }) : null)}
+      testID={fillTestID}
+      style={fillStyle}
+    />
+  );
+
+  const trackStyle = [
+    {
+      width: width ?? ('100%' as const),
+      height,
+      borderRadius: radius,
+      backgroundColor: track,
+      overflow: 'hidden' as const,
+    },
+    style,
+  ];
+
+  // The two branches are written out rather than folded into a spread on
+  // purpose: `aria-state-source-census.test.ts` reads the SOURCE, and a role
+  // that only exists inside a spread object is a role the census cannot see.
+  if (props.decorative) {
+    return (
+      <View aria-hidden testID={testID} style={trackStyle}>
+        {bar}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={props.accessibilityLabel}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={meterValue(value, max)}
+      aria-valuetext={props.valueText}
+      testID={testID}
+      style={trackStyle}
+    >
+      {bar}
+    </View>
+  );
+}
+
+export const Meter = memo(MeterComponent);
+Meter.displayName = 'Meter';

package/src/stat-bar/MeterRing.tsx

@@ -0,0 +1,113 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { webDataSet } from '../styles/web-data';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { METER_DURATION_VAR, adoptMeterStyleSheet, meterFraction, meterValue, resolveMeterColors } from './shared';
+import type { MeterRingProps } from './types';
+
+/**
+ * The same measurement as {@link Meter}, drawn as a ring: a full circle in the
+ * track colour with an arc of the accent over it, starting at twelve o'clock
+ * and going clockwise, with whatever `children` centred inside.
+ *
+ * The stroke is drawn INSIDE `size`, so the ring occupies exactly `size × size`
+ * and a caller can lay it out as a fixed box. The `-90°` rotation lives on the
+ * `<Svg>`, not on the arc: `react-native-svg` applies an element `transform`
+ * before the dash offset on some native versions, which walks the start of the
+ * arc off twelve o'clock.
+ *
+ * `cap: 'round'` at value 0 would paint a dot on an empty ring — a 0% score
+ * that reads as "a little" — so it degrades to `'butt'` there.
+ *
+ * Accessibility: a `progressbar` named by `accessibilityLabel` with the flat
+ * `aria-value*` props, for the reason spelled out on `Meter`. `children` are
+ * hidden from assistive technology: the centred score is the same number
+ * `aria-valuetext` already carries, and announcing it twice is noise.
+ */
+function MeterRingComponent({
+  value,
+  max = 1,
+  size = 56,
+  thickness = 5,
+  fill,
+  track,
+  cap = 'round',
+  accessibilityLabel,
+  valueText,
+  transitionMs = 0,
+  children,
+  style,
+  testID,
+}: MeterRingProps) {
+  const theme = useTheme();
+  const defaults = useMemo(() => resolveMeterColors(theme), [theme]);
+
+  useEffect(() => {
+    if (Platform.OS === 'web' && transitionMs > 0) adoptMeterStyleSheet();
+  }, [transitionMs]);
+
+  const fraction = meterFraction(value, max);
+  const radius = (size - thickness) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const boxStyle: WebCssStyle = {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(transitionMs > 0 ? { [METER_DURATION_VAR]: `${transitionMs}ms` } : null),
+  };
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={meterValue(value, max)}
+      aria-valuetext={valueText}
+      testID={testID}
+      style={[boxStyle, style]}
+    >
+      <View
+        {...(transitionMs > 0 ? webDataSet({ bloomMeterArc: '' }) : null)}
+        style={{ position: 'absolute', top: 0, left: 0 }}
+      >
+        <Svg width={size} height={size} style={{ transform: [{ rotate: '-90deg' }] }}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={track ?? defaults.track}
+            strokeWidth={thickness}
+            fill="none"
+            testID={testID ? `${testID}-track` : undefined}
+          />
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={fill ?? defaults.fill}
+            strokeWidth={thickness}
+            fill="none"
+            strokeLinecap={fraction > 0 ? cap : 'butt'}
+            strokeDasharray={`${circumference} ${circumference}`}
+            strokeDashoffset={circumference * (1 - fraction)}
+            testID={testID ? `${testID}-arc` : undefined}
+          />
+        </Svg>
+      </View>
+      {children != null ? (
+        <View aria-hidden importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+          {children}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const MeterRing = memo(MeterRingComponent);
+MeterRing.displayName = 'MeterRing';

package/src/stat-bar/StatBar.tsx

@@ -2,16 +2,18 @@ import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { clamp } from '../styles/clamp';
 import { Text } from '../typography';
+import { Meter } from './Meter';
 import type { StatBarProps } from './types';
 
 function clampPercent(value: number): number {
   if (Number.isNaN(value)) return 0;
-  return Math.max(0, Math.min(100, value));
+  return clamp(value, 0, 100);
 }
 
 /**
- * A horizontal labeled value bar with two variants:
+ * A LABELLED bar — `Meter` plus the text around it — in two variants:
  *
  * - `progress` — a rounded capsule track with a proportional `value / max`
  *   fill, an optional top-right `icon`, and an optional min/max footer row.
@@ -19,23 +21,22 @@ function clampPercent(value: number): number {
  *   track color), a bold percentage right of the label, and a two-sided footer
  *   of opposing values (inflow/outflow style).
  *
- * Colors come from the theme (the same NativeWind token pipeline that backs the
- * `--*` vars) — text via `text`/`textSecondary`/`textTertiary`, the track from
- * `backgroundSecondary` — with the fill overridable per-prop. Pure `<View>`
- * composition, so it renders identically on web and native.
+ * The bar itself is `Meter`, so the geometry, the default colours and the
+ * `progressbar` accessibility are the same ones every other bar in Bloom uses.
+ * This family owns only the label row and the footer. Text comes from the theme
+ * (`text`/`textSecondary`/`textTertiary`); the fill and the track default to
+ * `resolveMeterColors` (the accent over `neutral-200` / dark `neutral-700`) and
+ * stay overridable per-prop. Pure `<View>` composition, so it renders
+ * identically on web and native.
  */
 const StatBarComponent: React.FC<StatBarProps> = (props) => {
   const { colors } = useTheme();
   const { label, fillColor, trackColor, height = 6, icon, style, testID } = props;
-  const fill = fillColor ?? colors.primary;
-  const track = trackColor ?? colors.backgroundSecondary;
   const radius = height / 2;
 
   if (props.variant === 'split') {
     const { percent, leftValue, rightValue, leftColor, rightColor } = props;
     const leftPercent = clampPercent(percent);
-    const activeLeft = leftColor ?? fill;
-    const remainder = rightColor ?? track;
 
     return (
       <View style={[styles.wrap, style]} testID={testID}>
@@ -48,11 +49,17 @@ const StatBarComponent: React.FC<StatBarProps> = (props) => {
           </Text>
         </View>
 
-        <View style={[styles.track, { height, borderRadius: radius, backgroundColor: remainder }]}>
-          <View
-            style={{ width: `${leftPercent}%`, height, borderRadius: radius, backgroundColor: activeLeft }}
-          />
-        </View>
+        <Meter
+          value={leftPercent}
+          max={100}
+          height={height}
+          radius={radius}
+          fill={leftColor ?? fillColor}
+          track={rightColor ?? trackColor}
+          accessibilityLabel={label}
+          valueText={`${Math.round(leftPercent)}%`}
+          style={styles.track}
+        />
 
         <View style={styles.footerRow}>
           <Text style={[styles.footerValue, { color: colors.textTertiary }]} numberOfLines={1}>
@@ -67,7 +74,6 @@ const StatBarComponent: React.FC<StatBarProps> = (props) => {
   }
 
   const { value, max, minLabel, maxLabel } = props;
-  const ratio = max > 0 ? clampPercent((value / max) * 100) : 0;
   const hasFooter = minLabel != null || maxLabel != null;
 
   return (
@@ -79,20 +85,16 @@ const StatBarComponent: React.FC<StatBarProps> = (props) => {
         {icon != null && <View style={styles.icon}>{icon}</View>}
       </View>
 
-      <View
-        style={[styles.track, { height, borderRadius: radius, backgroundColor: track }]}
-        accessibilityRole="progressbar"
-        // The FLAT `aria-value*` props, not the `accessibilityValue` object:
-        // react-native-web has no handling for the latter at all, so the bar
-        // announced its role and no value whatsoever. React Native folds these
-        // three back into `accessibilityValue`, so native keeps what it had.
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-valuenow={value}
+      <Meter
+        value={value}
+        max={max}
+        height={height}
+        radius={radius}
+        fill={fillColor}
+        track={trackColor}
         accessibilityLabel={label}
-      >
-        <View style={{ width: `${ratio}%`, height, borderRadius: radius, backgroundColor: fill }} />
-      </View>
+        style={styles.track}
+      />
 
       {hasFooter && (
         <View style={styles.footerRow}>
@@ -119,7 +121,7 @@ const styles = StyleSheet.create({
   label: { flexShrink: 1, fontSize: 13, fontWeight: '500' },
   percent: { fontSize: 14, fontWeight: '700', letterSpacing: -0.2, fontVariant: ['tabular-nums'] },
   icon: { marginLeft: 8 },
-  track: { width: '100%', overflow: 'hidden', flexDirection: 'row', borderCurve: 'continuous' },
+  track: { width: '100%', flexDirection: 'row', borderCurve: 'continuous' },
   footerRow: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/stat-bar/index.ts

@@ -1,5 +1,13 @@
+export { Meter } from './Meter';
+export { MeterRing } from './MeterRing';
 export { StatBar } from './StatBar';
+export { meterFraction, meterValue, resolveMeterColors } from './shared';
+export type { MeterColors } from './shared';
 export type {
+  AnyMeterProps,
+  MeterDecorativeProps,
+  MeterProps,
+  MeterRingProps,
   StatBarProps,
   StatBarProgressProps,
   StatBarSplitProps,

package/src/stat-bar/shared.ts

@@ -0,0 +1,95 @@
+import { resolveButtonRamps } from '../button/shared';
+import { adoptStyleSheet } from '../styles/adopt-style-sheet';
+import type { Theme } from '../theme/types';
+
+/**
+ * ONE determinate meter's colours.
+ *
+ * THE FILL IS THE ACCENT. Before this existed, nine hand-rolled bars disagreed:
+ * `rating`, `wizard` and `tenancy` painted the fill `theme.colors.text` — a
+ * near-black bar — while `listing-actions`, `listing-editor`,
+ * `property-insights`, `creator-studio`, `track-list`, `media-card` and
+ * `media-header` used the accent. A near-black fill reads as ink, not as a
+ * measurement: on a neutral rail it is the highest-contrast thing on the row,
+ * so a 20%-full bar shouts louder than the text beside it, and in dark mode it
+ * inverts into whatever `colors.text` resolves to. The accent is the one colour
+ * in the theme that means "this is the quantity" — which is why the majority
+ * already used it. `fill` stays overridable for the cases that genuinely encode
+ * something else (a status tone, a chart series).
+ *
+ * THE TRACK IS `neutral-200` / `neutral-700`. Measured across the tree before
+ * this landed: `n[200]/n[700]` in `media-controls`, `media-card`,
+ * `media-header`, `track-list`, `tenancy`, `listing-actions` and
+ * `listing-editor` (seven), `n[200]/n[800]` in `rating` and `creator-studio`
+ * (two), `n[300]/n[700]` in `wizard` (one) and `n[100]/n[800]` in
+ * `property-insights` (one). The majority wins on numbers, and it is also the
+ * one that holds in both modes: `n[100]` is invisible on a card, and `n[800]`
+ * against a `n[900]` surface is a rail you have to look for.
+ *
+ * A CHART IS NOT A METER and does not come here. A data series is coloured from
+ * `chart-cards/palette.ts` (`chartHueTone`, `resolveMonoTone`), because a
+ * series' colour encodes WHICH datum it is; a meter's fill encodes HOW MUCH of
+ * one. `property-insights/PricePerAreaComparison` is the case that moved.
+ */
+export interface MeterColors {
+  /** The filled portion — `accent-500`. */
+  fill: string;
+  /** The rail behind it — `neutral-200`, `neutral-700` in dark. */
+  track: string;
+}
+
+export function resolveMeterColors(theme: Theme): MeterColors {
+  const { accent, neutral: n } = resolveButtonRamps(theme);
+  return { fill: accent[500], track: theme.isDark ? n[700] : n[200] };
+}
+
+/** `value` clamped into `[0, max]`, with a non-finite `value` read as 0. */
+export function meterValue(value: number, max: number): number {
+  if (!Number.isFinite(value)) return 0;
+  if (!Number.isFinite(max) || max <= 0) return 0;
+  return Math.min(max, Math.max(0, value));
+}
+
+/** The filled share, 0..1. A non-finite value or a non-positive `max` read as empty. */
+export function meterFraction(value: number, max: number): number {
+  if (!Number.isFinite(max) || max <= 0) return 0;
+  return meterValue(value, max) / max;
+}
+
+// ---------------------------------------------------------------------------
+//  Web transition
+//
+//  A meter that eases has to do it in CSS: react-native-web renders a real DOM
+//  node, and an inline style cannot carry a `prefers-reduced-motion` rule. The
+//  hooks are `data-*` attributes through `dataSet` (a `className` never reaches
+//  the DOM — react-native-css consumes it into `style`), and the DURATION rides
+//  in on a custom property so one stylesheet serves every caller instead of one
+//  sheet per duration. `adoptStyleSheet` uses a CONSTRUCTED sheet, so a
+//  `style-src 'self'` policy cannot drop the rules (see AGENTS.md).
+// ---------------------------------------------------------------------------
+
+const STYLE_ID = 'bloom-meter-web-css';
+/** The custom property the duration rides in on; `0ms` when nobody sets it. */
+export const METER_DURATION_VAR = '--bloom-meter-ms';
+const FILL = '[data-bloom-meter-fill]';
+const ARC = '[data-bloom-meter-arc] circle:last-child';
+
+const CSS = `
+${FILL} {
+  transition: width var(${METER_DURATION_VAR}, 0ms) ease-out;
+}
+${ARC} {
+  transition: stroke-dashoffset var(${METER_DURATION_VAR}, 0ms) ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  ${FILL},
+  ${ARC} {
+    transition: none;
+  }
+}
+`;
+
+/** Adopts the meter stylesheet. A no-op without a `document`. */
+export function adoptMeterStyleSheet(): void {
+  adoptStyleSheet(STYLE_ID, CSS);
+}

package/src/stat-bar/types.ts

@@ -8,12 +8,12 @@ interface StatBarBaseProps {
   label: string;
   /**
    * Fill color of the (active portion of the) track.
-   * @default theme.colors.primary
+   * @default the accent (`accent-500`), via `resolveMeterColors`
    */
   fillColor?: string;
   /**
    * Color of the empty/track portion.
-   * @default theme.colors.backgroundSecondary
+   * @default `neutral-200` (dark `neutral-700`), via `resolveMeterColors`
    */
   trackColor?: string;
   /**
@@ -52,14 +52,146 @@ export interface StatBarSplitProps extends StatBarBaseProps {
   rightValue: string;
   /**
    * Color of the left (active) portion.
-   * @default fillColor (theme.colors.primary)
+   * @default fillColor (the accent)
    */
   leftColor?: string;
   /**
    * Color of the right portion.
-   * @default trackColor (theme.colors.backgroundSecondary)
+   * @default trackColor (`neutral-200`, dark `neutral-700`)
    */
   rightColor?: string;
 }
 
 export type StatBarProps = StatBarProgressProps | StatBarSplitProps;
+
+// ---------------------------------------------------------------------------
+//  Meter — the bare determinate bar every progress bar in Bloom is built from
+// ---------------------------------------------------------------------------
+
+interface MeterGeometryProps {
+  /** Current value. Clamped into `[0, max]`; `NaN` reads as empty. */
+  value: number;
+  /**
+   * The full track.
+   * @default 1
+   */
+  max?: number;
+  /**
+   * Track height in px.
+   * @default 6
+   */
+  height?: number;
+  /**
+   * Corner radius of both the track and the fill.
+   * @default height / 2 — a capsule
+   */
+  radius?: number;
+  /**
+   * The filled portion's colour.
+   * @default the accent (`accent-500`)
+   */
+  fill?: string;
+  /**
+   * The rail behind the fill.
+   * @default `neutral-200`, `neutral-700` in dark
+   */
+  track?: string;
+  /**
+   * A fixed width. Without one the bar fills its parent (`width: '100%'`), so a
+   * caller that wants it to flex passes `style={{ flex: 1 }}` instead.
+   */
+  width?: number;
+  /**
+   * Milliseconds the fill eases its width over, on WEB only — native snaps.
+   * Ignored under `prefers-reduced-motion`.
+   * @default 0
+   */
+  transitionMs?: number;
+  /** Container style override. Applied to the track. */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  /**
+   * The fill's own `testID`.
+   * @default `${testID}-fill`
+   */
+  fillTestID?: string;
+}
+
+/** A determinate bar that IS the `progressbar` — the usual case. */
+export interface MeterProps extends MeterGeometryProps {
+  /**
+   * What the bar measures. Required: ARIA never computes a name for
+   * `progressbar` from its contents, and the bar draws no text of its own, so
+   * without this it announces "progress bar, 40%" with no subject.
+   */
+  accessibilityLabel: string;
+  /**
+   * `aria-valuetext` — the reading a screen reader says instead of the raw
+   * number, which is otherwise announced as a percentage ("4 of 5" vs "80%").
+   */
+  valueText?: string;
+  decorative?: false;
+}
+
+/**
+ * A determinate bar with NO role, for one segment of a larger `progressbar`
+ * that carries the value itself (`WizardProgress`' step segments). Hidden from
+ * assistive technology rather than silently unnamed.
+ */
+export interface MeterDecorativeProps extends MeterGeometryProps {
+  decorative: true;
+  accessibilityLabel?: never;
+  valueText?: never;
+}
+
+export type AnyMeterProps = MeterProps | MeterDecorativeProps;
+
+/** The same measurement drawn as a ring. */
+export interface MeterRingProps {
+  /** Current value. Clamped into `[0, max]`. */
+  value: number;
+  /** @default 1 */
+  max?: number;
+  /**
+   * Outer diameter in px. The stroke is drawn INSIDE it, so the ring occupies
+   * exactly `size × size`.
+   * @default 56
+   */
+  size?: number;
+  /**
+   * Stroke width in px.
+   * @default 5
+   */
+  thickness?: number;
+  /**
+   * The arc's colour.
+   * @default the accent (`accent-500`)
+   */
+  fill?: string;
+  /**
+   * The ring behind it.
+   * @default `neutral-200`, `neutral-700` in dark
+   */
+  track?: string;
+  /**
+   * The arc's end cap. `'round'` reads as a needle tip; at value 0 it would
+   * draw a dot on an empty ring, so `'round'` degrades to `'butt'` there.
+   * @default 'round'
+   */
+  cap?: 'round' | 'butt';
+  /** What the ring measures. Required, for the reason `Meter` states. */
+  accessibilityLabel: string;
+  /** `aria-valuetext`. */
+  valueText?: string;
+  /**
+   * Milliseconds the arc eases over, on WEB only — native snaps. Ignored under
+   * `prefers-reduced-motion`.
+   * @default 0
+   */
+  transitionMs?: number;
+  /** Centred content — the score, a glyph. Hidden from assistive technology. */
+  children?: ReactNode;
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/stat-cards/types.ts

@@ -1,8 +1,10 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** An icon COMPONENT (`RiGroupLine`, not `<RiGroupLine />`) — the card sizes and colours it. */
-export type StatCardsIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type StatCardsIcon = BloomIconComponent;
 
 /**
  * Two looks:

package/src/stay-filters/AmenityFilter.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
-import { FilterTextButton } from './FilterTextButton';
+import { Button } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
 
@@ -43,12 +43,19 @@ export function AmenityFilter<T extends string = string>({
       />
       {foldable ? (
         <View style={{ alignItems: 'flex-start' }}>
-          <FilterTextButton
-            label={expanded ? showLessLabel : showMoreLabel}
-            expanded={expanded}
+          <Button
+            variant="link"
+            linkTone="text"
+            underline="rest"
+            size="small"
+            textVariant="body-semibold"
+            style={{ paddingTop: 6, paddingBottom: 6, marginTop: -6, marginBottom: -6 }}
+            aria-expanded={expanded}
             onPress={() => setExpanded((e) => !e)}
             testID={testID ? `${testID}-toggle` : undefined}
-          />
+          >
+            {expanded ? showLessLabel : showMoreLabel}
+          </Button>
         </View>
       ) : null}
     </View>