@oxy.so/bloom 4.32.0 → 4.34.0

package/src/provider/BloomProvider.tsx

@@ -7,6 +7,7 @@ import { GlassBlurTargetProvider } from '../glass/blur-target';
 import { BottomEdgeProvider } from '../layout/bottom-edge';
 import { TopEdgeProvider } from '../layout/top-edge';
 import { ImageResolverProvider, type ImageResolver } from '../image-resolver';
+import { LocaleProvider } from '../locale/context';
 import { BloomHapticsProvider } from '../hooks/use-haptics';
 import { TabBarMinimizeProvider } from '../tab-bar/context';
 import { BloomThemeProvider, type BloomThemeProviderProps } from '../theme';
@@ -26,51 +27,54 @@ export function BloomProvider({
   imageResolver,
   haptics = true,
   scrollAdapter = noRouterAdapter,
+  locale,
   ...themeProps
 }: BloomProviderProps) {
   return (
     // `value` is passed unconditionally (null when unset) so toggling a resolver
     // never changes the tree shape and remounts everything below it.
     <ImageResolverProvider value={imageResolver ?? null}>
-      <BloomThemeProvider {...themeProps}>
-        <ScrollRestorationProvider adapter={scrollAdapter}>
-          <BloomHapticsProvider enabled={haptics}>
-            {/*
-              A PROVIDER, not an outlet, and the distinction is the one this
-              component's exclusion list encodes. Outlets stay out because a
-              second mount duplicates every surface they render; this renders NO
-              surface — a transparent container on Android and nothing at all
-              elsewhere — so a second mount duplicates nothing, and the nearest
-              one simply becomes the target for its subtree. Nor is its position
-              an app decision the way an outlet's is: it has no z-order and no
-              insets, and it must WRAP the content, which is exactly what this
-              provider already does with `children`.
-            */}
-            <GlassBlurTargetProvider>
+      <LocaleProvider locale={locale}>
+        <BloomThemeProvider {...themeProps}>
+          <ScrollRestorationProvider adapter={scrollAdapter}>
+            <BloomHapticsProvider enabled={haptics}>
               {/*
-                The bottom edge's claim registry. Also a provider, not an outlet:
-                it renders nothing and holds only the set of surfaces currently
-                parked at the bottom edge, so a tab bar can publish its footprint
-                and a FAB or a toast stack can read it without either importing
-                the other.
+                A PROVIDER, not an outlet, and the distinction is the one this
+                component's exclusion list encodes. Outlets stay out because a
+                second mount duplicates every surface they render; this renders NO
+                surface — a transparent container on Android and nothing at all
+                elsewhere — so a second mount duplicates nothing, and the nearest
+                one simply becomes the target for its subtree. Nor is its position
+                an app decision the way an outlet's is: it has no z-order and no
+                insets, and it must WRAP the content, which is exactly what this
+                provider already does with `children`.
               */}
-              <BottomEdgeProvider>
+              <GlassBlurTargetProvider>
                 {/*
-                  And the top edge's, for the same reason one edge further up: a
-                  floating `PageHeader` overlays the content rather than sitting
-                  above it, so the content has to be told how much of the edge is
-                  gone. Two registries rather than one keyed by edge, because a
-                  reader of either only ever wants one number and must not
-                  re-render when the other moves.
+                  The bottom edge's claim registry. Also a provider, not an outlet:
+                  it renders nothing and holds only the set of surfaces currently
+                  parked at the bottom edge, so a tab bar can publish its footprint
+                  and a FAB or a toast stack can read it without either importing
+                  the other.
                 */}
-                <TopEdgeProvider>
-                  <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
-                </TopEdgeProvider>
-              </BottomEdgeProvider>
-            </GlassBlurTargetProvider>
-          </BloomHapticsProvider>
-        </ScrollRestorationProvider>
-      </BloomThemeProvider>
+                <BottomEdgeProvider>
+                  {/*
+                    And the top edge's, for the same reason one edge further up: a
+                    floating `PageHeader` overlays the content rather than sitting
+                    above it, so the content has to be told how much of the edge is
+                    gone. Two registries rather than one keyed by edge, because a
+                    reader of either only ever wants one number and must not
+                    re-render when the other moves.
+                  */}
+                  <TopEdgeProvider>
+                    <TabBarMinimizeProvider>{children}</TabBarMinimizeProvider>
+                  </TopEdgeProvider>
+                </BottomEdgeProvider>
+              </GlassBlurTargetProvider>
+            </BloomHapticsProvider>
+          </ScrollRestorationProvider>
+        </BloomThemeProvider>
+      </LocaleProvider>
     </ImageResolverProvider>
   );
 }

package/src/provider/types.ts

@@ -15,4 +15,10 @@ export interface BloomProviderProps extends Omit<BloomThemeProviderProps, 'child
   imageResolver?: ImageResolver;
   /** `false` disables haptic feedback app-wide (honored by every `useHaptics()` call). */
   haptics?: boolean;
+  /**
+   * BCP 47 locale for every Bloom component below — dates, month names and
+   * Bloom's own strings (Cancel, Apply, …). A component's own `locale` prop
+   * wins. Unset, components follow the runtime's locale.
+   */
+  locale?: string;
 }

package/src/recent-hires-card/RecentHiresCard.tsx

@@ -14,6 +14,7 @@ import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { RecentHire, RecentHiresCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The "Recent hires" card:
@@ -144,8 +145,8 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   teamLabel,
   onTeamPress,
   teamAccessibilityLabel,
-  previousLabel = 'Previous',
-  nextLabel = 'Next',
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
   onPreviousPress,
   onNextPress,
   previousDisabled,
@@ -154,6 +155,9 @@ const RecentHiresCardComponent: React.FC<RecentHiresCardProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const previousLabel = previousLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const palette = useMemo(() => resolveRecentHiresPalette(theme), [theme]);
 

package/src/settings-modal/SettingsModal.tsx

@@ -39,6 +39,7 @@ import type { SettingsPalette } from './palette';
 import type { SettingsModalProps, SettingsNavGroup, SettingsNavItem } from './types';
 import { useKeyboardReveal } from './use-keyboard-reveal';
 import { IS_WEB, useSettingsWebCss } from './web-css';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A settings modal.
@@ -134,6 +135,7 @@ export function SettingsModal({
   labels,
   testID,
 }: SettingsModalProps) {
+  const common = useCommonMessages();
   useSettingsWebCss();
   const palette = useSettingsPalette();
   const reducedMotion = useReducedMotion();
@@ -406,7 +408,7 @@ export function SettingsModal({
                           header={{
                             title: pageConfig.title,
                             onBack: requestNavigation,
-                            backLabel: labels?.back ?? 'Back',
+                            backLabel: labels?.back ?? common.back,
                             closeLabel,
                             onClose: requestClose,
                           }}

package/src/sidebar/Sidebar.tsx

@@ -44,6 +44,7 @@ import { SidebarTeamMenu } from './SidebarTeamMenu';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarUserMenu } from './SidebarUserMenu';
 import type { SidebarNavItem, SidebarProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * `Sidebar` — the floating app rail, expanded or collapsed.
@@ -174,7 +175,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   searchQuery,
   onSearchQueryChange,
   searchLabel = 'Quick Search',
-  searchButtonLabel = 'Search',
+  searchButtonLabel: searchButtonLabelProp,
   searchPlaceholder,
   filterLabel = 'Filter navigation',
   clearSearchLabel = 'Clear navigation search',
@@ -189,6 +190,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   style,
   testID,
 }) => {
+  const common = useCommonMessages();
+  const searchButtonLabel = searchButtonLabelProp ?? common.search;
   const palette = useSidebarPalette();
   const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
   const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});

package/src/stay-filters/AmenityFilter.tsx

@@ -4,6 +4,7 @@ import { View } from 'react-native';
 import { Button } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A `ToggleChipGroup` that shows its first `collapsedCount` options and a
@@ -18,13 +19,16 @@ export function AmenityFilter<T extends string = string>({
   options,
   value,
   collapsedCount = 6,
-  showMoreLabel = 'Show more',
-  showLessLabel = 'Show less',
+  showMoreLabel: showMoreLabelProp,
+  showLessLabel: showLessLabelProp,
   defaultExpanded = false,
   style,
   testID,
   ...group
 }: AmenityFilterProps<T>) {
+  const common = useCommonMessages();
+  const showMoreLabel = showMoreLabelProp ?? common.showMore;
+  const showLessLabel = showLessLabelProp ?? common.showLess;
   const [expanded, setExpanded] = useState(defaultExpanded);
   const foldable = options.length > collapsedCount;
   const selected = new Set<T>(value);

package/src/stay-search/GuestPicker.tsx

@@ -10,6 +10,7 @@ import { DEFAULT_GUEST_DESCRIPTIONS, DEFAULT_GUEST_LABELS, GUEST_KINDS } from '.
 import { useGuestPickerClose } from './context';
 import { applyGuestCount, minimumAdults } from './guests';
 import type { GuestKind, GuestPickerProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** The kinds `maxGuests` counts; infants and pets ride free. */
 const COUNTED: readonly GuestKind[] = ['adults', 'children'];
@@ -44,11 +45,13 @@ function GuestPickerComponent({
   incrementLabel,
   note,
   onClose,
-  closeLabel = 'Close',
+  closeLabel: closeLabelProp,
   size = 'medium',
   style,
   testID,
 }: GuestPickerProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.close;
   const theme = useTheme();
   const contextClose = useGuestPickerClose();
   const close = onClose ?? contextClose;

package/src/stepper/Stepper.tsx

@@ -15,6 +15,7 @@ import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
 import type { StepperProps, StepperSize } from './types';
 import { useFieldMembership } from '../field/membership';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Bloom's numeric counter: a round `−` button, the value, a round `+` button.
@@ -93,10 +94,12 @@ function StepperComponent({
   decrementLabel = 'Decrease',
   incrementLabel = 'Increase',
   onRemove,
-  removeLabel = 'Remove',
+  removeLabel: removeLabelProp,
   style,
   testID,
 }: StepperProps) {
+  const common = useCommonMessages();
+  const removeLabel = removeLabelProp ?? common.remove;
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
   // The digits are not a name, so the stepper is named by a prop or by the

package/src/toast/ToastContent.tsx

@@ -49,6 +49,7 @@ import {
   type ToasterProps,
   type ToastProps,
 } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 export type ToastContentProps = Pick<
   ToastProps,
@@ -323,6 +324,7 @@ function ToastCloseButton({
   onDismiss: (id: string | number) => void;
   buttonStyle?: StyleProp<ViewStyle>;
 }) {
+  const common = useCommonMessages();
   const handlePress = React.useCallback(() => {
     onDismiss(id);
   }, [onDismiss, id]);
@@ -346,7 +348,7 @@ function ToastCloseButton({
       // unlabelled button beside the message it dismisses. The string is fixed
       // rather than a prop because the control means one thing — the same call
       // `DialogHeader` and `SheetShell` make for their own close affordances.
-      accessibilityLabel="Close"
+      accessibilityLabel={common.close}
       style={[styles.close, buttonStyle]}
     />
   );

package/src/vendor-card/VendorCard.tsx

@@ -42,6 +42,7 @@ import {
   vendorFacts,
 } from './shared';
 import type { VendorCardDensity, VendorCardProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * A restaurant or a shop in a list.
@@ -245,11 +246,12 @@ function VendorCardSkeleton({
   style,
   testID,
 }: Pick<VendorCardProps, 'style' | 'testID'> & { density: VendorCardDensity }) {
+  const common = useCommonMessages();
   const compact = density === 'compact';
   return (
     <View
       aria-busy
-      accessibilityLabel="Loading"
+      accessibilityLabel={common.loading}
       style={[{ flexDirection: compact ? 'row' : 'column', alignItems: 'flex-start' }, style]}
       testID={testID}
     >

package/src/wizard/WizardFooter.tsx

@@ -7,6 +7,7 @@ import { WEB_POSITION_STICKY, type WebCssStyle } from '../styles/web-view-style'
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { WizardFooterProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The action bar under a step of a multi-step flow.
@@ -29,10 +30,10 @@ const NARROW = 480;
 
 function WizardFooterComponent({
   onBack,
-  backLabel = 'Back',
+  backLabel: backLabelProp,
   backDisabled = false,
   onNext,
-  nextLabel = 'Next',
+  nextLabel: nextLabelProp,
   nextDisabled = false,
   loading = false,
   status,
@@ -40,6 +41,9 @@ function WizardFooterComponent({
   style,
   testID,
 }: WizardFooterProps) {
+  const common = useCommonMessages();
+  const backLabel = backLabelProp ?? common.back;
+  const nextLabel = nextLabelProp ?? common.next;
   const theme = useTheme();
   const [width, setWidth] = useState(0);
   const narrow = width > 0 && width < NARROW;