@oxy.so/bloom 2.8.0 → 2.10.0

package/lib/commonjs/tenancy/TenancyTimeline.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TenancyTimeline = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _accentColors = require("../theme/accent-colors.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A vertical history of tenancy events, oldest first.
+ *
+ *   marker       comfortable: a 12 dot in a 24 column, or a 24 disc with a 14
+ *                icon when the event has one; compact: an 8 dot in a 16 column.
+ *                `complete` fills with the tone, `current` fills and adds a 3px
+ *                tint halo, `upcoming` is hollow (1.5px neutral-300 / 500 ring on the
+ *                surface) and its text turns secondary.
+ *   connector    2px hairline (neutral-200 / 700) from under a marker to the
+ *                next row, radius 1, 4 clear of the marker
+ *   text         title body-medium (compact body-2-medium; semibold when
+ *                `current`), meta "date · actor" body-2-regular (compact
+ *                caption-1-regular) text-secondary, description body-2-regular
+ *   rhythm       20 between events (compact 12), 12 between marker and text
+ *
+ * A `list` of `listitem`s. Each marker is an `img` named by its state ("Done",
+ * "In progress", "Not yet"), so a screen reader hears the state before the
+ * title it belongs to.
+ */
+
+const GEOMETRY = {
+  comfortable: {
+    column: 24,
+    dot: 12,
+    line: 20,
+    gap: 20,
+    title: 'body-medium',
+    meta: 'body-2-regular'
+  },
+  compact: {
+    column: 16,
+    dot: 8,
+    line: 18,
+    gap: 12,
+    title: 'body-2-medium',
+    meta: 'caption-1-regular'
+  }
+};
+const DEFAULT_STATE_LABELS = {
+  complete: 'Done',
+  current: 'In progress',
+  upcoming: 'Not yet'
+};
+function TenancyTimelineComponent({
+  events,
+  density = 'comfortable',
+  accessibilityLabel,
+  stateLabels,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const palette = (0, _react.useMemo)(() => (0, _shared.resolveHousingPalette)(theme), [theme]);
+  const g = GEOMETRY[density];
+  const labels = {
+    ...DEFAULT_STATE_LABELS,
+    ...stateLabels
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    role: "list",
+    accessibilityLabel: accessibilityLabel,
+    style: style,
+    testID: testID,
+    children: events.map((event, index) => {
+      const state = event.state ?? 'complete';
+      const last = index === events.length - 1;
+      const accent = (0, _accentColors.resolveAccentColors)(theme.colors, event.tone ?? 'primary', 'solid');
+      const tint = (0, _accentColors.resolveAccentColors)(theme.colors, event.tone ?? 'primary', 'subtle').background;
+      const Icon = density === 'comfortable' ? event.icon : undefined;
+      const upcoming = state === 'upcoming';
+      const id = part => testID ? `${testID}-${index}-${part}` : undefined;
+      const markerSize = Icon ? g.column : state === 'current' ? g.dot + 6 : g.dot;
+      // The marker sits centred on the title's first line; a disc is as tall as the column.
+      const markerBox = Math.max(g.line, markerSize);
+      const marker = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessible: true,
+        accessibilityLabel: labels[state],
+        ...(_shared.IS_WEB ? {
+          role: 'img'
+        } : {
+          accessibilityRole: 'image'
+        }),
+        testID: id('marker'),
+        style: {
+          width: markerSize,
+          height: markerSize,
+          borderRadius: markerSize / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: upcoming ? palette.surface : accent.background,
+          borderWidth: upcoming ? 1.5 : state === 'current' && !Icon ? 3 : 0,
+          borderColor: upcoming ? palette.markerRing : tint
+        },
+        children: Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          width: 14,
+          height: 14,
+          fill: upcoming ? palette.textSecondary : accent.foreground
+        }) : null
+      });
+      const meta = (0, _shared.joinName)([event.date, event.actor], ' · ');
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        role: "listitem",
+        testID: id('item'),
+        style: {
+          flexDirection: 'row',
+          gap: 12
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            width: g.column,
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              height: markerBox,
+              alignItems: 'center',
+              justifyContent: 'center'
+            },
+            children: marker
+          }), !last ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            testID: id('connector'),
+            style: {
+              flex: 1,
+              width: 2,
+              minHeight: 8,
+              marginTop: 4,
+              borderRadius: 1,
+              backgroundColor: palette.hairline
+            }
+          }) : null]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            gap: 2,
+            paddingTop: (markerBox - g.line) / 2,
+            paddingBottom: last ? 0 : g.gap
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            variant: state === 'current' ? density === 'compact' ? 'body-2-semibold' : 'body-semibold' : g.title,
+            style: {
+              color: upcoming ? palette.textSecondary : palette.text
+            },
+            testID: id('title'),
+            children: event.title
+          }), meta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            variant: g.meta,
+            style: {
+              color: palette.textSecondary
+            },
+            testID: id('meta'),
+            children: meta
+          }) : null, event.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+            variant: "body-2-regular",
+            style: {
+              color: upcoming ? palette.textSecondary : palette.text,
+              marginTop: 2
+            },
+            children: event.description
+          }) : null]
+        })]
+      }, event.id ?? index);
+    })
+  });
+}
+const TenancyTimeline = exports.TenancyTimeline = /*#__PURE__*/(0, _react.memo)(TenancyTimelineComponent);
+TenancyTimeline.displayName = 'TenancyTimeline';
+//# sourceMappingURL=TenancyTimeline.js.map

package/lib/commonjs/tenancy/TenancyTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_accentColors","_useTheme","_index","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GEOMETRY","comfortable","column","dot","line","gap","title","meta","compact","DEFAULT_STATE_LABELS","complete","current","upcoming","TenancyTimelineComponent","events","density","accessibilityLabel","stateLabels","style","testID","theme","useTheme","palette","useMemo","resolveHousingPalette","g","labels","jsx","View","role","children","map","event","index","state","last","length","accent","resolveAccentColors","colors","tone","tint","background","Icon","icon","undefined","id","part","markerSize","markerBox","Math","max","marker","accessible","IS_WEB","accessibilityRole","width","height","borderRadius","alignItems","justifyContent","backgroundColor","surface","borderWidth","borderColor","markerRing","fill","textSecondary","foreground","joinName","date","actor","jsxs","flexDirection","flex","minHeight","marginTop","hairline","minWidth","paddingTop","paddingBottom","Text","variant","color","text","description","TenancyTimeline","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["tenancy/TenancyTimeline.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/tenancy/constants.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TENANCY_DOCUMENT_STATUS = exports.TENANCY_DOCUMENT_ICON = exports.RENT_PAYMENT_STATUS = exports.RENT_PAYMENT_LIST_WIDE_MIN_WIDTH = exports.MAINTENANCE_STAGES = exports.MAINTENANCE_STAGE = exports.MAINTENANCE_PRIORITY = exports.MAINTENANCE_CATEGORY = exports.LEASE_PAYMENT_STATUS = exports.LEASE_CARD_WIDE_MIN_WIDTH = exports.DOCUMENT_LIST_WIDE_MIN_WIDTH = void 0;
+var _index = require("../icons/remix/index.js");
+/** `LeaseSummaryCard`'s next-payment badge. */
+const LEASE_PAYMENT_STATUS = exports.LEASE_PAYMENT_STATUS = {
+  upcoming: {
+    tone: 'info',
+    label: 'Upcoming'
+  },
+  due: {
+    tone: 'warning',
+    label: 'Due soon'
+  },
+  overdue: {
+    tone: 'error',
+    label: 'Overdue'
+  },
+  paid: {
+    tone: 'success',
+    label: 'Paid'
+  }
+};
+
+/** `RentPaymentList`'s row badge. */
+const RENT_PAYMENT_STATUS = exports.RENT_PAYMENT_STATUS = {
+  paid: {
+    tone: 'success',
+    label: 'Paid'
+  },
+  pending: {
+    tone: 'warning',
+    label: 'Pending'
+  },
+  overdue: {
+    tone: 'error',
+    label: 'Overdue'
+  },
+  partial: {
+    tone: 'info',
+    label: 'Partial'
+  }
+};
+
+/** `MaintenanceRequestCard`'s category icon and word. */
+const MAINTENANCE_CATEGORY = exports.MAINTENANCE_CATEGORY = {
+  plumbing: {
+    icon: _index.RiDropLine,
+    label: 'Plumbing'
+  },
+  electrical: {
+    icon: _index.RiFlashlightLine,
+    label: 'Electrical'
+  },
+  appliances: {
+    icon: _index.RiFridgeLine,
+    label: 'Appliances'
+  },
+  heating: {
+    icon: _index.RiTempHotLine,
+    label: 'Heating'
+  },
+  other: {
+    icon: _index.RiToolsLine,
+    label: 'Other'
+  }
+};
+
+/** `MaintenanceRequestCard`'s priority chip. */
+const MAINTENANCE_PRIORITY = exports.MAINTENANCE_PRIORITY = {
+  low: {
+    tone: 'default',
+    label: 'Low priority'
+  },
+  medium: {
+    tone: 'info',
+    label: 'Medium priority'
+  },
+  high: {
+    tone: 'warning',
+    label: 'High priority'
+  },
+  urgent: {
+    tone: 'error',
+    label: 'Urgent'
+  }
+};
+
+/** The stages in order, with the status badge each draws while it is the latest. */
+const MAINTENANCE_STAGES = exports.MAINTENANCE_STAGES = ['reported', 'acknowledged', 'scheduled', 'resolved'];
+const MAINTENANCE_STAGE = exports.MAINTENANCE_STAGE = {
+  reported: {
+    tone: 'warning',
+    label: 'Reported'
+  },
+  acknowledged: {
+    tone: 'info',
+    label: 'Acknowledged'
+  },
+  scheduled: {
+    tone: 'primary',
+    label: 'Scheduled'
+  },
+  resolved: {
+    tone: 'success',
+    label: 'Resolved'
+  }
+};
+
+/** `DocumentList`'s status badge. */
+const TENANCY_DOCUMENT_STATUS = exports.TENANCY_DOCUMENT_STATUS = {
+  signed: {
+    tone: 'success',
+    label: 'Signed'
+  },
+  pending: {
+    tone: 'warning',
+    label: 'Pending signature'
+  },
+  expired: {
+    tone: 'error',
+    label: 'Expired'
+  }
+};
+const TENANCY_DOCUMENT_ICON = exports.TENANCY_DOCUMENT_ICON = {
+  pdf: _index.RiFilePdf2Line,
+  image: _index.RiFileImageLine,
+  document: _index.RiFileWord2Line,
+  other: _index.RiFileTextLine
+};
+
+/** Width breakpoints of the `auto` layouts. */
+const LEASE_CARD_WIDE_MIN_WIDTH = exports.LEASE_CARD_WIDE_MIN_WIDTH = 520;
+const RENT_PAYMENT_LIST_WIDE_MIN_WIDTH = exports.RENT_PAYMENT_LIST_WIDE_MIN_WIDTH = 640;
+const DOCUMENT_LIST_WIDE_MIN_WIDTH = exports.DOCUMENT_LIST_WIDE_MIN_WIDTH = 560;
+//# sourceMappingURL=constants.js.map

package/lib/commonjs/tenancy/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_index","require","LEASE_PAYMENT_STATUS","exports","upcoming","tone","label","due","overdue","paid","RENT_PAYMENT_STATUS","pending","partial","MAINTENANCE_CATEGORY","plumbing","icon","RiDropLine","electrical","RiFlashlightLine","appliances","RiFridgeLine","heating","RiTempHotLine","other","RiToolsLine","MAINTENANCE_PRIORITY","low","medium","high","urgent","MAINTENANCE_STAGES","MAINTENANCE_STAGE","reported","acknowledged","scheduled","resolved","TENANCY_DOCUMENT_STATUS","signed","expired","TENANCY_DOCUMENT_ICON","pdf","RiFilePdf2Line","image","RiFileImageLine","document","RiFileWord2Line","RiFileTextLine","LEASE_CARD_WIDE_MIN_WIDTH","RENT_PAYMENT_LIST_WIDE_MIN_WIDTH","DOCUMENT_LIST_WIDE_MIN_WIDTH"],"sourceRoot":"../../../src","sources":["tenancy/constants.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/tenancy/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DOCUMENT_LIST_WIDE_MIN_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.DOCUMENT_LIST_WIDE_MIN_WIDTH;
+  }
+});
+Object.defineProperty(exports, "DocumentList", {
+  enumerable: true,
+  get: function () {
+    return _DocumentList.DocumentList;
+  }
+});
+Object.defineProperty(exports, "LEASE_CARD_WIDE_MIN_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.LEASE_CARD_WIDE_MIN_WIDTH;
+  }
+});
+Object.defineProperty(exports, "LEASE_PAYMENT_STATUS", {
+  enumerable: true,
+  get: function () {
+    return _constants.LEASE_PAYMENT_STATUS;
+  }
+});
+Object.defineProperty(exports, "LeaseSummaryCard", {
+  enumerable: true,
+  get: function () {
+    return _LeaseSummaryCard.LeaseSummaryCard;
+  }
+});
+Object.defineProperty(exports, "MAINTENANCE_CATEGORY", {
+  enumerable: true,
+  get: function () {
+    return _constants.MAINTENANCE_CATEGORY;
+  }
+});
+Object.defineProperty(exports, "MAINTENANCE_PRIORITY", {
+  enumerable: true,
+  get: function () {
+    return _constants.MAINTENANCE_PRIORITY;
+  }
+});
+Object.defineProperty(exports, "MAINTENANCE_STAGE", {
+  enumerable: true,
+  get: function () {
+    return _constants.MAINTENANCE_STAGE;
+  }
+});
+Object.defineProperty(exports, "MAINTENANCE_STAGES", {
+  enumerable: true,
+  get: function () {
+    return _constants.MAINTENANCE_STAGES;
+  }
+});
+Object.defineProperty(exports, "MaintenanceRequestCard", {
+  enumerable: true,
+  get: function () {
+    return _MaintenanceRequestCard.MaintenanceRequestCard;
+  }
+});
+Object.defineProperty(exports, "RENT_PAYMENT_LIST_WIDE_MIN_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.RENT_PAYMENT_LIST_WIDE_MIN_WIDTH;
+  }
+});
+Object.defineProperty(exports, "RENT_PAYMENT_STATUS", {
+  enumerable: true,
+  get: function () {
+    return _constants.RENT_PAYMENT_STATUS;
+  }
+});
+Object.defineProperty(exports, "RentPaymentList", {
+  enumerable: true,
+  get: function () {
+    return _RentPaymentList.RentPaymentList;
+  }
+});
+Object.defineProperty(exports, "TENANCY_DOCUMENT_STATUS", {
+  enumerable: true,
+  get: function () {
+    return _constants.TENANCY_DOCUMENT_STATUS;
+  }
+});
+Object.defineProperty(exports, "TenancyTimeline", {
+  enumerable: true,
+  get: function () {
+    return _TenancyTimeline.TenancyTimeline;
+  }
+});
+var _DocumentList = require("./DocumentList.js");
+var _LeaseSummaryCard = require("./LeaseSummaryCard.js");
+var _MaintenanceRequestCard = require("./MaintenanceRequestCard.js");
+var _RentPaymentList = require("./RentPaymentList.js");
+var _TenancyTimeline = require("./TenancyTimeline.js");
+var _constants = require("./constants.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/tenancy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_DocumentList","require","_LeaseSummaryCard","_MaintenanceRequestCard","_RentPaymentList","_TenancyTimeline","_constants"],"sourceRoot":"../../../src","sources":["tenancy/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA","ignoreList":[]}

package/lib/commonjs/tenancy/parts.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FigureLabel = FigureLabel;
+exports.HousingCard = HousingCard;
+exports.HousingToggleButton = HousingToggleButton;
+exports.IconTile = IconTile;
+exports.ProgressTrack = ProgressTrack;
+exports.useHousingPalette = useHousingPalette;
+exports.useHousingWebCss = useHousingWebCss;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _shared = require("../button/shared.js");
+var _useInteractionState = require("../hooks/use-interaction-state.js");
+var _adoptStyleSheet = require("../styles/adopt-style-sheet.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index = require("../typography/index.js");
+var _shared2 = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Internal parts the housing cards are built from. Not published: each is a
+ * detail of a card's design, not a primitive a consumer should compose.
+ */
+
+/** Adopts the housing focus sheet once. */
+function useHousingWebCss() {
+  (0, _react.useEffect)(() => {
+    (0, _adoptStyleSheet.adoptStyleSheet)(_shared2.HOUSING_STYLE_ID, _shared2.HOUSING_WEB_CSS);
+  }, []);
+}
+function useHousingPalette() {
+  const theme = (0, _useTheme.useTheme)();
+  return (0, _react.useMemo)(() => (0, _shared2.resolveHousingPalette)(theme), [theme]);
+}
+
+/**
+ * The card every housing block sits in: radius 20, 1px hairline, the
+ * floating-panel surface and its dropdown shadow, padding 20.
+ */
+function HousingCard({
+  children,
+  style,
+  testID,
+  padded = true
+}) {
+  const palette = useHousingPalette();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: testID,
+    style: [{
+      borderRadius: _shared2.HOUSING_CARD_RADIUS,
+      borderWidth: 1,
+      borderColor: palette.border,
+      backgroundColor: palette.surface,
+      boxShadow: palette.shadow,
+      ...(padded ? {
+        paddingTop: _shared2.HOUSING_CARD_PADDING,
+        paddingBottom: _shared2.HOUSING_CARD_PADDING,
+        paddingLeft: _shared2.HOUSING_CARD_PADDING,
+        paddingRight: _shared2.HOUSING_CARD_PADDING
+      } : null)
+    }, style],
+    children: children
+  });
+}
+
+/** A square neutral tile holding an icon (a category, a file type). */
+function IconTile({
+  icon: Icon,
+  size = 40,
+  iconSize = 20,
+  radius = 12,
+  testID
+}) {
+  const palette = useHousingPalette();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    testID: testID,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    style: {
+      width: size,
+      height: size,
+      borderRadius: radius,
+      backgroundColor: palette.tile,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      width: iconSize,
+      height: iconSize,
+      fill: palette.text
+    })
+  });
+}
+
+/** A small caption over a value — the label half of a figure. */
+function FigureLabel({
+  children
+}) {
+  const palette = useHousingPalette();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+    variant: "caption-1-medium",
+    numberOfLines: 1,
+    style: {
+      color: palette.textSecondary
+    },
+    children: children
+  });
+}
+
+/**
+ * A pill toggle at `Button`'s geometry: resting neutral-100 (dark neutral-700)
+ * with the text colour, on the brand fill with its foreground. Hover and press
+ * change colour only. A `role="button"` toggle carries BOTH `aria-pressed`
+ * (web) and `accessibilityState.selected` (native — React Native has no
+ * pressed state).
+ */
+function HousingToggleButton({
+  label,
+  accessibilityLabel,
+  pressed,
+  onPress,
+  icon: Icon,
+  pressedIcon: PressedIcon,
+  size = 'small',
+  disabled = false,
+  testID
+}) {
+  useHousingWebCss();
+  const palette = useHousingPalette();
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut
+  } = (0, _useInteractionState.useInteractionState)();
+  const {
+    state: down,
+    onIn: onPressIn,
+    onOut: onPressOut
+  } = (0, _useInteractionState.useInteractionState)();
+  const g = _shared.BUTTON_GEOMETRY[size];
+  const active = (hovered || down) && !disabled;
+  const background = pressed ? active ? (0, _shared.mixColor)(palette.toggleOn, palette.text, 0.12) : palette.toggleOn : active ? palette.toggleOffHover : palette.toggleOff;
+  const foreground = pressed ? palette.toggleOnForeground : palette.text;
+  const ShownIcon = pressed && PressedIcon ? PressedIcon : Icon;
+  const style = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    height: g.height,
+    paddingLeft: g.paddingHorizontal + 4,
+    paddingRight: g.paddingHorizontal + 6,
+    gap: 4,
+    borderRadius: _shared.BUTTON_RADIUS,
+    backgroundColor: background,
+    opacity: disabled ? 0.5 : 1,
+    '--bloom-housing-ring': palette.ring
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    ...(0, _shared2.webData)({
+      bloomHousingFocus: ''
+    }),
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel ?? label,
+    "aria-pressed": pressed,
+    accessibilityState: {
+      selected: pressed,
+      disabled
+    },
+    disabled: disabled,
+    onPress: onPress,
+    onHoverIn: onHoverIn,
+    onHoverOut: onHoverOut,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+    testID: testID,
+    style: style,
+    children: [ShownIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ShownIcon, {
+      width: g.iconSize - 2,
+      height: g.iconSize - 2,
+      fill: foreground
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      variant: g.type,
+      numberOfLines: 1,
+      style: {
+        color: foreground
+      },
+      children: label
+    })]
+  });
+}
+
+/** A 6px progress bar: neutral track, text-colour fill. */
+function ProgressTrack({
+  value,
+  accessibilityLabel,
+  valueText,
+  testID
+}) {
+  const palette = useHousingPalette();
+  const clamped = Math.min(1, Math.max(0, value));
+  const percent = Math.round(clamped * 100);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": percent,
+    "aria-valuetext": valueText,
+    testID: testID,
+    style: {
+      height: 6,
+      borderRadius: 3,
+      overflow: 'hidden',
+      backgroundColor: palette.track
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: testID ? `${testID}-fill` : undefined,
+      style: {
+        width: `${percent}%`,
+        height: '100%',
+        borderRadius: 3,
+        backgroundColor: palette.text
+      }
+    })
+  });
+}
+//# sourceMappingURL=parts.js.map