@oxy.so/bloom 4.32.0 → 4.34.0

package/src/calendar/shared.ts

@@ -3,6 +3,7 @@ import { Platform, useWindowDimensions } from 'react-native';
 
 import { addDays, buildMonthGrid, isSameMonth, startOfDay } from '../date-picker/calendar-grid';
 import type { CalendarViewEvent } from './types';
+import { formatGregorian } from '../locale/format-date';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -95,18 +96,10 @@ export function currentGmtLabel(now: Date = new Date()): string {
   return `GMT${offset >= 0 ? '+' : ''}${offset}`;
 }
 
-function format(date: Date, locale: string | undefined, options: Intl.DateTimeFormatOptions): string | null {
-  try {
-    return new Intl.DateTimeFormat(locale, options).format(date);
-  } catch {
-    return null;
-  }
-}
-
 /** `Tue, Aug 11` — the details panel's date line. */
 export function formatEventDate(date: Date, locale?: string): string {
   return (
-    format(date, locale, {
+    formatGregorian(date, locale, {
       weekday: 'short',
       month: 'short',
       day: 'numeric',
@@ -116,7 +109,7 @@ export function formatEventDate(date: Date, locale?: string): string {
 
 /** `Aug` — the month switcher's label below `sm`. */
 export function formatShortMonth(date: Date, locale?: string): string {
-  return format(date, locale, { month: 'short' }) ?? String(date.getMonth() + 1);
+  return formatGregorian(date, locale, { month: 'short' }) ?? String(date.getMonth() + 1);
 }
 
 /** `Sun` … `Sat` — the month grid's weekday pills. */
@@ -126,8 +119,8 @@ export function weekdayShortLabels(locale?: string): { short: string; long: stri
   return fallback.map((name, index) => {
     const date = addDays(sunday, index);
     return {
-      short: format(date, locale, { weekday: 'short' }) ?? name,
-      long: format(date, locale, { weekday: 'long' }) ?? name,
+      short: formatGregorian(date, locale, { weekday: 'short' }) ?? name,
+      long: formatGregorian(date, locale, { weekday: 'long' }) ?? name,
     };
   });
 }

package/src/chart-cards/medical-parts.tsx

@@ -11,6 +11,7 @@ import { TABULAR } from './primitives/ChartHeader';
 import { FadeOnChange } from './primitives/FadeOnChange';
 import { useChartCardPalette } from './primitives/use-chart-palette';
 import { useCountUp } from './use-count-up';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * Chrome shared by the medical dashboard cards (`StepsCard`,
@@ -347,12 +348,15 @@ export function WeekRangePill({
   label,
   onPrev,
   onNext,
-  prevLabel = 'Previous',
-  nextLabel = 'Next',
+  prevLabel: prevLabelProp,
+  nextLabel: nextLabelProp,
   width = 151,
   style,
   testID,
 }: WeekRangePillProps) {
+  const common = useCommonMessages();
+  const prevLabel = prevLabelProp ?? common.previous;
+  const nextLabel = nextLabelProp ?? common.next;
   const palette = useChartCardPalette();
   const interactive = !!(onPrev || onNext);
   const noop = () => {};

package/src/chat-composer/ComposerBanner.tsx

@@ -23,6 +23,7 @@ import {
   resolveChatComposerPalette,
 } from './shared';
 import type { ComposerBannerProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** A URL passes through; a bare id goes to the app's `ImageResolver`. */
 function isUrl(value: string): boolean {
@@ -37,12 +38,14 @@ export function ComposerBanner({
   icon,
   accentColor,
   onClose,
-  closeLabel = 'Cancel',
+  closeLabel: closeLabelProp,
   trailing,
   style,
   testID,
   accessibilityLabel,
 }: ComposerBannerProps) {
+  const common = useCommonMessages();
+  const closeLabel = closeLabelProp ?? common.cancel;
   const theme = useTheme();
   const palette = resolveChatComposerPalette(theme);
   const resolveImage = useImageResolver();

package/src/chat-list/ChatSearchField.tsx

@@ -18,6 +18,7 @@ import {
   resolveChatListPaint,
 } from './shared';
 import type { ChatSearchFieldProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /**
  * The search pill above the conversations.
@@ -66,7 +67,7 @@ function ChatSearchFieldComponent({
   onSubmit,
   onFocus,
   onBlur,
-  placeholder = 'Search',
+  placeholder: placeholderProp,
   accessibilityLabel = 'Search chats',
   clearLabel = 'Clear search',
   trailing,
@@ -74,6 +75,8 @@ function ChatSearchFieldComponent({
   style,
   testID,
 }: ChatSearchFieldProps) {
+  const common = useCommonMessages();
+  const placeholder = placeholderProp ?? common.search;
   const theme = useTheme();
   useEffect(() => {
     adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);

package/src/composer-panel/ComposerPopover.tsx

@@ -36,6 +36,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { TRANSITION_MS } from './shared';
 import type { ComposerPopoverProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 const GUTTER = 8;
 const EASE_OUT = Easing.bezier(0, 0, 0.2, 1);
@@ -58,6 +59,7 @@ export function ComposerPopover({
   testID,
   children,
 }: ComposerPopoverProps) {
+  const common = useCommonMessages();
   const window = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const reducedMotion = useReducedMotion();
@@ -136,7 +138,7 @@ export function ComposerPopover({
         style={StyleSheet.absoluteFill}
         onPress={close}
         accessibilityRole="button"
-        accessibilityLabel="Dismiss"
+        accessibilityLabel={common.dismiss}
       />
       <Animated.View
         testID={testID}

package/src/data-table/DataTableRowActions.tsx

@@ -12,6 +12,7 @@ import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { useTheme } from '../theme/use-theme';
 import { DataTableRowAction } from './DataTable';
 import type { DataTableRowActionsProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** `size-[18px] text-foreground-icon-secondary` — a menu entry's glyph. */
 const MENU_ICON_SIZE = 18;
@@ -33,13 +34,15 @@ export function DataTableRowActions({
   name,
   actions = [],
   menu = [],
-  menuLabel = 'More actions',
+  menuLabel: menuLabelProp,
   style,
   testID,
 }: DataTableRowActionsProps) {
+  const common = useCommonMessages();
+  const menuLabel = menuLabelProp ?? common.moreActions;
   const theme = useTheme();
   const [open, setOpen] = useState(false);
-  const menuName = `${menuLabel} for ${name}`;
+  const menuName = common.labelFor(menuLabel, name);
 
   return (
     <View

package/src/data-table/DataTableSearch.tsx

@@ -6,6 +6,7 @@ import { BREAKPOINTS } from '../styles/breakpoints';
 import { TextField, TextFieldIcon, TextFieldInput } from '../text-field';
 import { TYPE_SCALE } from '../typography';
 import type { DataTableSearchProps } from './types';
+import { useCommonMessages } from '../locale/common-messages';
 
 /** `w-[153px]` / `min-w-[153px]`. */
 const SEARCH_WIDTH = 153;
@@ -20,9 +21,11 @@ export function DataTableSearch({
   label,
   value,
   onValueChange,
-  placeholder = 'Search',
+  placeholder: placeholderProp,
   testID,
 }: DataTableSearchProps) {
+  const common = useCommonMessages();
+  const placeholder = placeholderProp ?? common.search;
   const { width } = useWindowDimensions();
   const narrow = width < BREAKPOINTS.sm;
   return (

package/src/date-picker/Calendar.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { useTheme } from '../theme/use-theme';
 import {
@@ -21,6 +22,7 @@ import {
   type DayCellState,
 } from './calendar-grid';
 import { CALENDAR_CSS, CalendarMonth, dayKey } from './CalendarMonth';
+import { DATE_PICKER_MESSAGES } from './messages';
 import { resolveCalendarPalette } from './palette';
 import type {
   CalendarConstraintProps,
@@ -73,13 +75,16 @@ function CalendarFrame({
   maxDate,
   isDateUnavailable,
   weekStartsOn = 0,
-  locale,
+  locale: localeProp,
   accessibilityLabel,
   labels,
   style,
   testID,
 }: CalendarFrameProps) {
   const theme = useTheme();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const previousLabel = labels?.previousMonth ?? messages.previousMonth;
+  const nextLabel = labels?.nextMonth ?? messages.nextMonth;
   const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);
   const [firstMonth, setFirstMonth] = useState(() => startOfMonth(initialDate));
   const [focusedDate, setFocusedDate] = useState(() => startOfDay(initialDate));
@@ -202,7 +207,8 @@ function CalendarFrame({
           onKeyDown={onKeyDown}
           registerNode={registerNode}
           accessibilityLabel={accessibilityLabel}
-          labels={labels}
+          previousLabel={previousLabel}
+          nextLabel={nextLabel}
           testID={testID ? `${testID}-month-${index}` : undefined}
         />
       ))}

package/src/date-picker/CalendarMonth.tsx

@@ -14,7 +14,7 @@ import {
   type DayCellState,
 } from './calendar-grid';
 import type { CalendarPalette } from './palette';
-import type { CalendarLabels, WeekStart } from './types';
+import type { WeekStart } from './types';
 
 /**
  * One month panel: header, weekday row and day grid.
@@ -281,7 +281,9 @@ export interface CalendarMonthProps {
   onKeyDown: (key: string, preventDefault: () => void) => void;
   registerNode: (key: string, node: View | null) => void;
   accessibilityLabel?: string;
-  labels?: CalendarLabels;
+  /** The chevrons' names, already localised by the calendar. */
+  previousLabel: string;
+  nextLabel: string;
   testID?: string;
 }
 
@@ -309,7 +311,8 @@ export function CalendarMonth({
   onKeyDown,
   registerNode,
   accessibilityLabel,
-  labels,
+  previousLabel,
+  nextLabel,
   testID,
 }: CalendarMonthProps) {
   const title = formatMonthTitle(month, locale);
@@ -341,7 +344,7 @@ export function CalendarMonth({
         {onPrevious ? (
           <NavButton
             direction="left"
-            label={labels?.previousMonth ?? 'Previous month'}
+            label={previousLabel}
             onPress={onPrevious}
             disabled={previousDisabled}
             palette={palette}
@@ -358,7 +361,7 @@ export function CalendarMonth({
         {onNext ? (
           <NavButton
             direction="right"
-            label={labels?.nextMonth ?? 'Next month'}
+            label={nextLabel}
             onPress={onNext}
             disabled={nextDisabled}
             palette={palette}

package/src/date-picker/DatePicker.tsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { Calendar } from './Calendar';
 import { formatTriggerDate } from './calendar-grid';
 import { DateChipInput } from './DateChipInput';
+import { DATE_PICKER_MESSAGES } from './messages';
 import { PickerActions, PickerShell, usePickerPalette } from './PickerShell';
 import { SummaryPresence } from './SummaryPresence';
 import type { DatePickerProps } from './types';
@@ -27,8 +29,8 @@ export function DatePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date',
-  accessibilityLabel = 'Date',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
   labels,
   disabled,
   open: openProp,
@@ -38,11 +40,14 @@ export function DatePicker({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: DatePickerProps) {
   const palette = usePickerPalette();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const placeholder = placeholderProp ?? messages.datePlaceholder;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.dateLabel;
   const [committed, setCommitted] = useControllableState<Date | null>({
     value,
     defaultValue,
@@ -128,7 +133,8 @@ export function DatePicker({
               setOpenState(false);
             }}
             applyDisabled={!pending}
-            labels={labels}
+            cancelLabel={labels?.cancel ?? messages.cancel}
+            applyLabel={labels?.apply ?? messages.apply}
             testID={testID}
           />
         </View>

package/src/date-picker/DateRangePicker.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { Platform, Pressable, View, useWindowDimensions, type TextStyle } from 'react-native';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text, TYPE_SCALE } from '../typography';
 import {
@@ -13,6 +14,7 @@ import {
 import { RangeCalendar } from './Calendar';
 import { MONTH_PANEL_WIDTH } from './CalendarMonth';
 import { DateChipInput } from './DateChipInput';
+import { DATE_PICKER_MESSAGES } from './messages';
 import type { CalendarPalette } from './palette';
 import { PickerActions, PickerShell, usePickerPalette } from './PickerShell';
 import { SummaryPresence } from './SummaryPresence';
@@ -36,11 +38,6 @@ import type { DateRange, DateRangePickerProps } from './types';
 /** 16 + 118 + 12 + two panels + 8 between them + 8 — the popup width. */
 const DUAL_MONTH_WIDTH = 16 + 118 + 12 + MONTH_PANEL_WIDTH * 2 + 8 + 8;
 
-/** The pill's English default; `labels.daysSelected` takes the app's own plural rules. */
-function daysSelected(days: number): string {
-  return `${days} day${days === 1 ? '' : 's'} selected`;
-}
-
 /** `text-body-medium`, in Inter. */
 const BODY: TextStyle = TYPE_SCALE['body-medium'];
 
@@ -90,8 +87,8 @@ export function DateRangePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date range',
-  accessibilityLabel = 'Date range',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
   quickSelect = true,
   labels,
   disabled,
@@ -102,11 +99,14 @@ export function DateRangePicker({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: DateRangePickerProps) {
   const palette = usePickerPalette();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const placeholder = placeholderProp ?? messages.rangePlaceholder;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.rangeLabel;
   const { width: windowWidth } = useWindowDimensions();
   const [committed, setCommitted] = useControllableState<DateRange | null>({
     value,
@@ -161,7 +161,7 @@ export function DateRangePicker({
               {presets.map((preset) => (
                 <PresetRow
                   key={preset.key}
-                  label={labels?.presets?.[preset.key] ?? preset.label}
+                  label={labels?.presets?.[preset.key] ?? messages.presets[preset.key]}
                   active={isSameRange(pending, preset.range)}
                   onPress={() => choose(preset.range)}
                   palette={palette}
@@ -213,7 +213,7 @@ export function DateRangePicker({
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                       <DateChipInput
                         date={pending.start}
-                        label={labels?.startDate ?? 'Start date'}
+                        label={labels?.startDate ?? messages.startDate}
                         palette={palette}
                         onCommit={(start) =>
                           setPending({ start, end: start > pending.end ? start : pending.end })
@@ -222,7 +222,7 @@ export function DateRangePicker({
                       <Text style={{ ...BODY, color: palette.secondaryText }}>-</Text>
                       <DateChipInput
                         date={pending.end}
-                        label={labels?.endDate ?? 'End date'}
+                        label={labels?.endDate ?? messages.endDate}
                         palette={palette}
                         onCommit={(end) =>
                           setPending({ start: end < pending.start ? end : pending.start, end })
@@ -241,7 +241,7 @@ export function DateRangePicker({
                         }}
                       >
                         <Text style={{ ...BODY, color: palette.secondaryText }}>
-                          {(labels?.daysSelected ?? daysSelected)(days)}
+                          {(labels?.daysSelected ?? messages.daysSelected)(days)}
                         </Text>
                       </View>
                     ) : null}
@@ -259,7 +259,8 @@ export function DateRangePicker({
                 setOpenState(false);
               }}
               applyDisabled={!pending}
-              labels={labels}
+              cancelLabel={labels?.cancel ?? messages.cancel}
+              applyLabel={labels?.apply ?? messages.apply}
               testID={testID}
             />
           </View>

package/src/date-picker/MeetingScheduler.tsx

@@ -16,11 +16,14 @@ import { useControllableState } from '../hooks/use-controllable-state';
 import { RiFlagLine } from '../icons/remix/RiFlagLine';
 import { RiGlobalLine } from '../icons/remix/RiGlobalLine';
 import { RiVideoLine } from '../icons/remix/RiVideoLine';
+import { formatGregorian } from '../locale/format-date';
+import { useMessages } from '../locale/messages';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text, TYPE_SCALE } from '../typography';
 import { Calendar } from './Calendar';
 import { formatTriggerDate, today } from './calendar-grid';
+import { DATE_PICKER_MESSAGES } from './messages';
 import type { CalendarPalette } from './palette';
 import { PickerShell, usePickerPalette } from './PickerShell';
 import type {
@@ -95,11 +98,11 @@ function formatTime(time: string, format: MeetingSchedulerHourFormat): string {
 }
 
 function weekdayShort(date: Date, locale?: string): string {
-  try {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date).slice(0, 2);
-  } catch {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][date.getDay()] ?? '';
-  }
+  return (
+    formatGregorian(date, locale, { weekday: 'short' })?.slice(0, 2) ??
+    ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][date.getDay()] ??
+    ''
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -352,8 +355,8 @@ export function MeetingScheduler({
   defaultValue,
   onChange,
   defaultHourFormat = '24h',
-  triggerLabel = 'Schedule a meeting',
-  accessibilityLabel = 'Schedule meeting',
+  triggerLabel: triggerLabelProp,
+  accessibilityLabel: accessibilityLabelProp,
   labels,
   disabled,
   open: openProp,
@@ -363,11 +366,14 @@ export function MeetingScheduler({
   maxDate,
   isDateUnavailable,
   weekStartsOn,
-  locale,
+  locale: localeProp,
   style,
   testID,
 }: MeetingSchedulerProps) {
   const theme = useTheme();
+  const { locale, messages } = useMessages(DATE_PICKER_MESSAGES, localeProp);
+  const triggerLabel = triggerLabelProp ?? messages.meetingTrigger;
+  const accessibilityLabel = accessibilityLabelProp ?? messages.meetingLabel;
   const palette = usePickerPalette();
   const { width: windowWidth } = useWindowDimensions();
   const slots = useMemo(() => timeSlots ?? defaultTimeSlots(), [timeSlots]);
@@ -397,8 +403,8 @@ export function MeetingScheduler({
 
   const wide = windowWidth >= WIDE_WIDTH + 32;
   const shadow2xs = theme.isDark ? SHADOW_2XS.dark : SHADOW_2XS.light;
-  const sendLabel = labels?.send ?? 'Send meeting';
-  const durationText = (labels?.duration ?? ((n: number) => `${n} minutes`))(meeting.durationMinutes);
+  const sendLabel = labels?.send ?? messages.send;
+  const durationText = (labels?.duration ?? messages.duration)(meeting.durationMinutes);
   const chevron = useMemo(() => ({ open, color: palette.secondaryText }), [open, palette.secondaryText]);
 
   const hostColumn = (
@@ -505,7 +511,7 @@ export function MeetingScheduler({
                 {formatTriggerDate(pending.date, locale)}
               </Text>
               <Text style={[BODY_MEDIUM, { color: palette.secondaryText }]}>
-                {pending.time ?? labels?.selectTime ?? 'Select a time'}
+                {pending.time ?? labels?.selectTime ?? messages.selectTime}
               </Text>
             </>
           ) : null}

package/src/date-picker/PickerShell.tsx

@@ -7,7 +7,6 @@ import { RiCalendarLine as CalendarIcon } from '../icons/remix/RiCalendarLine';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { useTheme } from '../theme/use-theme';
 import { resolveCalendarPalette, type CalendarPalette } from './palette';
-import type { DatePickerLabels } from './types';
 
 /**
  * The chrome both pickers share (`date-picker/shared.tsx`).
@@ -100,22 +99,24 @@ export function PickerActions({
   onCancel,
   onApply,
   applyDisabled,
-  labels,
+  cancelLabel,
+  applyLabel,
   testID,
 }: {
   onCancel: () => void;
   onApply: () => void;
   applyDisabled: boolean;
-  labels?: DatePickerLabels;
+  cancelLabel: string;
+  applyLabel: string;
   testID?: string;
 }) {
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
       <Button onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined} appearance="subtle" tone="neutral">
-        {labels?.cancel ?? 'Cancel'}
+        {cancelLabel}
       </Button>
       <Button onPress={onApply} disabled={applyDisabled} testID={testID ? `${testID}-apply` : undefined}>
-        {labels?.apply ?? 'Apply'}
+        {applyLabel}
       </Button>
     </View>
   );

package/src/date-picker/calendar-grid.ts

@@ -11,6 +11,7 @@
  */
 
 import type { DateRange, DateRangePreset, WeekStart } from './types';
+import { formatGregorian } from '../locale/format-date';
 
 const MS_PER_DAY = 86_400_000;
 
@@ -130,37 +131,29 @@ export function weekdayLabels(
   const sunday = new Date(2023, 0, 1);
   return Array.from({ length: 7 }, (_, column) => {
     const date = addDays(sunday, (weekStartsOn + column) % 7);
-    const long = format(date, locale, { weekday: 'long' }) ?? FALLBACK_WEEKDAYS[date.getDay()]!;
-    const short = format(date, locale, { weekday: 'short' }) ?? long;
+    const long = formatGregorian(date, locale, { weekday: 'long' }) ?? FALLBACK_WEEKDAYS[date.getDay()]!;
+    const short = formatGregorian(date, locale, { weekday: 'short' }) ?? long;
     return { short: short.slice(0, 2), long };
   });
 }
 
-function format(date: Date, locale: string | undefined, options: Intl.DateTimeFormatOptions): string | null {
-  try {
-    return new Intl.DateTimeFormat(locale, options).format(date);
-  } catch {
-    return null;
-  }
-}
-
 /** `September 2026` — the month panel's title. */
 export function formatMonthTitle(month: Date, locale?: string): string {
   return (
-    format(month, locale, { month: 'long', year: 'numeric' }) ??
+    formatGregorian(month, locale, { month: 'long', year: 'numeric' }) ??
     `${month.getMonth() + 1}/${month.getFullYear()}`
   );
 }
 
 /** `Sep 16, 2026` — the trigger's label. */
 export function formatTriggerDate(date: Date, locale?: string): string {
-  return format(date, locale, { month: 'short', day: 'numeric', year: 'numeric' }) ?? formatChipDate(date);
+  return formatGregorian(date, locale, { month: 'short', day: 'numeric', year: 'numeric' }) ?? formatChipDate(date);
 }
 
 /** `Wednesday, September 16, 2026` — a day button's accessible name. */
 export function formatAccessibleDate(date: Date, locale?: string): string {
   return (
-    format(date, locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) ??
+    formatGregorian(date, locale, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' }) ??
     formatChipDate(date)
   );
 }
@@ -334,22 +327,22 @@ export function clampDate(date: Date, { minDate, maxDate }: DateConstraints): Da
   return startOfDay(date);
 }
 
-/** Quick-select presets, relative to `now`. `label` is the English default. */
+/** Quick-select presets, relative to `now`. Their names are `DatePickerMessages.presets`. */
 export function quickSelectPresets(
   now: Date = today(),
-): { key: DateRangePreset; label: string; range: DateRange }[] {
+): { key: DateRangePreset; range: DateRange }[] {
   const lastMonth = addMonths(now, -1);
   const lastYear = new Date(now.getFullYear() - 1, now.getMonth(), 1);
   const yesterday = addDays(now, -1);
   return [
-    { key: 'today', label: 'Today', range: { start: now, end: now } },
-    { key: 'yesterday', label: 'Yesterday', range: { start: yesterday, end: yesterday } },
-    { key: 'lastWeek', label: 'Last week', range: { start: addDays(now, -7), end: yesterday } },
-    { key: 'thisMonth', label: 'This month', range: { start: startOfMonth(now), end: endOfMonth(now) } },
-    { key: 'lastMonth', label: 'Last month', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
-    { key: 'thisYear', label: 'This year', range: { start: startOfYear(now), end: endOfYear(now) } },
-    { key: 'lastYear', label: 'Last year', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
-    { key: 'allTime', label: 'All time', range: { start: addMonths(now, -120), end: now } },
+    { key: 'today', range: { start: now, end: now } },
+    { key: 'yesterday', range: { start: yesterday, end: yesterday } },
+    { key: 'lastWeek', range: { start: addDays(now, -7), end: yesterday } },
+    { key: 'thisMonth', range: { start: startOfMonth(now), end: endOfMonth(now) } },
+    { key: 'lastMonth', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
+    { key: 'thisYear', range: { start: startOfYear(now), end: endOfYear(now) } },
+    { key: 'lastYear', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
+    { key: 'allTime', range: { start: addMonths(now, -120), end: now } },
   ];
 }