@oxy.so/bloom 4.32.0 → 4.34.0

package/src/dialog/SheetShell.tsx

@@ -20,6 +20,7 @@ import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import type { DialogControlProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export interface SheetShellProps {
   control: DialogControlProps;
@@ -150,12 +151,13 @@ export function SheetShell({
 
 function SheetHandle({ onPress }: { onPress: () => void }) {
   const theme = useTheme();
+  const common = useCommonMessages();
   return (
     <View style={styles.handleContainer}>
       <Pressable
         onPress={onPress}
-        accessibilityLabel="Dismiss"
-        accessibilityHint="Tap to close"
+        accessibilityLabel={common.dismiss}
+        accessibilityHint={common.tapToClose}
         hitSlop={{ top: 10, bottom: 10, left: 40, right: 40 }}
       >
         <View style={[styles.handleBar, { backgroundColor: theme.colors.text }]} />

package/src/dropdown-menu/DropdownMenu.tsx

@@ -29,6 +29,7 @@ import type {
   DropdownMenuProps,
   DropdownMenuTriggerProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function DropdownMenu({
   children,
@@ -80,11 +81,13 @@ export function DropdownMenuTrigger({
 
 export function DropdownMenuContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   className,
   style,
   testID,
 }: DropdownMenuContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useDropdownMenu();
   const { control, onSheetClose } = useSheetOpenBridge(menu.open, menu.setOpen);
   const surface = useMemo<MenuSurfaceContextValue>(

package/src/dropdown-menu/DropdownMenu.web.tsx

@@ -30,6 +30,7 @@ import type {
   DropdownMenuProps,
   DropdownMenuTriggerProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export function DropdownMenu({
   children,
@@ -96,7 +97,7 @@ export function DropdownMenuTrigger({
 
 export function DropdownMenuContent({
   children,
-  label = 'Menu',
+  label: labelProp,
   side,
   align = 'start',
   sideOffset,
@@ -108,6 +109,8 @@ export function DropdownMenuContent({
   style,
   testID,
 }: DropdownMenuContentProps) {
+  const common = useCommonMessages();
+  const label = labelProp ?? common.menu;
   const menu = useDropdownMenu();
   const anchor = useAnchorRect(menu.anchorRef, menu.open);
   const close = useCallback(() => menu.setOpen(false), [menu]);

package/src/floating/FloatingPanel.tsx

@@ -93,6 +93,7 @@ import { pushFloatingEscape } from './escape-stack';
 import { cx } from './shared';
 import type { FloatingPanelProps, FloatingSide } from './types';
 import { useFrameThrottle } from './use-frame-throttle';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The one node: the panel's own chrome, the caller's classes, the computed
@@ -201,6 +202,7 @@ export function FloatingPanel({
   surface = 'popover',
   panelRef,
 }: FloatingPanelProps) {
+  const common = useCommonMessages();
   const chrome = SURFACE[surface];
   const isMenuSurface = surface !== 'popover';
   const palette = useMenuPalette();
@@ -493,7 +495,7 @@ export function FloatingPanel({
             // contract, which is the whole reason it is not a bare Pressable.
             blurIntensity={0}
             dimOpacity={0}
-            accessibilityLabel="Dismiss"
+            accessibilityLabel={common.dismiss}
           />
         ) : null}
         <AnimatedPanel

package/src/home-search/HomeSearchBar.tsx

@@ -21,6 +21,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
 import type { HomeSearchBarProps, HomeSearchSegment } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Bloom's wide housing search: one full pill split into any segments — the
@@ -107,7 +108,7 @@ export function HomeSearchBar<K extends string = string>({
   activeSegment,
   onActiveSegmentChange,
   onSearch,
-  searchLabel = 'Search',
+  searchLabel: searchLabelProp,
   query,
   onQueryChange,
   panel,
@@ -115,6 +116,8 @@ export function HomeSearchBar<K extends string = string>({
   style,
   testID,
 }: HomeSearchBarProps<K>) {
+  const common = useCommonMessages();
+  const searchLabel = searchLabelProp ?? common.search;
   const theme = useTheme();
   const palette = useStaySearchPalette();
   const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);

package/src/home-search/SavedSearchCard.tsx

@@ -18,6 +18,7 @@ import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { SavedSearchCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One saved search in a list: what it looks for, how much is new, and how
@@ -61,11 +62,14 @@ function SavedSearchCardComponent({
   onPress,
   onEdit,
   onDelete,
-  editLabel = 'Edit',
-  deleteLabel = 'Delete',
+  editLabel: editLabelProp,
+  deleteLabel: deleteLabelProp,
   style,
   testID,
 }: SavedSearchCardProps) {
+  const common = useCommonMessages();
+  const editLabel = editLabelProp ?? common.edit;
+  const deleteLabel = deleteLabelProp ?? common.delete;
   const theme = useTheme();
   const palette = useStaySearchPalette();
   const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);

package/src/index.ts

@@ -80,6 +80,8 @@ export type { BloomIconComponent } from './icons/icon-component';
 // App-wide plumbing (pure JS — no peer beyond what this barrel already links)
 export { ImageResolverProvider, useImageResolver, isImageUrl } from './image-resolver';
 export type { ImageResolver } from './image-resolver';
+export { LocaleProvider, useBloomLocale, BLOOM_LANGUAGES, resolveBloomLanguage } from './locale';
+export type { BloomLanguage } from './locale';
 // A namespace, not seven loose verbs: `getAspectRatio`/`setAspectRatio`/
 // `hasAspectRatio` are exactly the collision-prone shape the namespace rule
 // covers.

package/src/index.web.ts

@@ -85,6 +85,8 @@ export type { BloomIconComponent } from './icons/icon-component';
 // App-wide plumbing (pure JS — no peer beyond what this barrel already links)
 export { ImageResolverProvider, useImageResolver, isImageUrl } from './image-resolver';
 export type { ImageResolver } from './image-resolver';
+export { LocaleProvider, useBloomLocale, BLOOM_LANGUAGES, resolveBloomLanguage } from './locale';
+export type { BloomLanguage } from './locale';
 // A namespace, not seven loose verbs: `getAspectRatio`/`setAspectRatio`/
 // `hasAspectRatio` are exactly the collision-prone shape the namespace rule
 // covers.

package/src/listing-card/ListingCard.tsx

@@ -60,6 +60,7 @@ import {
   type ListingCardPaint,
 } from './shared';
 import type { ListingCardLayout, ListingCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A home in a results grid — a stay, a rental, a home for sale or a swap.
@@ -407,12 +408,13 @@ function ListingCardSkeleton({
   style,
   testID,
 }: Pick<ListingCardProps, 'style' | 'testID'> & { layout: ListingCardLayout; compact: boolean }) {
+  const common = useCommonMessages();
   const horizontal = layout === 'horizontal';
   if (compact) {
     return (
       <View
         aria-busy
-        accessibilityLabel="Loading"
+        accessibilityLabel={common.loading}
         style={[{ flexDirection: 'row', alignItems: 'center' }, style]}
         testID={testID}
       >
@@ -434,7 +436,7 @@ function ListingCardSkeleton({
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[{ flexDirection: horizontal ? 'row' : 'column', alignItems: 'flex-start' }, style]}
       testID={testID}
     >

package/src/listing-details/ReviewCard.tsx

@@ -17,6 +17,7 @@ import {
   type ListingPalette,
 } from './shared';
 import type { ReviewCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * One guest review.
@@ -67,8 +68,8 @@ function ReviewCardComponent({
   date,
   text,
   numberOfLines = 4,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   expanded: expandedProp,
   onExpandedChange,
   hostResponse,
@@ -76,6 +77,9 @@ function ReviewCardComponent({
   style,
   testID,
 }: ReviewCardProps) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const theme = useTheme();
   useInteractiveWebCss(LISTING_DETAILS_STYLE_ID, LISTING_DETAILS_CSS);
   const palette = useMemo(() => resolveListingPalette(theme), [theme]);

package/src/listing-editor/ListingQualityMeter.tsx

@@ -15,6 +15,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { ListingQualityItem, ListingQualityMeterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * How complete a listing is: a score ring, a checklist of what is left, and
@@ -102,11 +103,13 @@ function ListingQualityMeterComponent({
   tipsTitle = 'Tips',
   formatScore = (score) => `${score}`,
   accessibilityLabel = 'Listing quality score',
-  doneLabel = 'Done',
+  doneLabel: doneLabelProp,
   todoLabel = 'To do',
   style,
   testID,
 }: ListingQualityMeterProps) {
+  const common = useCommonMessages();
+  const doneLabel = doneLabelProp ?? common.done;
   const theme = useTheme();
   useEffect(() => {
     if (IS_WEB) adoptStyleSheet(STYLE_ID, CSS);