@oxy.so/bloom 5.0.0 → 5.1.0

package/src/chart-cards/ContributionsCard.tsx

@@ -35,6 +35,9 @@ import { ChartHeadline } from './primitives/ChartHeader';
 import { describeDeltaRatio, formatNumber } from './primitives/format';
 import { useChartCardSurfacePalette, useChartCardPalette } from './primitives/use-chart-palette';
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
+import { monthNames as localMonthNames } from '../locale/format-date';
 
 // ---------------------------------------------------------------------------
 //  Grid
@@ -105,6 +108,7 @@ export function ContributionsGrid({
   style,
   testID,
 }: ContributionsGridProps) {
+  const { messages: gridText } = useMessages(CHART_CARDS_MESSAGES);
   const tiers = useContributionTiers(color);
   const reducedMotion = useReducedMotion();
   const [width, setWidth] = useState(0);
@@ -200,7 +204,7 @@ export function ContributionsGrid({
               : { flex: 1, flexBasis: 0, minWidth: 0, aspectRatio: 1 };
             const common = {
               role: 'img' as const,
-              accessibilityLabel: contributionLabel(cell),
+              accessibilityLabel: contributionLabel(cell, gridText),
               testID: testID ? `${testID}-cell-${index}` : undefined,
               onPointerEnter: () => enter(index),
               onPointerLeave: leave,
@@ -242,7 +246,7 @@ export function ContributionsGrid({
             <TooltipTrigger>
               <View style={{ width: cellSize, height: cellSize }} />
             </TooltipTrigger>
-            <TooltipTextBubble>{contributionLabel(anchorCell)}</TooltipTextBubble>
+            <TooltipTextBubble>{contributionLabel(anchorCell, gridText)}</TooltipTextBubble>
           </Tooltip>
         </View>
       ) : null}
@@ -299,12 +303,6 @@ export interface ContributionsCardProps {
   testID?: string;
 }
 
-const DEFAULT_PERIODS: readonly ContributionsPeriod[] = [
-  { id: 'weekly', label: 'Weekly' },
-  { id: 'monthly', label: 'Monthly' },
-  { id: 'yearly', label: 'Yearly' },
-];
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] as const;
 const NO_CELLS: readonly ContributionCell[] = [];
 /** Index rows of two — a `grid-cols-2` layout below `sm`. */
 function pairsOf(count: number): number[][] {
@@ -334,25 +332,39 @@ export const CONTRIBUTIONS_CARD_HEIGHT = 337;
  *             block scrolls sideways
  */
 export function ContributionsCard({
-  title = 'Contributions this year',
+  title: titleProp,
   total: totalProp,
   delta: deltaProp,
-  format = formatNumber,
+  format: formatProp,
   stats: statsProp,
   cells: cellsProp,
   columns = CONTRIBUTION_COLUMNS,
   color,
-  periods = DEFAULT_PERIODS,
+  periods: periodsProp,
   defaultPeriod,
   onPeriodChange,
-  activityLabel = 'Activity',
-  months = MONTHS,
+  activityLabel: activityLabelProp,
+  months: monthsProp,
   animateIn = false,
   activeCell,
   onActiveCellChange,
   style,
   testID,
 }: ContributionsCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.contributionsThisYear;
+  const activityLabel = activityLabelProp ?? chartText.titles.activity;
+  const periods = useMemo<readonly ContributionsPeriod[]>(
+    () =>
+      periodsProp ?? [
+        { id: 'weekly', label: chartText.weekly },
+        { id: 'monthly', label: chartText.monthly },
+        { id: 'yearly', label: chartText.yearly },
+      ],
+    [periodsProp, chartText],
+  );
+  const months = useMemo(() => monthsProp ?? localMonthNames(chartLocale, 'short'), [monthsProp, chartLocale]);
   const palette = useChartCardSurfacePalette(style);
   const theme = useTheme();
   const { width: viewport } = useWindowDimensions();
@@ -403,7 +415,7 @@ export function ContributionsCard({
         label={title}
         value={total}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         fadeKey={selectedId}
         testID={testID}
         style={{ width: '100%' }}
@@ -441,7 +453,7 @@ export function ContributionsCard({
           </Text>
           {periods.length > 0 && selectedId ? (
             <SegmentedControl
-              label={`${activityLabel} period`}
+              label={chartText.periodOf(activityLabel)}
               type="radio"
               variant="plain"
               value={selectedId}

package/src/chart-cards/EarningsChartCard.tsx

@@ -15,8 +15,11 @@ import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
 import { roundedBarPath, singleBarSlot } from './rounded-bar-geometry';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
+import { formatCompactCurrency, formatCurrency } from '../locale/format-number';
 /**
  * `EarningsChartCard` ("Earned so far"): rounded bars standing in full-height
  * tracks, a Weekly / Monthly / Yearly switcher and a count-up headline that
@@ -101,19 +104,19 @@ const HOVER_STROKE = 2;
 export const formatEarningsK = (value: number) => (value === 0 ? '$0' : `$${value / 1000}K`);
 
 export function EarningsChartCard({
-  title = 'Earned so far',
+  title: titleProp,
   data: dataProp,
   headline: headlineProp,
   delta: deltaProp,
   ranges,
   defaultRange,
   onRangeChange,
-  rangesLabel = 'Earnings period',
+  rangesLabel: rangesLabelProp,
   yTicks,
   yMax,
   getPointTitle,
-  format = formatDollars,
-  formatAxisValue = formatEarningsK,
+  format: formatProp,
+  formatAxisValue: formatAxisValueProp,
   color,
   activeColor,
   activeIndex: controlledIndex,
@@ -122,6 +125,11 @@ export function EarningsChartCard({
   style,
   testID,
 }: EarningsChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatCurrency(value, 'USD', chartLocale));
+  const formatAxisValue = formatAxisValueProp ?? ((value: number) => (value === 0 ? formatCurrency(0, 'USD', chartLocale) : formatCompactCurrency(value, 'USD', chartLocale)));
+  const title = titleProp ?? chartText.titles.earnedSoFar;
+  const rangesLabel = rangesLabelProp ?? chartText.earningsPeriod;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -154,7 +162,7 @@ export function EarningsChartCard({
 
   const hovering = activeIndex !== null;
   const point = hovering ? data[activeIndex] : undefined;
-  const label = point ? (getPointTitle ? getPointTitle(point, activeIndex!) : monthTitle(point.label)) : title;
+  const label = point ? (getPointTitle ? getPointTitle(point, activeIndex!) : monthTitle(point.label, chartLocale)) : title;
   const total = headline ?? values.reduce((sum, v) => sum + v, 0);
 
   return (
@@ -163,7 +171,7 @@ export function EarningsChartCard({
         label={label}
         value={point ? point.value : total}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         ranges={ranges}

package/src/chart-cards/FunnelChartCard.tsx

@@ -25,6 +25,8 @@ import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
 import { useSvgEase } from './medical-parts';
 import { StageStatTiles } from './stage-parts';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /**
  * A horizontal flow funnel, hand-drawn in SVG.
@@ -204,7 +206,7 @@ export function funnelPill(value: number, top: number, colW: number): { label: s
 export function FunnelChartCard({
   shape = 'curved',
   mono = false,
-  title = 'Sign-up funnel',
+  title: titleProp,
   stages: stagesProp,
   headline: headlineProp,
   delta: deltaProp,
@@ -212,13 +214,16 @@ export function FunnelChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   activeIndex: controlledIndex,
   onActiveIndexChange,
   accessibilityLabel,
   style,
   testID,
 }: FunnelChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.signUpFunnel;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const monoTone = useMonoTone();
@@ -310,7 +315,7 @@ export function FunnelChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}

package/src/chart-cards/HeatmapChartCard.tsx

@@ -20,6 +20,8 @@ import { describeDeltaRatio, formatNumber } from './primitives/format';
 import { useChartCardSurfacePalette, useChartTones } from './primitives/use-chart-palette';
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 export interface HeatmapRow {
   label: string;
@@ -118,7 +120,7 @@ export function heatmapCellColor(value: number, max: number, accent: string, tra
  * Hover on web (leaving the grid clears); press and scrub on native.
  */
 export function HeatmapChartCard({
-  title = 'Active users',
+  title: titleProp,
   rows: rowsProp,
   columns: columnsProp,
   color,
@@ -130,7 +132,7 @@ export function HeatmapChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   columnLabelEvery,
   legendLabels = LEGEND_LABELS,
   activeCell: controlled,
@@ -138,6 +140,9 @@ export function HeatmapChartCard({
   style,
   testID,
 }: HeatmapChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.activeUsers;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -216,7 +221,7 @@ export function HeatmapChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${active ? `${active.row}:${active.col}` : 'idle'}`}
         range={range}

package/src/chart-cards/LineChartCard.tsx

@@ -13,8 +13,12 @@ import { PulsingDot } from './primitives/PulsingDot';
 import { useActiveIndex } from './primitives/use-active-index';
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
+import { monthNames } from '../locale/format-date';
+import { formatCompactCurrency, formatCurrency } from '../locale/format-number';
 /**
  * One series as a line over a soft gradient, a Weekly / Monthly / Yearly
  * switcher, a count-up headline that follows the hovered point, and a
@@ -95,24 +99,16 @@ const TICK_COUNT = 4;
 /** `gap-6` — this card's header-to-chart gap. */
 const CARD_GAP = 24;
 
-const MONTH_NAMES: Record<string, string> = {
-  Jan: 'January',
-  Feb: 'February',
-  Mar: 'March',
-  Apr: 'April',
-  May: 'May',
-  Jun: 'June',
-  Jul: 'July',
-  Aug: 'August',
-  Sep: 'September',
-  Oct: 'October',
-  Nov: 'November',
-  Dec: 'December',
-};
+const MONTH_ABBREVIATIONS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
-/** Maps `"Jul"` → `"July"`, anything else unchanged. */
-export function monthTitle(label: string): string {
-  return MONTH_NAMES[label] ?? label;
+/**
+ * A label that is an English month abbreviation (`"Jul"`, how chart data names
+ * its points) becomes that month's full name in `locale` (`"July"`, `"julio"`);
+ * any other label is the app's own and stays unchanged.
+ */
+export function monthTitle(label: string, locale?: string): string {
+  const month = MONTH_ABBREVIATIONS.indexOf(label);
+  return month === -1 ? label : (monthNames(locale, 'long')[month] ?? label);
 }
 
 /** `$18,240` — `` `$${display.toLocaleString()}` ``. */
@@ -131,7 +127,7 @@ export function closedAreaPath(points: readonly Point[], baseY: number, shape: '
 
 export function LineChartCard({
   shape = 'curved',
-  title = 'Revenue',
+  title: titleProp,
   data: dataProp,
   headline: headlineProp,
   delta: deltaProp,
@@ -140,8 +136,8 @@ export function LineChartCard({
   onRangeChange,
   rangesLabel,
   getPointTitle,
-  format = formatDollars,
-  formatAxisValue = formatDollarsK,
+  format: formatProp,
+  formatAxisValue: formatAxisValueProp,
   color,
   activeColor,
   activeIndex: controlledIndex,
@@ -150,6 +146,10 @@ export function LineChartCard({
   style,
   testID,
 }: LineChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatCurrency(value, 'USD', chartLocale));
+  const formatAxisValue = formatAxisValueProp ?? ((value: number) => (value === 0 ? formatCurrency(0, 'USD', chartLocale) : formatCompactCurrency(value, 'USD', chartLocale, 0)));
+  const title = titleProp ?? chartText.titles.revenue;
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const { selected, selectedId, select } = useChartRange(ranges, defaultRange, onRangeChange);
@@ -182,7 +182,7 @@ export function LineChartCard({
   const hovering = activeIndex !== null;
   const total = headline ?? values.reduce((sum, v) => sum + v, 0);
   const point = hovering ? data[activeIndex] : undefined;
-  const label = point ? (getPointTitle ? getPointTitle(point, activeIndex!) : monthTitle(point.label)) : title;
+  const label = point ? (getPointTitle ? getPointTitle(point, activeIndex!) : monthTitle(point.label, chartLocale)) : title;
 
   const rawId = useId();
   const id = `bloom-line-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
@@ -193,7 +193,7 @@ export function LineChartCard({
         label={label}
         value={point ? point.value : total}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         ranges={ranges}
@@ -212,7 +212,7 @@ export function LineChartCard({
           outside="keep"
           onActiveIndexChange={setActiveIndex}
           palette={palette}
-          accessibilityLabel={accessibilityLabel ?? `${title} line chart`}
+          accessibilityLabel={accessibilityLabel ?? chartText.lineChart(title)}
           testID={testID ? `${testID}-plot` : undefined}>
           {({ size, box, x, y }) => {
             const points: Point[] = values.map((v, i) => ({

package/src/chart-cards/MostActiveDaysCard.tsx

@@ -28,6 +28,11 @@ import {
   useMedicalPalette,
   type MedicalPalette,
 } from './medical-parts';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
+import { DATE_PICKER_MESSAGES } from '../date-picker/messages';
+import { monthNames as localMonthNames } from '../locale/format-date';
+import { pickMessages } from '../locale/messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 /**
@@ -90,21 +95,6 @@ export interface MostActiveDaysCardProps {
   testID?: string;
 }
 
-const MONTH_NAMES = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-] as const;
-
 /** Air above a month's title when a chevron scrolls it to the top. */
 export const REST_OFFSET = 9;
 /** A month counts as current once its title is within this of the viewport top. */
@@ -125,8 +115,6 @@ const EMPTY_CELL: ViewStyle = {
   paddingRight: 10,
 };
 
-const defaultDayLabel = (d: ActivityDay, name: string) => `Activity for ${name} ${d.day}`;
-
 const daysIn = (year: number, month: number) => new Date(year, month + 1, 0).getDate();
 
 /** The index of the month whose title top is within the threshold of the viewport top. */
@@ -254,17 +242,29 @@ export function MostActiveDaysCard({
   rings,
   ringColors: ringColorsProp,
   initialMonth = 0,
-  title = 'Most active days',
+  title: titleProp,
   headline,
-  suffix = 'total steps',
-  format = groupThousands,
-  monthNames = MONTH_NAMES,
+  suffix: suffixProp,
+  format: formatProp,
+  monthNames: monthNamesProp,
   selectedDay = null,
   onSelectDay,
-  getDayLabel = defaultDayLabel,
+  getDayLabel: getDayLabelProp,
   style,
   testID,
 }: MostActiveDaysCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => groupThousands(value, chartLocale));
+  const title = titleProp ?? chartText.titles.mostActiveDays;
+  const suffix = suffixProp ?? chartText.totalSteps;
+  const pickerText = pickMessages(DATE_PICKER_MESSAGES, chartLocale);
+  // The locale's month names; a caller's own list keeps its three-letter titles.
+  const monthNames = useMemo(() => monthNamesProp ?? localMonthNames(chartLocale, 'long'), [monthNamesProp, chartLocale]);
+  const monthTitles = useMemo(
+    () => (monthNamesProp ? monthNamesProp.map((name) => name.slice(0, 3)) : localMonthNames(chartLocale, 'short')),
+    [monthNamesProp, chartLocale],
+  );
+  const getDayLabel = getDayLabelProp ?? ((d: ActivityDay, name: string) => chartText.activityFor(name, d.day));
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const medical = useMedicalPalette();
@@ -310,8 +310,8 @@ export function MostActiveDaysCard({
           label={monthNames[currentMonth] ?? ''}
           onPrev={() => scrollToMonth(currentMonth - 1)}
           onNext={() => scrollToMonth(currentMonth + 1)}
-          prevLabel="Previous month"
-          nextLabel="Next month"
+          prevLabel={pickerText.previousMonth}
+          nextLabel={pickerText.nextMonth}
           testID={testID ? `${testID}-month` : undefined}
         />
       </MedicalHeader>
@@ -343,7 +343,7 @@ export function MostActiveDaysCard({
             return (
               <View key={monthName} onLayout={onMonthLayout(month)} style={{ flexDirection: 'column', gap: 10 }}>
                 <Text variant="title-3-medium" style={{ paddingLeft: 4, color: palette.text }}>
-                  {monthName.slice(0, 3)}
+                  {monthTitles[month]}
                 </Text>
                 <View>
                   {weeks.map((week) => (

package/src/chart-cards/OrdersChartCard.tsx

@@ -13,6 +13,8 @@ import { bandSize, barPositions, topRoundedBarPath, yScale } from './geometry';
 import { ordersSeriesTone } from './palette';
 import type { OrdersChartCardProps } from './types';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { useMessages } from '../locale/messages';
+import { CHART_CARDS_MESSAGES } from './messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 /**
@@ -53,6 +55,7 @@ export function OrdersChartCard({
   testID,
   ...frame
 }: OrdersChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(frame.style);
   const tone = useMemo(() => ordersSeriesTone(theme), [theme]);
@@ -67,14 +70,14 @@ export function OrdersChartCard({
   const previousAnim = useChartProgress(previous);
 
   const label =
-    accessibilityLabel ?? chartAccessibilityLabel(frame.title ?? 'Orders', frame.currentLabel, frame.previousLabel);
+    accessibilityLabel ?? chartAccessibilityLabel(frame.title ?? chartText.titles.orders, frame.currentLabel, frame.previousLabel, chartText);
 
   return (
     <ChartCardFrame
       {...frame}
       data={data}
-      defaultTitle="Orders"
-      defaultFormatValue={groupThousands}
+      defaultTitle={chartText.titles.orders}
+      defaultFormatValue={(value: number) => groupThousands(value, chartLocale)}
       seriesColor={fill}
       comparisonColor={comparisonFill}
       activeIndex={activeIndex}

package/src/chart-cards/RadarChartCard.tsx

@@ -31,6 +31,7 @@ import { useChartCardSurfacePalette, useChartTones } from './primitives/use-char
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { useBloomLocale } from '../locale/context';
 
 /** One axis of a radar: its category `label` plus one numeric field per series. */
 export type RadarPoint = { label: string } & Record<string, number | string>;
@@ -205,7 +206,7 @@ export function RadarChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   alertBelow,
   scoreCaption,
   tiles = false,
@@ -218,6 +219,8 @@ export function RadarChartCard({
   style,
   testID,
 }: RadarChartCardProps) {
+  const chartLocale = useBloomLocale();
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
@@ -478,7 +481,7 @@ export function RadarChartCard({
         label={headerLabel}
         value={isScore ? undefined : headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}

package/src/chart-cards/RadialChartCard.tsx

@@ -29,6 +29,8 @@ import { useChartCardSurfacePalette, useChartTones } from './primitives/use-char
 import { useChartRange, type ChartRange } from './primitives/use-chart-range';
 import { useWebTransition } from './primitives/use-web-transition';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { CHART_CARDS_MESSAGES } from './messages';
+import { useMessages } from '../locale/messages';
 
 /** One ring / segment of a radial chart. */
 export interface RadialDatum {
@@ -150,7 +152,7 @@ interface Arc extends RingBand, SectorAngles {}
  */
 export function RadialChartCard({
   variant = 'rings',
-  title = 'Visitors',
+  title: titleProp,
   data: dataProp,
   max: maxProp,
   headline: headlineProp,
@@ -159,7 +161,7 @@ export function RadialChartCard({
   ranges,
   defaultRange,
   onRangeChange,
-  format = formatNumber,
+  format: formatProp,
   centerCaption,
   tiles = false,
   activeIndex: controlledIndex,
@@ -168,6 +170,9 @@ export function RadialChartCard({
   style,
   testID,
 }: RadialChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const format = formatProp ?? ((value: number) => formatNumber(value, chartLocale));
+  const title = titleProp ?? chartText.titles.visitors;
   const palette = useChartCardSurfacePalette(style);
   const palettes = useChartTones();
   const { width: viewportWidth } = useWindowDimensions();
@@ -203,7 +208,7 @@ export function RadialChartCard({
 
   let center: { value: number; caption: string } | null = null;
   if (isGauge) {
-    center = { value: pct(data[0]?.value ?? 0), caption: centerCaption ?? 'of goal' };
+    center = { value: pct(data[0]?.value ?? 0), caption: centerCaption ?? chartText.ofGoal };
   } else if (isStacked) {
     const focus = hovering ? activeIndex : 0;
     center = { value: pct(data[focus]?.value ?? 0), caption: centerCaption ?? data[focus]?.label ?? '' };
@@ -266,12 +271,18 @@ export function RadialChartCard({
     setActiveIndex(index !== null && index < data.length ? index : null);
   };
 
-  const kind = isStacked ? 'half gauge' : isGauge ? 'gauge' : 'radial chart';
+  const reading = pct(data[0]?.value ?? 0);
   const a11y =
     accessibilityLabel ??
     (isGauge
-      ? `${title} ${kind}: ${pct(data[0]?.value ?? 0)}% ${centerCaption ?? 'of goal'}`
-      : `${title} ${kind}: ${data.map((d) => `${d.label} ${format(d.value)}`).join(', ')}`);
+      ? chartText.gaugeChart(
+          title,
+          centerCaption !== undefined ? `${reading}% ${centerCaption}` : chartText.percentOfGoal(reading),
+        )
+      : (isStacked ? chartText.halfGaugeChart : chartText.radialChart)(
+          title,
+          data.map((d) => `${d.label} ${format(d.value)}`).join(', '),
+        ));
 
   const chart = (
     <PolarSurface
@@ -381,7 +392,7 @@ export function RadialChartCard({
         label={headerLabel}
         value={headlineValue}
         format={format}
-        delta={delta !== undefined ? describeDeltaRatio(delta) : undefined}
+        delta={delta !== undefined ? describeDeltaRatio(delta, chartLocale) : undefined}
         hovering={hovering}
         fadeKey={`${selectedId ?? ''}:${activeIndex}`}
         range={range}

package/src/chart-cards/RevenueChartCard.tsx

@@ -13,8 +13,11 @@ import { monotoneXAreaPath, monotoneXPath, pointX, yScale } from './geometry';
 import { revenueSeriesTone } from './palette';
 import type { RevenueChartCardProps } from './types';
 import { lerp, useChartProgress } from './use-chart-progress';
+import { useMessages } from '../locale/messages';
+import { CHART_CARDS_MESSAGES } from './messages';
 
 import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
+import { formatCurrency } from '../locale/format-number';
 /**
  * `RevenueChartCard`: a year of revenue against the year before.
  *
@@ -35,7 +38,6 @@ import { useChartCardSurfacePalette } from './primitives/use-chart-palette';
 
 const Y_AXIS_WIDTH = 44;
 
-const defaultFormatValue = (value: number) => `$${groupThousands(value)}`;
 /** `formatK`: `$16k`, or `$950` under a thousand. */
 const defaultFormatAxisValue = (value: number) =>
   value >= 1000 ? `$${Math.round(value / 1000)}k` : `$${value}`;
@@ -52,6 +54,7 @@ export function RevenueChartCard({
   testID,
   ...frame
 }: RevenueChartCardProps) {
+  const { locale: chartLocale, messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
   const theme = useTheme();
   const palette = useChartCardSurfacePalette(frame.style);
   const tone = useMemo(() => revenueSeriesTone(theme), [theme]);
@@ -70,14 +73,14 @@ export function RevenueChartCard({
   const previousAnim = useChartProgress(previous);
 
   const label =
-    accessibilityLabel ?? chartAccessibilityLabel(frame.title ?? 'Revenue', frame.currentLabel, frame.previousLabel);
+    accessibilityLabel ?? chartAccessibilityLabel(frame.title ?? chartText.titles.revenue, frame.currentLabel, frame.previousLabel, chartText);
 
   return (
     <ChartCardFrame
       {...frame}
       data={data}
-      defaultTitle="Revenue"
-      defaultFormatValue={defaultFormatValue}
+      defaultTitle={chartText.titles.revenue}
+      defaultFormatValue={(value: number) => formatCurrency(value, 'USD', chartLocale)}
       seriesColor={stroke}
       comparisonColor={comparisonStroke}
       activeIndex={activeIndex}