@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/module/stat-bar/Meter.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { useTheme } from "../theme/use-theme.js";
+import { METER_DURATION_VAR, adoptMeterStyleSheet, meterFraction, meterValue, resolveMeterColors } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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) {
+  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 = {
+    width: `${fraction * 100}%`,
+    height: '100%',
+    borderRadius: radius,
+    backgroundColor: fill,
+    ...(transitionMs > 0 ? {
+      [METER_DURATION_VAR]: `${transitionMs}ms`
+    } : null)
+  };
+  const bar = /*#__PURE__*/_jsx(View, {
+    ...(transitionMs > 0 ? webDataSet({
+      bloomMeterFill: ''
+    }) : null),
+    testID: fillTestID,
+    style: fillStyle
+  });
+  const trackStyle = [{
+    width: width ?? '100%',
+    height,
+    borderRadius: radius,
+    backgroundColor: track,
+    overflow: 'hidden'
+  }, 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 /*#__PURE__*/_jsx(View, {
+      "aria-hidden": true,
+      testID: testID,
+      style: trackStyle,
+      children: bar
+    });
+  }
+  return /*#__PURE__*/_jsx(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,
+    children: bar
+  });
+}
+export const Meter = /*#__PURE__*/memo(MeterComponent);
+Meter.displayName = 'Meter';
+//# sourceMappingURL=Meter.js.map

package/lib/module/stat-bar/Meter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","Platform","View","webDataSet","useTheme","METER_DURATION_VAR","adoptMeterStyleSheet","meterFraction","meterValue","resolveMeterColors","jsx","_jsx","MeterComponent","props","theme","defaults","value","max","height","radius","fill","track","width","transitionMs","style","testID","fillTestID","undefined","OS","fraction","fillStyle","borderRadius","backgroundColor","bar","bloomMeterFill","trackStyle","overflow","decorative","children","accessibilityRole","accessibilityLabel","valueText","Meter","displayName"],"sourceRoot":"../../../src","sources":["stat-bar/Meter.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/stat-bar/MeterRing.js

@@ -0,0 +1,118 @@
+"use strict";
+
+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.js";
+import { useTheme } from "../theme/use-theme.js";
+import { METER_DURATION_VAR, adoptMeterStyleSheet, meterFraction, meterValue, resolveMeterColors } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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
+}) {
+  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 = {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...(transitionMs > 0 ? {
+      [METER_DURATION_VAR]: `${transitionMs}ms`
+    } : null)
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    "aria-valuemin": 0,
+    "aria-valuemax": max,
+    "aria-valuenow": meterValue(value, max),
+    "aria-valuetext": valueText,
+    testID: testID,
+    style: [boxStyle, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      ...(transitionMs > 0 ? webDataSet({
+        bloomMeterArc: ''
+      }) : null),
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0
+      },
+      children: /*#__PURE__*/_jsxs(Svg, {
+        width: size,
+        height: size,
+        style: {
+          transform: [{
+            rotate: '-90deg'
+          }]
+        },
+        children: [/*#__PURE__*/_jsx(Circle, {
+          cx: size / 2,
+          cy: size / 2,
+          r: radius,
+          stroke: track ?? defaults.track,
+          strokeWidth: thickness,
+          fill: "none",
+          testID: testID ? `${testID}-track` : undefined
+        }), /*#__PURE__*/_jsx(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
+        })]
+      })
+    }), children != null ? /*#__PURE__*/_jsx(View, {
+      "aria-hidden": true,
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true,
+      children: children
+    }) : null]
+  });
+}
+export const MeterRing = /*#__PURE__*/memo(MeterRingComponent);
+MeterRing.displayName = 'MeterRing';
+//# sourceMappingURL=MeterRing.js.map

package/lib/module/stat-bar/MeterRing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","Platform","View","Svg","Circle","webDataSet","useTheme","METER_DURATION_VAR","adoptMeterStyleSheet","meterFraction","meterValue","resolveMeterColors","jsx","_jsx","jsxs","_jsxs","MeterRingComponent","value","max","size","thickness","fill","track","cap","accessibilityLabel","valueText","transitionMs","children","style","testID","theme","defaults","OS","fraction","radius","circumference","Math","PI","boxStyle","width","height","alignItems","justifyContent","accessibilityRole","bloomMeterArc","position","top","left","transform","rotate","cx","cy","r","stroke","strokeWidth","undefined","strokeLinecap","strokeDasharray","strokeDashoffset","importantForAccessibility","accessibilityElementsHidden","MeterRing","displayName"],"sourceRoot":"../../../src","sources":["stat-bar/MeterRing.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/stat-bar/StatBar.js

@@ -3,15 +3,17 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTheme } from "../theme/use-theme.js";
+import { clamp } from "../styles/clamp.js";
 import { Text } from "../typography/index.js";
+import { Meter } from "./Meter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function clampPercent(value) {
   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,10 +21,13 @@ function clampPercent(value) {
  *   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 = props => {
   const {
@@ -37,8 +42,6 @@ const StatBarComponent = props => {
     style,
     testID
   } = props;
-  const fill = fillColor ?? colors.primary;
-  const track = trackColor ?? colors.backgroundSecondary;
   const radius = height / 2;
   if (props.variant === 'split') {
     const {
@@ -49,8 +52,6 @@ const StatBarComponent = props => {
       rightColor
     } = props;
     const leftPercent = clampPercent(percent);
-    const activeLeft = leftColor ?? fill;
-    const remainder = rightColor ?? track;
     return /*#__PURE__*/_jsxs(View, {
       style: [styles.wrap, style],
       testID: testID,
@@ -69,20 +70,16 @@ const StatBarComponent = props => {
           numberOfLines: 1,
           children: [Math.round(leftPercent), "%"]
         })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.track, {
-          height,
-          borderRadius: radius,
-          backgroundColor: remainder
-        }],
-        children: /*#__PURE__*/_jsx(View, {
-          style: {
-            width: `${leftPercent}%`,
-            height,
-            borderRadius: radius,
-            backgroundColor: activeLeft
-          }
-        })
+      }), /*#__PURE__*/_jsx(Meter, {
+        value: leftPercent,
+        max: 100,
+        height: height,
+        radius: radius,
+        fill: leftColor ?? fillColor,
+        track: rightColor ?? trackColor,
+        accessibilityLabel: label,
+        valueText: `${Math.round(leftPercent)}%`,
+        style: styles.track
       }), /*#__PURE__*/_jsxs(View, {
         style: styles.footerRow,
         children: [/*#__PURE__*/_jsx(Text, {
@@ -107,7 +104,6 @@ const StatBarComponent = props => {
     minLabel,
     maxLabel
   } = props;
-  const ratio = max > 0 ? clampPercent(value / max * 100) : 0;
   const hasFooter = minLabel != null || maxLabel != null;
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.wrap, style],
@@ -124,30 +120,15 @@ const StatBarComponent = props => {
         style: styles.icon,
         children: icon
       })]
-    }), /*#__PURE__*/_jsx(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,
+    }), /*#__PURE__*/_jsx(Meter, {
+      value: value,
+      max: max,
+      height: height,
+      radius: radius,
+      fill: fillColor,
+      track: trackColor,
       accessibilityLabel: label,
-      children: /*#__PURE__*/_jsx(View, {
-        style: {
-          width: `${ratio}%`,
-          height,
-          borderRadius: radius,
-          backgroundColor: fill
-        }
-      })
+      style: styles.track
     }), hasFooter && /*#__PURE__*/_jsxs(View, {
       style: styles.footerRow,
       children: [/*#__PURE__*/_jsx(Text, {
@@ -192,7 +173,6 @@ const styles = StyleSheet.create({
   },
   track: {
     width: '100%',
-    overflow: 'hidden',
     flexDirection: 'row',
     borderCurve: 'continuous'
   },

package/lib/module/stat-bar/StatBar.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","View","StyleSheet","useTheme","Text","jsx","_jsx","jsxs","_jsxs","clampPercent","value","Number","isNaN","Math","max","min","StatBarComponent","props","colors","label","fillColor","trackColor","height","icon","style","testID","fill","primary","track","backgroundSecondary","radius","variant","percent","leftValue","rightValue","leftColor","rightColor","leftPercent","activeLeft","remainder","styles","wrap","children","labelRow","color","textSecondary","numberOfLines","text","round","borderRadius","backgroundColor","width","footerRow","footerValue","textTertiary","minLabel","maxLabel","ratio","hasFooter","accessibilityRole","accessibilityLabel","create","gap","flexDirection","alignItems","justifyContent","flexShrink","fontSize","fontWeight","letterSpacing","fontVariant","marginLeft","overflow","borderCurve","StatBar","displayName"],"sourceRoot":"../../../src","sources":["stat-bar/StatBar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","View","StyleSheet","useTheme","clamp","Text","Meter","jsx","_jsx","jsxs","_jsxs","clampPercent","value","Number","isNaN","StatBarComponent","props","colors","label","fillColor","trackColor","height","icon","style","testID","radius","variant","percent","leftValue","rightValue","leftColor","rightColor","leftPercent","styles","wrap","children","labelRow","color","textSecondary","numberOfLines","text","Math","round","max","fill","track","accessibilityLabel","valueText","footerRow","footerValue","textTertiary","minLabel","maxLabel","hasFooter","create","gap","flexDirection","alignItems","justifyContent","flexShrink","fontSize","fontWeight","letterSpacing","fontVariant","marginLeft","width","borderCurve","StatBar","displayName"],"sourceRoot":"../../../src","sources":["stat-bar/StatBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/stat-bar/index.js

@@ -1,4 +1,7 @@
 "use strict";
 
+export { Meter } from "./Meter.js";
+export { MeterRing } from "./MeterRing.js";
 export { StatBar } from "./StatBar.js";
+export { meterFraction, meterValue, resolveMeterColors } from "./shared.js";
 //# sourceMappingURL=index.js.map

package/lib/module/stat-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["StatBar"],"sourceRoot":"../../../src","sources":["stat-bar/index.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,cAAW","ignoreList":[]}
+{"version":3,"names":["Meter","MeterRing","StatBar","meterFraction","meterValue","resolveMeterColors"],"sourceRoot":"../../../src","sources":["stat-bar/index.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,YAAS;AAC/B,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,OAAO,QAAQ,cAAW;AACnC,SAASC,aAAa,EAAEC,UAAU,EAAEC,kBAAkB,QAAQ,aAAU","ignoreList":[]}

package/lib/module/stat-bar/shared.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import { resolveButtonRamps } from "../button/shared.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+
+/**
+ * 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 function resolveMeterColors(theme) {
+  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, max) {
+  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, max) {
+  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() {
+  adoptStyleSheet(STYLE_ID, CSS);
+}
+//# sourceMappingURL=shared.js.map

package/lib/module/stat-bar/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["resolveButtonRamps","adoptStyleSheet","resolveMeterColors","theme","accent","neutral","n","fill","track","isDark","meterValue","value","max","Number","isFinite","Math","min","meterFraction","STYLE_ID","METER_DURATION_VAR","FILL","ARC","CSS","adoptMeterStyleSheet"],"sourceRoot":"../../../src","sources":["stat-bar/shared.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,qBAAkB;AACrD,SAASC,eAAe,QAAQ,gCAA6B;;AAG7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAO,SAASC,kBAAkBA,CAACC,KAAY,EAAe;EAC5D,MAAM;IAAEC,MAAM;IAAEC,OAAO,EAAEC;EAAE,CAAC,GAAGN,kBAAkB,CAACG,KAAK,CAAC;EACxD,OAAO;IAAEI,IAAI,EAAEH,MAAM,CAAC,GAAG,CAAC;IAAEI,KAAK,EAAEL,KAAK,CAACM,MAAM,GAAGH,CAAC,CAAC,GAAG,CAAC,GAAGA,CAAC,CAAC,GAAG;EAAE,CAAC;AACrE;;AAEA;AACA,OAAO,SAASI,UAAUA,CAACC,KAAa,EAAEC,GAAW,EAAU;EAC7D,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACH,KAAK,CAAC,EAAE,OAAO,CAAC;EACrC,IAAI,CAACE,MAAM,CAACC,QAAQ,CAACF,GAAG,CAAC,IAAIA,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC;EAC/C,OAAOG,IAAI,CAACC,GAAG,CAACJ,GAAG,EAAEG,IAAI,CAACH,GAAG,CAAC,CAAC,EAAED,KAAK,CAAC,CAAC;AAC1C;;AAEA;AACA,OAAO,SAASM,aAAaA,CAACN,KAAa,EAAEC,GAAW,EAAU;EAChE,IAAI,CAACC,MAAM,CAACC,QAAQ,CAACF,GAAG,CAAC,IAAIA,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC;EAC/C,OAAOF,UAAU,CAACC,KAAK,EAAEC,GAAG,CAAC,GAAGA,GAAG;AACrC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMM,QAAQ,GAAG,qBAAqB;AACtC;AACA,OAAO,MAAMC,kBAAkB,GAAG,kBAAkB;AACpD,MAAMC,IAAI,GAAG,yBAAyB;AACtC,MAAMC,GAAG,GAAG,0CAA0C;AAEtD,MAAMC,GAAG,GAAG;AACZ,EAAEF,IAAI;AACN,0BAA0BD,kBAAkB;AAC5C;AACA,EAAEE,GAAG;AACL,sCAAsCF,kBAAkB;AACxD;AACA;AACA,IAAIC,IAAI;AACR,IAAIC,GAAG;AACP;AACA;AACA;AACA,CAAC;;AAED;AACA,OAAO,SAASE,oBAAoBA,CAAA,EAAS;EAC3CtB,eAAe,CAACiB,QAAQ,EAAEI,GAAG,CAAC;AAChC","ignoreList":[]}

package/lib/module/stay-filters/AmenityFilter.js

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { FilterTextButton } from "./FilterTextButton.js";
+import { Button } from '../button';
 import { ToggleChipGroup } from "./ToggleChipGroup.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -43,11 +43,22 @@ export function AmenityFilter({
       style: {
         alignItems: 'flex-start'
       },
-      children: /*#__PURE__*/_jsx(FilterTextButton, {
-        label: expanded ? showLessLabel : showMoreLabel,
-        expanded: expanded,
+      children: /*#__PURE__*/_jsx(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
+        testID: testID ? `${testID}-toggle` : undefined,
+        children: expanded ? showLessLabel : showMoreLabel
       })
     }) : null]
   });

package/lib/module/stay-filters/AmenityFilter.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","View","FilterTextButton","ToggleChipGroup","jsx","_jsx","jsxs","_jsxs","AmenityFilter","options","value","collapsedCount","showMoreLabel","showLessLabel","defaultExpanded","style","testID","group","expanded","setExpanded","foldable","length","selected","Set","visible","filter","option","index","has","gap","children","undefined","alignItems","label","onPress","e","displayName"],"sourceRoot":"../../../src","sources":["stay-filters/AmenityFilter.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,gBAAgB,QAAQ,uBAAoB;AACrD,SAASC,eAAe,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAA4B;EACvDC,OAAO;EACPC,KAAK;EACLC,cAAc,GAAG,CAAC;EAClBC,aAAa,GAAG,WAAW;EAC3BC,aAAa,GAAG,WAAW;EAC3BC,eAAe,GAAG,KAAK;EACvBC,KAAK;EACLC,MAAM;EACN,GAAGC;AACkB,CAAC,EAAE;EACxB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CAACc,eAAe,CAAC;EACzD,MAAMM,QAAQ,GAAGX,OAAO,CAACY,MAAM,GAAGV,cAAc;EAChD,MAAMW,QAAQ,GAAG,IAAIC,GAAG,CAAIb,KAAK,CAAC;EAClC,MAAMc,OAAO,GACXN,QAAQ,IAAI,CAACE,QAAQ,GACjBX,OAAO,GACPA,OAAO,CAACgB,MAAM,CAAC,CAACC,MAAM,EAAEC,KAAK,KAAKA,KAAK,GAAGhB,cAAc,IAAIW,QAAQ,CAACM,GAAG,CAACF,MAAM,CAAChB,KAAK,CAAC,CAAC;EAE7F,oBACEH,KAAA,CAACN,IAAI;IAACe,MAAM,EAAEA,MAAO;IAACD,KAAK,EAAE,CAAC;MAAEc,GAAG,EAAE;IAAG,CAAC,EAAEd,KAAK,CAAE;IAAAe,QAAA,gBAChDzB,IAAA,CAACF,eAAe;MAAA,GACVc,KAAK;MACTR,OAAO,EAAEe,OAAQ;MACjBd,KAAK,EAAEA,KAAM;MACbM,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGe;IAAU,CAChD,CAAC,EACDX,QAAQ,gBACPf,IAAA,CAACJ,IAAI;MAACc,KAAK,EAAE;QAAEiB,UAAU,EAAE;MAAa,CAAE;MAAAF,QAAA,eACxCzB,IAAA,CAACH,gBAAgB;QACf+B,KAAK,EAAEf,QAAQ,GAAGL,aAAa,GAAGD,aAAc;QAChDM,QAAQ,EAAEA,QAAS;QACnBgB,OAAO,EAAEA,CAAA,KAAMf,WAAW,CAAEgB,CAAC,IAAK,CAACA,CAAC,CAAE;QACtCnB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGe;MAAU,CACjD;IAAC,CACE,CAAC,GACL,IAAI;EAAA,CACJ,CAAC;AAEX;AAEAvB,aAAa,CAAC4B,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useState","View","Button","ToggleChipGroup","jsx","_jsx","jsxs","_jsxs","AmenityFilter","options","value","collapsedCount","showMoreLabel","showLessLabel","defaultExpanded","style","testID","group","expanded","setExpanded","foldable","length","selected","Set","visible","filter","option","index","has","gap","children","undefined","alignItems","variant","linkTone","underline","size","textVariant","paddingTop","paddingBottom","marginTop","marginBottom","onPress","e","displayName"],"sourceRoot":"../../../src","sources":["stay-filters/AmenityFilter.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,eAAe,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,aAAaA,CAA4B;EACvDC,OAAO;EACPC,KAAK;EACLC,cAAc,GAAG,CAAC;EAClBC,aAAa,GAAG,WAAW;EAC3BC,aAAa,GAAG,WAAW;EAC3BC,eAAe,GAAG,KAAK;EACvBC,KAAK;EACLC,MAAM;EACN,GAAGC;AACkB,CAAC,EAAE;EACxB,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CAACc,eAAe,CAAC;EACzD,MAAMM,QAAQ,GAAGX,OAAO,CAACY,MAAM,GAAGV,cAAc;EAChD,MAAMW,QAAQ,GAAG,IAAIC,GAAG,CAAIb,KAAK,CAAC;EAClC,MAAMc,OAAO,GACXN,QAAQ,IAAI,CAACE,QAAQ,GACjBX,OAAO,GACPA,OAAO,CAACgB,MAAM,CAAC,CAACC,MAAM,EAAEC,KAAK,KAAKA,KAAK,GAAGhB,cAAc,IAAIW,QAAQ,CAACM,GAAG,CAACF,MAAM,CAAChB,KAAK,CAAC,CAAC;EAE7F,oBACEH,KAAA,CAACN,IAAI;IAACe,MAAM,EAAEA,MAAO;IAACD,KAAK,EAAE,CAAC;MAAEc,GAAG,EAAE;IAAG,CAAC,EAAEd,KAAK,CAAE;IAAAe,QAAA,gBAChDzB,IAAA,CAACF,eAAe;MAAA,GACVc,KAAK;MACTR,OAAO,EAAEe,OAAQ;MACjBd,KAAK,EAAEA,KAAM;MACbM,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGe;IAAU,CAChD,CAAC,EACDX,QAAQ,gBACPf,IAAA,CAACJ,IAAI;MAACc,KAAK,EAAE;QAAEiB,UAAU,EAAE;MAAa,CAAE;MAAAF,QAAA,eACxCzB,IAAA,CAACH,MAAM;QACL+B,OAAO,EAAC,MAAM;QACdC,QAAQ,EAAC,MAAM;QACfC,SAAS,EAAC,MAAM;QAChBC,IAAI,EAAC,OAAO;QACZC,WAAW,EAAC,eAAe;QAC3BtB,KAAK,EAAE;UAAEuB,UAAU,EAAE,CAAC;UAAEC,aAAa,EAAE,CAAC;UAAEC,SAAS,EAAE,CAAC,CAAC;UAAEC,YAAY,EAAE,CAAC;QAAE,CAAE;QAC5E,iBAAevB,QAAS;QACxBwB,OAAO,EAAEA,CAAA,KAAMvB,WAAW,CAAEwB,CAAC,IAAK,CAACA,CAAC,CAAE;QACtC3B,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAAS,GAAGe,SAAU;QAAAD,QAAA,EAE/CZ,QAAQ,GAAGL,aAAa,GAAGD;MAAa,CACnC;IAAC,CACL,CAAC,GACL,IAAI;EAAA,CACJ,CAAC;AAEX;AAEAJ,aAAa,CAACoC,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/stay-filters/CountFilter.js

@@ -1,7 +1,8 @@
 "use strict";
 
 import React, { memo } from 'react';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
+import { ChipRow } from "../chip/index.js";
 import { useTheme } from "../theme/use-theme.js";
 import { Text } from "../typography/index.js";
 import { FilterChip } from "./FilterChip.js";
@@ -49,30 +50,10 @@ function CountFilterComponent({
         color: theme.colors.text
       },
       children: title
-    }) : title, /*#__PURE__*/_jsxs(ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
+    }) : title, /*#__PURE__*/_jsxs(ChipRow, {
       role: "radiogroup",
       accessibilityLabel: name,
-      "aria-disabled": disabled || undefined
-      // 4px of room on every side so a pill's focus ring is not clipped by the
-      // scroller, taken back out with negative margins so the pills still
-      // line up with the title.
-      ,
-      style: {
-        marginTop: -4,
-        marginBottom: -4,
-        marginLeft: -4,
-        marginRight: -4
-      },
-      contentContainerStyle: {
-        flexDirection: 'row',
-        gap: 8,
-        paddingTop: 4,
-        paddingBottom: 4,
-        paddingLeft: 4,
-        paddingRight: 4
-      },
+      disabled: disabled,
       children: [/*#__PURE__*/_jsx(FilterChip, {
         mode: "radio",
         label: anyLabel,