@oxy.so/bloom 5.0.0 → 5.1.1

package/src/delivery-slot/messages.ts

@@ -0,0 +1,160 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { DeliveryTier } from './types';
+
+/**
+ * Every fixed string the delivery-slot family draws or announces, in each
+ * Bloom language. A caller's `label`, `dayLabel`, `emptyTitle`,
+ * `emptyDescription`, `tierLabels`, `soldOutLabel` and the ASAP option's
+ * `label` still win.
+ */
+export interface DeliverySlotMessages {
+  tiers: Record<DeliveryTier, string>;
+  /** What a taken window says. */
+  soldOut: string;
+  /** The option that belongs to no day. */
+  asap: string;
+  /** The field's own name, which is also the radio group's. */
+  field: string;
+  /** Names the day strip. */
+  day: string;
+  emptyTitle: string;
+  emptyDescription: string;
+}
+
+export const DELIVERY_SLOT_MESSAGES: MessageCatalog<DeliverySlotMessages> = {
+  en: {
+    tiers: { standard: 'Standard', express: 'Express' },
+    soldOut: 'Sold out',
+    asap: 'As soon as possible',
+    field: 'Delivery time',
+    day: 'Day',
+    emptyTitle: 'No windows left',
+    emptyDescription: 'Pick another day, or take the next courier.',
+  },
+  es: {
+    tiers: { standard: 'Estándar', express: 'Exprés' },
+    soldOut: 'Agotado',
+    asap: 'Lo antes posible',
+    field: 'Hora de entrega',
+    day: 'Día',
+    emptyTitle: 'No quedan franjas',
+    emptyDescription: 'Elige otro día o el próximo repartidor disponible.',
+  },
+  ca: {
+    tiers: { standard: 'Estàndard', express: 'Exprés' },
+    soldOut: 'Esgotat',
+    asap: 'Com més aviat millor',
+    field: "Hora d'entrega",
+    day: 'Dia',
+    emptyTitle: 'No queden franges',
+    emptyDescription: 'Tria un altre dia o el proper repartidor disponible.',
+  },
+  de: {
+    tiers: { standard: 'Standard', express: 'Express' },
+    soldOut: 'Ausgebucht',
+    asap: 'So schnell wie möglich',
+    field: 'Lieferzeit',
+    day: 'Tag',
+    emptyTitle: 'Keine Zeitfenster mehr frei',
+    emptyDescription: 'Wähle einen anderen Tag oder den nächsten verfügbaren Kurier.',
+  },
+  fr: {
+    tiers: { standard: 'Standard', express: 'Express' },
+    soldOut: 'Complet',
+    asap: 'Dès que possible',
+    field: 'Heure de livraison',
+    day: 'Jour',
+    emptyTitle: 'Plus aucun créneau',
+    emptyDescription: 'Choisissez un autre jour ou le prochain coursier disponible.',
+  },
+  it: {
+    tiers: { standard: 'Standard', express: 'Espresso' },
+    soldOut: 'Esaurito',
+    asap: 'Il prima possibile',
+    field: 'Orario di consegna',
+    day: 'Giorno',
+    emptyTitle: 'Nessuna fascia disponibile',
+    emptyDescription: 'Scegli un altro giorno o il prossimo corriere disponibile.',
+  },
+  pt: {
+    tiers: { standard: 'Padrão', express: 'Expressa' },
+    soldOut: 'Esgotado',
+    asap: 'O mais rápido possível',
+    field: 'Horário de entrega',
+    day: 'Dia',
+    emptyTitle: 'Não há mais horários',
+    emptyDescription: 'Escolha outro dia ou o próximo entregador disponível.',
+  },
+  ru: {
+    tiers: { standard: 'Обычная', express: 'Экспресс' },
+    soldOut: 'Мест нет',
+    asap: 'Как можно скорее',
+    field: 'Время доставки',
+    day: 'День',
+    emptyTitle: 'Свободных окон нет',
+    emptyDescription: 'Выберите другой день или ближайшего курьера.',
+  },
+  tr: {
+    tiers: { standard: 'Standart', express: 'Ekspres' },
+    soldOut: 'Doldu',
+    asap: 'En kısa sürede',
+    field: 'Teslimat zamanı',
+    day: 'Gün',
+    emptyTitle: 'Boş zaman aralığı kalmadı',
+    emptyDescription: 'Başka bir gün seçin ya da ilk uygun kuryeyi bekleyin.',
+  },
+  ja: {
+    tiers: { standard: '通常配送', express: '速達' },
+    soldOut: '受付終了',
+    asap: 'できるだけ早く',
+    field: '配達時間',
+    day: '日付',
+    emptyTitle: '空いている時間帯がありません',
+    emptyDescription: '別の日を選ぶか、次の配達員をお待ちください。',
+  },
+  zh: {
+    tiers: { standard: '标准配送', express: '极速配送' },
+    soldOut: '已约满',
+    asap: '尽快送达',
+    field: '配送时间',
+    day: '日期',
+    emptyTitle: '没有可选时段了',
+    emptyDescription: '请换一天，或选择下一位骑手。',
+  },
+  ar: {
+    tiers: { standard: 'عادي', express: 'سريع' },
+    soldOut: 'نفدت الأماكن',
+    asap: 'في أقرب وقت ممكن',
+    field: 'وقت التوصيل',
+    day: 'اليوم',
+    emptyTitle: 'لا توجد فترات متاحة',
+    emptyDescription: 'اختر يومًا آخر، أو أقرب مندوب متاح.',
+  },
+  hi: {
+    tiers: { standard: 'सामान्य', express: 'एक्सप्रेस' },
+    soldOut: 'भर गया',
+    asap: 'जितनी जल्दी हो सके',
+    field: 'डिलीवरी का समय',
+    day: 'दिन',
+    emptyTitle: 'कोई स्लॉट नहीं बचा',
+    emptyDescription: 'कोई और दिन चुनें, या अगला उपलब्ध कूरियर लें।',
+  },
+  bn: {
+    tiers: { standard: 'সাধারণ', express: 'এক্সপ্রেস' },
+    soldOut: 'পূর্ণ',
+    asap: 'যত তাড়াতাড়ি সম্ভব',
+    field: 'ডেলিভারির সময়',
+    day: 'দিন',
+    emptyTitle: 'কোনো স্লট বাকি নেই',
+    emptyDescription: 'অন্য একটি দিন বেছে নিন, বা পরবর্তী কুরিয়ার নিন।',
+  },
+  id: {
+    tiers: { standard: 'Reguler', express: 'Ekspres' },
+    soldOut: 'Habis',
+    asap: 'Secepatnya',
+    field: 'Waktu pengantaran',
+    day: 'Hari',
+    emptyTitle: 'Tidak ada slot tersisa',
+    emptyDescription: 'Pilih hari lain, atau ambil kurir berikutnya.',
+  },
+};

package/src/delivery-slot/shared.ts

@@ -12,7 +12,8 @@
  */
 import { hairlineOn, surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
-import { DELIVERY_DETAIL_SEPARATOR, DELIVERY_SOLD_OUT_LABEL, DELIVERY_TIER_LABELS } from './constants';
+import { DELIVERY_DETAIL_SEPARATOR } from './constants';
+import { DELIVERY_SLOT_MESSAGES, type DeliverySlotMessages } from './messages';
 import type { DeliveryTier, DeliveryWindow } from './types';
 
 export interface DeliverySlotPaint extends SurfaceTextPaint {
@@ -51,10 +52,11 @@ export function joinDeliveryParts(
 export function windowDetail(
   window: DeliveryWindow,
   tierLabels: Partial<Record<DeliveryTier, string>> = {},
-  soldOutLabel: string = DELIVERY_SOLD_OUT_LABEL,
+  soldOutLabel?: string,
+  messages: DeliverySlotMessages = DELIVERY_SLOT_MESSAGES.en,
 ): string | undefined {
-  if (window.soldOut) return soldOutLabel;
-  const words = { ...DELIVERY_TIER_LABELS, ...tierLabels };
+  if (window.soldOut) return soldOutLabel ?? messages.soldOut;
+  const words = { ...messages.tiers, ...tierLabels };
   return joinDeliveryParts([words[window.tier ?? 'standard'], window.capacity, window.note]);
 }
 
@@ -63,10 +65,11 @@ export function windowName(
   window: DeliveryWindow,
   tierLabels?: Partial<Record<DeliveryTier, string>>,
   soldOutLabel?: string,
+  messages: DeliverySlotMessages = DELIVERY_SLOT_MESSAGES.en,
 ): string {
   return (
     window.accessibilityLabel ??
-    joinDeliveryParts([window.label, windowDetail(window, tierLabels, soldOutLabel), window.price]) ??
+    joinDeliveryParts([window.label, windowDetail(window, tierLabels, soldOutLabel, messages), window.price]) ??
     window.label
   );
 }

package/src/earnings/EarningsBreakdown.tsx

@@ -1,11 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { useMessages } from '../locale/messages';
 import { PriceSummary } from '../price-breakdown';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { EARNINGS_LABELS } from './constants';
+import { EARNINGS_MESSAGES } from './messages';
 import { resolveEarningsPaint } from './shared';
 import type { EarningsBreakdownProps } from './types';
 
@@ -38,10 +39,11 @@ function EarningsBreakdownComponent({
   style,
   testID,
 }: EarningsBreakdownProps) {
+  const { messages } = useMessages(EARNINGS_MESSAGES);
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
-  const labels = useMemo(() => ({ ...EARNINGS_LABELS, ...labelOverrides }), [labelOverrides]);
+  const labels = useMemo(() => ({ ...messages, ...labelOverrides }), [messages, labelOverrides]);
   const heading = title === undefined ? labels.breakdown : title;
 
   return (

package/src/earnings/EarningsPayoutRow.tsx

@@ -4,11 +4,13 @@ import { View, type TextStyle } from 'react-native';
 import { Badge } from '../badge';
 import { RiBankCardLine } from '../icons/remix/RiBankCardLine';
 import { Item } from '../item';
+import { useMessages } from '../locale/messages';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { EARNINGS_GEOMETRY, EARNINGS_LABELS, EARNINGS_PAYOUT_TONE } from './constants';
+import { EARNINGS_GEOMETRY, EARNINGS_PAYOUT_TONE } from './constants';
+import { EARNINGS_MESSAGES } from './messages';
 import { joinEarningsName, resolveEarningsPaint } from './shared';
 import type { EarningsPayoutRowProps } from './types';
 
@@ -43,16 +45,17 @@ function EarningsPayoutRowComponent({
   style,
   testID,
 }: EarningsPayoutRowProps) {
+  const { messages } = useMessages(EARNINGS_MESSAGES);
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
   const labels = useMemo(
     () => ({
-      ...EARNINGS_LABELS,
+      ...messages,
       ...labelOverrides,
-      payoutState: { ...EARNINGS_LABELS.payoutState, ...labelOverrides?.payoutState },
+      payoutState: { ...messages.payoutState, ...labelOverrides?.payoutState },
     }),
-    [labelOverrides],
+    [messages, labelOverrides],
   );
 
   const state = payout.state ?? 'scheduled';

package/src/earnings/EarningsSummary.tsx

@@ -4,10 +4,12 @@ import { StyleSheet, View } from 'react-native';
 import { EarningsChartCard } from '../chart-cards';
 import { useContainerWidth } from '../hooks/use-container-width';
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useMessages } from '../locale/messages';
 import { SurfaceLevelProvider, useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { EARNINGS_GEOMETRY, EARNINGS_LABELS } from './constants';
+import { EARNINGS_GEOMETRY } from './constants';
+import { EARNINGS_MESSAGES } from './messages';
 import { EarningsBreakdown } from './EarningsBreakdown';
 import { EarningsPayoutRow } from './EarningsPayoutRow';
 import {
@@ -89,20 +91,22 @@ function EarningsSummaryComponent({
   breakdown,
   stats,
   labels: labelOverrides,
-  accessibilityLabel = 'Earnings',
+  accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: EarningsSummaryProps) {
+  const { messages } = useMessages(EARNINGS_MESSAGES);
+  const accessibilityLabel = accessibilityLabelProp ?? messages.earnings;
   const theme = useTheme();
   const surface = useSurfaceFill();
   const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
   const labels = useMemo(
     () => ({
-      ...EARNINGS_LABELS,
+      ...messages,
       ...labelOverrides,
-      payoutState: { ...EARNINGS_LABELS.payoutState, ...labelOverrides?.payoutState },
+      payoutState: { ...messages.payoutState, ...labelOverrides?.payoutState },
     }),
-    [labelOverrides],
+    [messages, labelOverrides],
   );
 
   const [periodId, setPeriodId] = useControllableState<string>({
@@ -114,13 +118,20 @@ function EarningsSummaryComponent({
 
   // The chart's active bar is OWNED here: the headline has to be able to say
   // which amount it is showing, and only this component knows the strings.
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [selection, setSelection] = useState<{ period: string | undefined; index: number | null } | null>(null);
+  const currentPeriod = current?.id;
+  // A controlled prop change must clear selection before the new headline paints.
+  if (selection && selection.period !== currentPeriod) setSelection(null);
+  const activeIndex = selection?.period === currentPeriod ? selection?.index ?? null : null;
+  const setActiveIndex = useCallback((index: number | null) => {
+    setSelection({ period: currentPeriod, index });
+  }, [currentPeriod]);
   const changePeriod = useCallback(
     (id: string) => {
       setActiveIndex(null);
       setPeriodId(id);
     },
-    [setPeriodId],
+    [setPeriodId, setActiveIndex],
   );
 
   const { width, onLayout } = useContainerWidth();

package/src/earnings/constants.ts

@@ -1,24 +1,22 @@
 import { RADIUS } from '../design-tokens/scales';
 import type { AccentTone } from '../theme/accent-colors';
+import { EARNINGS_MESSAGES } from './messages';
 import type { EarningsLabels, EarningsPayoutState } from './types';
 
-/** Every default word the family draws. */
+/**
+ * Every default word the family draws, in English. The components speak
+ * `EARNINGS_MESSAGES` in the resolved locale.
+ */
 export const EARNINGS_LABELS: Required<Omit<EarningsLabels, 'payoutState'>> & {
   payoutState: Record<EarningsPayoutState, string>;
 } = {
-  earned: 'Earned',
-  period: 'Earnings period',
-  breakdown: 'What it came from',
-  payout: 'Next payout',
-  payoutState: {
-    scheduled: 'Scheduled',
-    processing: 'On its way',
-    paid: 'Paid',
-    held: 'On hold',
-    failed: 'Failed',
-  },
-  chart: (label: string) => `${label} earnings, by period`,
-  empty: 'Nothing earned yet',
+  earned: EARNINGS_MESSAGES.en.earned,
+  period: EARNINGS_MESSAGES.en.period,
+  breakdown: EARNINGS_MESSAGES.en.breakdown,
+  payout: EARNINGS_MESSAGES.en.payout,
+  payoutState: EARNINGS_MESSAGES.en.payoutState,
+  chart: EARNINGS_MESSAGES.en.chart,
+  empty: EARNINGS_MESSAGES.en.empty,
 };
 
 /**

package/src/earnings/messages.ts

@@ -0,0 +1,178 @@
+import type { MessageCatalog } from '../locale/messages';
+import type { EarningsPayoutState } from './types';
+
+/**
+ * Every fixed string the earnings family draws or announces, in each Bloom
+ * language. Amounts arrive formatted. A caller's `labels`, `title` and
+ * `accessibilityLabel` still win.
+ */
+export interface EarningsMessages {
+  /** Over the figure. */
+  earned: string;
+  /** Names the period switch. */
+  period: string;
+  /** Over the breakdown. */
+  breakdown: string;
+  /** Over the payout row. */
+  payout: string;
+  payoutState: Record<EarningsPayoutState, string>;
+  /** Names the chart: "This week earnings, by period". */
+  chart: (label: string) => string;
+  /** The empty period's line. */
+  empty: string;
+  /** Names the summary panel. */
+  earnings: string;
+}
+
+export const EARNINGS_MESSAGES: MessageCatalog<EarningsMessages> = {
+  en: {
+    earned: 'Earned',
+    period: 'Earnings period',
+    breakdown: 'What it came from',
+    payout: 'Next payout',
+    payoutState: { scheduled: 'Scheduled', processing: 'On its way', paid: 'Paid', held: 'On hold', failed: 'Failed' },
+    chart: (label) => `${label} earnings, by period`,
+    empty: 'Nothing earned yet',
+    earnings: 'Earnings',
+  },
+  es: {
+    earned: 'Ganado',
+    period: 'Periodo de ganancias',
+    breakdown: 'De dónde viene',
+    payout: 'Próximo pago',
+    payoutState: { scheduled: 'Programado', processing: 'En camino', paid: 'Pagado', held: 'Retenido', failed: 'Fallido' },
+    chart: (label) => `Ganancias: ${label}, por periodo`,
+    empty: 'Aún no has ganado nada',
+    earnings: 'Ganancias',
+  },
+  ca: {
+    earned: 'Guanyat',
+    period: 'Període de guanys',
+    breakdown: "D'on ve",
+    payout: 'Proper pagament',
+    payoutState: { scheduled: 'Programat', processing: 'En camí', paid: 'Pagat', held: 'Retingut', failed: 'Fallit' },
+    chart: (label) => `Guanys: ${label}, per període`,
+    empty: 'Encara no has guanyat res',
+    earnings: 'Guanys',
+  },
+  de: {
+    earned: 'Verdient',
+    period: 'Zeitraum der Einnahmen',
+    breakdown: 'Woher es kommt',
+    payout: 'Nächste Auszahlung',
+    payoutState: { scheduled: 'Geplant', processing: 'Unterwegs', paid: 'Ausgezahlt', held: 'Zurückgehalten', failed: 'Fehlgeschlagen' },
+    chart: (label) => `Einnahmen ${label}, nach Zeitraum`,
+    empty: 'Noch nichts verdient',
+    earnings: 'Einnahmen',
+  },
+  fr: {
+    earned: 'Gagné',
+    period: 'Période de revenus',
+    breakdown: "D'où ça vient",
+    payout: 'Prochain versement',
+    payoutState: { scheduled: 'Programmé', processing: 'En route', paid: 'Versé', held: 'En attente', failed: 'Échec' },
+    chart: (label) => `Revenus ${label}, par période`,
+    empty: "Rien de gagné pour l'instant",
+    earnings: 'Revenus',
+  },
+  it: {
+    earned: 'Guadagnato',
+    period: 'Periodo dei guadagni',
+    breakdown: 'Da dove arriva',
+    payout: 'Prossimo pagamento',
+    payoutState: { scheduled: 'Programmato', processing: 'In arrivo', paid: 'Pagato', held: 'Sospeso', failed: 'Non riuscito' },
+    chart: (label) => `Guadagni ${label}, per periodo`,
+    empty: 'Ancora nessun guadagno',
+    earnings: 'Guadagni',
+  },
+  pt: {
+    earned: 'Ganho',
+    period: 'Período de ganhos',
+    breakdown: 'De onde veio',
+    payout: 'Próximo repasse',
+    payoutState: { scheduled: 'Agendado', processing: 'A caminho', paid: 'Pago', held: 'Retido', failed: 'Falhou' },
+    chart: (label) => `Ganhos ${label}, por período`,
+    empty: 'Nenhum ganho ainda',
+    earnings: 'Ganhos',
+  },
+  ru: {
+    earned: 'Заработано',
+    period: 'Период заработка',
+    breakdown: 'Из чего складывается',
+    payout: 'Следующая выплата',
+    payoutState: { scheduled: 'Запланирована', processing: 'В пути', paid: 'Выплачено', held: 'Задержана', failed: 'Не удалась' },
+    chart: (label) => `Заработок: ${label}, по периодам`,
+    empty: 'Пока ничего не заработано',
+    earnings: 'Заработок',
+  },
+  tr: {
+    earned: 'Kazanılan',
+    period: 'Kazanç dönemi',
+    breakdown: 'Nereden geldi',
+    payout: 'Sonraki ödeme',
+    payoutState: { scheduled: 'Planlandı', processing: 'Yolda', paid: 'Ödendi', held: 'Bekletiliyor', failed: 'Başarısız' },
+    chart: (label) => `${label} kazançları, döneme göre`,
+    empty: 'Henüz kazanç yok',
+    earnings: 'Kazançlar',
+  },
+  ja: {
+    earned: '収益',
+    period: '収益の期間',
+    breakdown: '内訳',
+    payout: '次回の支払い',
+    payoutState: { scheduled: '予定', processing: '送金中', paid: '支払い済み', held: '保留中', failed: '失敗' },
+    chart: (label) => `${label}の収益（期間別）`,
+    empty: 'まだ収益はありません',
+    earnings: '収益',
+  },
+  zh: {
+    earned: '已赚取',
+    period: '收入周期',
+    breakdown: '收入来源',
+    payout: '下次打款',
+    payoutState: { scheduled: '已安排', processing: '打款中', paid: '已支付', held: '已暂扣', failed: '失败' },
+    chart: (label) => `${label}收入（按周期）`,
+    empty: '还没有收入',
+    earnings: '收入',
+  },
+  ar: {
+    earned: 'الأرباح',
+    period: 'فترة الأرباح',
+    breakdown: 'مصدر الأرباح',
+    payout: 'الدفعة التالية',
+    payoutState: { scheduled: 'مجدولة', processing: 'في الطريق', paid: 'مدفوعة', held: 'معلّقة', failed: 'فشلت' },
+    chart: (label) => `أرباح ${label} حسب الفترة`,
+    empty: 'لا أرباح بعد',
+    earnings: 'الأرباح',
+  },
+  hi: {
+    earned: 'कमाई',
+    period: 'कमाई की अवधि',
+    breakdown: 'कहाँ से आई',
+    payout: 'अगला भुगतान',
+    payoutState: { scheduled: 'निर्धारित', processing: 'रास्ते में', paid: 'भुगतान हो गया', held: 'रोका गया', failed: 'विफल' },
+    chart: (label) => `${label} की कमाई, अवधि के अनुसार`,
+    empty: 'अभी तक कोई कमाई नहीं',
+    earnings: 'कमाई',
+  },
+  bn: {
+    earned: 'আয়',
+    period: 'আয়ের সময়কাল',
+    breakdown: 'কোথা থেকে এসেছে',
+    payout: 'পরবর্তী পেআউট',
+    payoutState: { scheduled: 'নির্ধারিত', processing: 'পথে আছে', paid: 'পরিশোধিত', held: 'আটকে আছে', failed: 'ব্যর্থ' },
+    chart: (label) => `${label}-এর আয়, সময়কাল অনুযায়ী`,
+    empty: 'এখনও কোনো আয় নেই',
+    earnings: 'আয়',
+  },
+  id: {
+    earned: 'Diperoleh',
+    period: 'Periode pendapatan',
+    breakdown: 'Sumbernya',
+    payout: 'Pencairan berikutnya',
+    payoutState: { scheduled: 'Terjadwal', processing: 'Dalam proses', paid: 'Dibayar', held: 'Ditahan', failed: 'Gagal' },
+    chart: (label) => `Pendapatan ${label}, per periode`,
+    empty: 'Belum ada pendapatan',
+    earnings: 'Pendapatan',
+  },
+};

package/src/earnings/types.ts

@@ -88,19 +88,19 @@ export interface EarningsPeriod {
 
 /** Every word the family speaks, in one prop. */
 export interface EarningsLabels {
-  /** Over the figure. Default `"Earned"`. */
+  /** Over the figure (`"Earned"` in English). */
   earned?: string;
-  /** Names the period switch. Default `"Earnings period"`. */
+  /** Names the period switch (`"Earnings period"` in English). */
   period?: string;
-  /** Over the breakdown. Default `"What it came from"`. */
+  /** Over the breakdown (`"What it came from"` in English). */
   breakdown?: string;
-  /** Over the payout row. Default `"Next payout"`. */
+  /** Over the payout row (`"Next payout"` in English). */
   payout?: string;
-  /** The payout states. Defaults `"Scheduled"`, `"On its way"`, `"Paid"`, `"On hold"`, `"Failed"`. */
+  /** The payout states. `"Scheduled"`, `"On its way"`, `"Paid"`, `"On hold"`, `"Failed"` in English. */
   payoutState?: Partial<Record<EarningsPayoutState, string>>;
-  /** Names the chart. Default `` (label) => `${label} earnings, by period` ``. */
+  /** Names the chart (`` (label) => `${label} earnings, by period` `` in English). */
   chart?: (label: string) => string;
-  /** The empty period's line. Default `"Nothing earned yet"`. */
+  /** The empty period's line (`"Nothing earned yet"` in English). */
   empty?: string;
 }
 
@@ -113,7 +113,7 @@ export interface EarningsBreakdownProps {
    * total and two totals on one panel is one too many.
    */
   total?: PriceTotal;
-  /** A heading over the list. Default `"What it came from"`. */
+  /** A heading over the list (`"What it came from"` in English). */
   title?: string;
   /** Hide the kinds behind a disclosure. Default `false`. */
   collapsible?: boolean;
@@ -129,7 +129,7 @@ export interface EarningsBreakdownProps {
 export interface EarningsPayoutRowProps {
   /** The payout. */
   payout: EarningsPayout;
-  /** The line over the date. Default `"Next payout"`. */
+  /** The line over the date (`"Next payout"` in English). */
   title?: string;
   /** Makes the row pressable — an app opens the payout's detail from here. */
   onPress?: () => void;
@@ -172,7 +172,7 @@ export interface EarningsSummaryProps {
   /** Draws the tiles. Default `true` when the period carries `stats`. */
   stats?: boolean;
   labels?: EarningsLabels;
-  /** Names the panel. Default `"Earnings"`. */
+  /** Names the panel (`"Earnings"` in English). */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;
   /** Derives `-chart`, `-stats`, `-breakdown`, `-payout`. */

package/src/field/Field.tsx

@@ -40,6 +40,7 @@ const FieldComponent = function Field({
   description,
   error,
   required = false,
+  requiredLabel,
   disabled = false,
   multiple = false,
   nativeID,
@@ -94,7 +95,7 @@ const FieldComponent = function Field({
         }
       >
         {label != null ? (
-          <Label nativeID={labelID} htmlFor={multiple ? null : base} required={required} disabled={disabled}>
+          <Label nativeID={labelID} htmlFor={multiple ? null : base} required={required} requiredLabel={requiredLabel} disabled={disabled}>
             {label}
           </Label>
         ) : null}

package/src/field/types.ts

@@ -14,6 +14,8 @@ export interface FieldProps {
   error?: string | null;
   /** Mark the field's label with a required asterisk. */
   required?: boolean;
+  /** Accessible name of the required marker; defaults to the current locale. */
+  requiredLabel?: string;
   /**
    * Disables the label/description styling AND, for a control that reads the
    * field context, the control itself.