@oxy.so/bloom 2.8.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -1721,6 +1721,160 @@
         "default": "./lib/commonjs/rating/index.js"
       }
     },
+    "./media-controls": {
+      "react-native": {
+        "types": "./lib/typescript/module/media-controls/index.d.ts",
+        "default": "./src/media-controls/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/media-controls/index.d.ts",
+        "default": "./lib/module/media-controls/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-controls/index.d.ts",
+        "default": "./lib/commonjs/media-controls/index.js"
+      }
+    },
+    "./chat-indicators": {
+      "react-native": {
+        "types": "./lib/typescript/module/chat-indicators/index.d.ts",
+        "default": "./src/chat-indicators/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/chat-indicators/index.d.ts",
+        "default": "./lib/module/chat-indicators/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/chat-indicators/index.d.ts",
+        "default": "./lib/commonjs/chat-indicators/index.js"
+      }
+    },
+    "./creator-studio": {
+      "react-native": {
+        "types": "./lib/typescript/module/creator-studio/index.d.ts",
+        "default": "./src/creator-studio/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/creator-studio/index.d.ts",
+        "default": "./lib/module/creator-studio/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/creator-studio/index.d.ts",
+        "default": "./lib/commonjs/creator-studio/index.js"
+      }
+    },
+    "./media-card": {
+      "react-native": {
+        "types": "./lib/typescript/module/media-card/index.d.ts",
+        "default": "./src/media-card/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/media-card/index.d.ts",
+        "default": "./lib/module/media-card/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-card/index.d.ts",
+        "default": "./lib/commonjs/media-card/index.js"
+      }
+    },
+    "./media-shelf": {
+      "react-native": {
+        "types": "./lib/typescript/module/media-shelf/index.d.ts",
+        "default": "./src/media-shelf/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/media-shelf/index.d.ts",
+        "default": "./lib/module/media-shelf/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-shelf/index.d.ts",
+        "default": "./lib/commonjs/media-shelf/index.js"
+      }
+    },
+    "./queue-panel": {
+      "react-native": {
+        "types": "./lib/typescript/module/queue-panel/index.d.ts",
+        "default": "./src/queue-panel/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/queue-panel/index.d.ts",
+        "default": "./lib/module/queue-panel/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/queue-panel/index.d.ts",
+        "default": "./lib/commonjs/queue-panel/index.js"
+      }
+    },
+    "./lyrics": {
+      "react-native": {
+        "types": "./lib/typescript/module/lyrics/index.d.ts",
+        "default": "./src/lyrics/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/lyrics/index.d.ts",
+        "default": "./lib/module/lyrics/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/lyrics/index.d.ts",
+        "default": "./lib/commonjs/lyrics/index.js"
+      }
+    },
+    "./music-library": {
+      "react-native": {
+        "types": "./lib/typescript/module/music-library/index.d.ts",
+        "default": "./src/music-library/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/music-library/index.d.ts",
+        "default": "./lib/module/music-library/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/music-library/index.d.ts",
+        "default": "./lib/commonjs/music-library/index.js"
+      }
+    },
+    "./media-player": {
+      "react-native": {
+        "types": "./lib/typescript/module/media-player/index.d.ts",
+        "default": "./src/media-player/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/media-player/index.d.ts",
+        "default": "./lib/module/media-player/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-player/index.d.ts",
+        "default": "./lib/commonjs/media-player/index.js"
+      }
+    },
+    "./media-header": {
+      "react-native": {
+        "types": "./lib/typescript/module/media-header/index.d.ts",
+        "default": "./src/media-header/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/media-header/index.d.ts",
+        "default": "./lib/module/media-header/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/media-header/index.d.ts",
+        "default": "./lib/commonjs/media-header/index.js"
+      }
+    },
+    "./track-list": {
+      "react-native": {
+        "types": "./lib/typescript/module/track-list/index.d.ts",
+        "default": "./src/track-list/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/track-list/index.d.ts",
+        "default": "./lib/module/track-list/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/track-list/index.d.ts",
+        "default": "./lib/commonjs/track-list/index.js"
+      }
+    },
     "./stay-filters": {
       "react-native": {
         "types": "./lib/typescript/module/stay-filters/index.d.ts",
@@ -1749,6 +1903,20 @@
         "default": "./lib/commonjs/stay-search/index.js"
       }
     },
+    "./home-search": {
+      "react-native": {
+        "types": "./lib/typescript/module/home-search/index.d.ts",
+        "default": "./src/home-search/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/home-search/index.d.ts",
+        "default": "./lib/module/home-search/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/home-search/index.d.ts",
+        "default": "./lib/commonjs/home-search/index.js"
+      }
+    },
     "./listing-details": {
       "react-native": {
         "types": "./lib/typescript/module/listing-details/index.d.ts",
@@ -1763,6 +1931,20 @@
         "default": "./lib/commonjs/listing-details/index.js"
       }
     },
+    "./property-insights": {
+      "react-native": {
+        "types": "./lib/typescript/module/property-insights/index.d.ts",
+        "default": "./src/property-insights/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/property-insights/index.d.ts",
+        "default": "./lib/module/property-insights/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/property-insights/index.d.ts",
+        "default": "./lib/commonjs/property-insights/index.js"
+      }
+    },
     "./booking": {
       "react-native": {
         "types": "./lib/typescript/module/booking/index.d.ts",
@@ -1777,6 +1959,20 @@
         "default": "./lib/commonjs/booking/index.js"
       }
     },
+    "./listing-actions": {
+      "react-native": {
+        "types": "./lib/typescript/module/listing-actions/index.d.ts",
+        "default": "./src/listing-actions/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/listing-actions/index.d.ts",
+        "default": "./lib/module/listing-actions/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/listing-actions/index.d.ts",
+        "default": "./lib/commonjs/listing-actions/index.js"
+      }
+    },
     "./listing-card": {
       "react-native": {
         "types": "./lib/typescript/module/listing-card/index.d.ts",
@@ -1791,6 +1987,20 @@
         "default": "./lib/commonjs/listing-card/index.js"
       }
     },
+    "./offering-badge": {
+      "react-native": {
+        "types": "./lib/typescript/module/offering-badge/index.d.ts",
+        "default": "./src/offering-badge/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/offering-badge/index.d.ts",
+        "default": "./lib/module/offering-badge/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/offering-badge/index.d.ts",
+        "default": "./lib/commonjs/offering-badge/index.js"
+      }
+    },
     "./category-bar": {
       "react-native": {
         "types": "./lib/typescript/module/category-bar/index.d.ts",
@@ -1819,6 +2029,90 @@
         "default": "./lib/commonjs/map-marker/index.js"
       }
     },
+    "./tenancy": {
+      "react-native": {
+        "types": "./lib/typescript/module/tenancy/index.d.ts",
+        "default": "./src/tenancy/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/tenancy/index.d.ts",
+        "default": "./lib/module/tenancy/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tenancy/index.d.ts",
+        "default": "./lib/commonjs/tenancy/index.js"
+      }
+    },
+    "./eviction": {
+      "react-native": {
+        "types": "./lib/typescript/module/eviction/index.d.ts",
+        "default": "./src/eviction/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/eviction/index.d.ts",
+        "default": "./lib/module/eviction/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/eviction/index.d.ts",
+        "default": "./lib/commonjs/eviction/index.js"
+      }
+    },
+    "./place-reviews": {
+      "react-native": {
+        "types": "./lib/typescript/module/place-reviews/index.d.ts",
+        "default": "./src/place-reviews/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/place-reviews/index.d.ts",
+        "default": "./lib/module/place-reviews/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/place-reviews/index.d.ts",
+        "default": "./lib/commonjs/place-reviews/index.js"
+      }
+    },
+    "./wizard": {
+      "react-native": {
+        "types": "./lib/typescript/module/wizard/index.d.ts",
+        "default": "./src/wizard/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/wizard/index.d.ts",
+        "default": "./lib/module/wizard/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/wizard/index.d.ts",
+        "default": "./lib/commonjs/wizard/index.js"
+      }
+    },
+    "./sortable-media": {
+      "react-native": {
+        "types": "./lib/typescript/module/sortable-media/index.d.ts",
+        "default": "./src/sortable-media/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/sortable-media/index.d.ts",
+        "default": "./lib/module/sortable-media/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/sortable-media/index.d.ts",
+        "default": "./lib/commonjs/sortable-media/index.js"
+      }
+    },
+    "./listing-editor": {
+      "react-native": {
+        "types": "./lib/typescript/module/listing-editor/index.d.ts",
+        "default": "./src/listing-editor/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/listing-editor/index.d.ts",
+        "default": "./lib/module/listing-editor/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/listing-editor/index.d.ts",
+        "default": "./lib/commonjs/listing-editor/index.js"
+      }
+    },
     "./card": {
       "react-native": {
         "types": "./lib/typescript/module/card/index.d.ts",

package/src/app-shell/AppShell.tsx

@@ -234,7 +234,13 @@ const AppShellComponent: React.FC<AppShellProps> = ({
               wide ? null : pageStyle,
             ]}
           >
-            <Scroller mode={mode} style={{ flex: doc ? undefined : 1, flexGrow: 1, minWidth: 0 }} contentStyle={{ padding: 12, paddingTop: small ? 24 : 12 }}>
+            {/*
+              Basis 0 and shrink 1: with only `flexGrow` the column's basis is its
+              content's max-content width (react-native-web defaults `flexShrink`
+              to 0), so one long unwrapped line of text pushed the page past a
+              phone's edge in document mode.
+            */}
+            <Scroller mode={mode} style={{ flex: doc ? undefined : 1, flexGrow: 1, flexShrink: 1, flexBasis: 0, minWidth: 0 }} contentStyle={{ padding: 12, paddingTop: small ? 24 : 12 }}>
               {column}
             </Scroller>
             {asideColumn({ paddingTop: small ? 24 : 12, paddingBottom: 12, paddingRight: 12 })}

package/src/booking/ActionCard.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { BookingPrice } from './BookingPrice';
+import {
+  BOOKING_CARD_MAX_WIDTH,
+  BOOKING_CARD_PADDING,
+  BOOKING_CARD_RADIUS,
+  resolveBookingPalette,
+} from './shared';
+import type { BookingPriceProps } from './types';
+
+/**
+ * INTERNAL — the chrome every "act on this listing" card shares: `BookingCard`
+ * and the `listing-actions` cards (`RentalActionCard`, `SaleActionCard`,
+ * `ExchangeProposalCard`, `ViewingScheduler`, `MortgageCalculator`,
+ * `ApplicationChecklist`). One recipe, so a rental page and a stay page draw the
+ * same card beside the listing.
+ *
+ *   shell    width 100%, up to 372 (`maxWidth`, `null` for none), radius 16,
+ *            1px hairline (neutral-200 / 700), shadow-m, padding 24, surface
+ *            card / neutral-800
+ *   header   price title-3-semibold + unit body-regular (+ struck earlier
+ *            price), anything `trailing` on the right, `below` 4 under it
+ *   note     body-2-regular text-secondary, centred
+ */
+
+export interface ActionCardShellProps {
+  children?: ReactNode;
+  /** Default 372; `null` lets the card fill its column. */
+  maxWidth?: number | null;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function ActionCardShell({
+  children,
+  maxWidth = BOOKING_CARD_MAX_WIDTH,
+  onLayout,
+  style,
+  testID,
+}: ActionCardShellProps) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveBookingPalette(theme), [theme]);
+
+  const cardStyle: ViewStyle = {
+    width: '100%',
+    ...(maxWidth != null ? { maxWidth } : null),
+    paddingTop: BOOKING_CARD_PADDING,
+    paddingBottom: BOOKING_CARD_PADDING,
+    paddingLeft: BOOKING_CARD_PADDING,
+    paddingRight: BOOKING_CARD_PADDING,
+    borderRadius: BOOKING_CARD_RADIUS,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.surface,
+    ...bloomShadowStyle('m'),
+  };
+
+  return (
+    <View testID={testID} onLayout={onLayout} style={[cardStyle, style]}>
+      {children}
+    </View>
+  );
+}
+
+export interface ActionCardHeaderProps extends BookingPriceProps {
+  /** Right of the price: a `Rating`, a status `Badge`. */
+  trailing?: ReactNode;
+  /** Under the price line: "Bills included", "€4,120 / m²". */
+  below?: ReactNode;
+  testID?: string;
+}
+
+export function ActionCardHeader({ trailing, below, testID, ...price }: ActionCardHeaderProps) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveBookingPalette(theme), [theme]);
+  return (
+    <View style={{ gap: 4 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+        <BookingPrice
+          {...price}
+          priceVariant="title-3-semibold"
+          unitVariant="body-regular"
+          style={{ flex: 1, minWidth: 0 }}
+          testID={testID}
+        />
+        {trailing}
+      </View>
+      {below == null ? null : typeof below === 'string' ? (
+        <Text variant="body-2-regular" style={{ color: palette.textSecondary }}>
+          {below}
+        </Text>
+      ) : (
+        below
+      )}
+    </View>
+  );
+}
+
+/** The centred secondary line under a card's buttons; a node is centred as-is. */
+export function ActionCardNote({
+  children,
+  style,
+  testID,
+}: {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveBookingPalette(theme), [theme]);
+  return (
+    <View testID={testID} style={[{ alignItems: 'center' }, style]}>
+      {typeof children === 'string' ? (
+        <Text variant="body-2-regular" style={{ color: palette.textSecondary, textAlign: 'center' }}>
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}

package/src/booking/BookingBar.tsx

@@ -1,104 +1,44 @@
-import React, { memo, useContext, useMemo } from 'react';
-import { View, type ViewStyle } from 'react-native';
-import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import React, { memo } from 'react';
 
-import { Button } from '../button';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { BookingLink } from './BookingLink';
-import { BookingPrice } from './BookingPrice';
-import { resolveBookingPalette } from './shared';
+import { ActionBarView, type ActionBarIds } from '../listing-actions/ActionBar';
 import type { BookingBarProps } from './types';
 
 /**
- * The phone-width reservation bar pinned under a listing.
+ * The phone-width reservation bar pinned under a listing — `ActionBar`
+ * (`@oxy.so/bloom/listing-actions`) with the stay wording:
  *
  *   bar      page background, 1px top hairline (neutral-200 / 700),
  *            padding 12 above, 24 at the sides, 12 + the bottom inset below
  *   left     price headline-semibold + unit body-regular (+ struck earlier
  *            price); dates under it, body-2-medium underlined — a button with
  *            `onPressDates`
- *   right    `Button` primary large
+ *   right    `Button` primary large, "Reserve"
  *
  * The bottom inset is read from `SafeAreaInsetsContext` WITHOUT requiring a
  * provider (0 when there is none), so a web page renders the bar as-is; pass
  * `bottomInset` to override. Placing it at the bottom of the screen is the
  * screen's job — see the docs.
  */
+const BOOKING_BAR_IDS: ActionBarIds = { subtitle: 'dates', primary: 'reserve' };
+
 function BookingBarComponent({
-  price,
-  originalPrice,
-  priceUnit,
-  priceAccessibilityLabel,
   dates,
   onPressDates,
   reserveLabel = 'Reserve',
   onReserve,
   reserveDisabled = false,
-  loading = false,
-  bottomInset,
-  style,
-  testID,
+  ...rest
 }: BookingBarProps) {
-  const theme = useTheme();
-  const palette = useMemo(() => resolveBookingPalette(theme), [theme]);
-  const insets = useContext(SafeAreaInsetsContext);
-  const inset = bottomInset ?? insets?.bottom ?? 0;
-  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
-
-  const barStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 16,
-    paddingTop: 12,
-    paddingBottom: 12 + inset,
-    paddingLeft: 24,
-    paddingRight: 24,
-    borderTopWidth: 1,
-    borderTopColor: palette.border,
-    backgroundColor: palette.page,
-  };
-
   return (
-    <View testID={testID} style={[barStyle, style]}>
-      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
-        <BookingPrice
-          price={price}
-          originalPrice={originalPrice}
-          priceUnit={priceUnit}
-          priceAccessibilityLabel={priceAccessibilityLabel}
-          priceVariant="headline-semibold"
-          unitVariant="body-regular"
-          testID={id('price')}
-        />
-        {dates ? (
-          onPressDates ? (
-            <BookingLink
-              variant="body-2-medium"
-              numberOfLines={1}
-              onPress={onPressDates}
-              testID={id('dates')}
-            >
-              {dates}
-            </BookingLink>
-          ) : (
-            <Text variant="body-2-medium" numberOfLines={1} style={{ color: palette.text }}>
-              {dates}
-            </Text>
-          )
-        ) : null}
-      </View>
-      <Button
-        variant="primary"
-        size="large"
-        onPress={onReserve}
-        disabled={reserveDisabled}
-        loading={loading}
-        testID={id('reserve')}
-      >
-        {reserveLabel}
-      </Button>
-    </View>
+    <ActionBarView
+      {...rest}
+      subtitle={dates}
+      onPressSubtitle={onPressDates}
+      primaryLabel={reserveLabel}
+      onPrimary={onReserve}
+      primaryDisabled={reserveDisabled}
+      ids={BOOKING_BAR_IDS}
+    />
   );
 }