@oxy.so/bloom 4.31.0 → 4.33.0

package/lib/typescript/module/provider/types.d.ts

@@ -14,5 +14,11 @@ 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;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/module/provider/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/provider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/provider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,UAAU,CAAC;IACnF,QAAQ,EAAE,SAAS,CAAC;IACpB,8EAA8E;IAC9E,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC;;;;OAIG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wFAAwF;IACxF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.31.0",
+  "version": "4.33.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
@@ -79,6 +79,20 @@
         "default": "./lib/commonjs/image-resolver/index.js"
       }
     },
+    "./locale": {
+      "react-native": {
+        "types": "./lib/typescript/module/locale/index.d.ts",
+        "default": "./src/locale/index.ts"
+      },
+      "import": {
+        "types": "./lib/typescript/module/locale/index.d.ts",
+        "default": "./lib/module/locale/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/locale/index.d.ts",
+        "default": "./lib/commonjs/locale/index.js"
+      }
+    },
     "./image-aspect-ratio-cache": {
       "react-native": {
         "types": "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts",
@@ -3452,6 +3466,9 @@
       "image-resolver": [
         "./lib/typescript/module/image-resolver/index.d.ts"
       ],
+      "locale": [
+        "./lib/typescript/module/locale/index.d.ts"
+      ],
       "image-aspect-ratio-cache": [
         "./lib/typescript/module/image-aspect-ratio-cache/index.d.ts"
       ],

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/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,8 +22,15 @@ 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, CalendarProps, DateRange, RangeCalendarProps } from './types';
+import type {
+  CalendarConstraintProps,
+  CalendarLabels,
+  CalendarProps,
+  DateRange,
+  RangeCalendarProps,
+} from './types';
 
 /**
  * `Calendar` (one day) and `RangeCalendar` (a span of days): month panels
@@ -51,6 +59,7 @@ interface CalendarFrameProps extends CalendarConstraintProps {
   /** The day under the pointer, or under keyboard focus. */
   onPreviewDay?: (date: Date | null) => void;
   accessibilityLabel?: string;
+  labels?: CalendarLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -66,12 +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));
@@ -194,6 +207,8 @@ function CalendarFrame({
           onKeyDown={onKeyDown}
           registerNode={registerNode}
           accessibilityLabel={accessibilityLabel}
+          previousLabel={previousLabel}
+          nextLabel={nextLabel}
           testID={testID ? `${testID}-month-${index}` : undefined}
         />
       ))}

package/src/date-picker/CalendarMonth.tsx

@@ -281,6 +281,9 @@ export interface CalendarMonthProps {
   onKeyDown: (key: string, preventDefault: () => void) => void;
   registerNode: (key: string, node: View | null) => void;
   accessibilityLabel?: string;
+  /** The chevrons' names, already localised by the calendar. */
+  previousLabel: string;
+  nextLabel: string;
   testID?: string;
 }
 
@@ -308,6 +311,8 @@ export function CalendarMonth({
   onKeyDown,
   registerNode,
   accessibilityLabel,
+  previousLabel,
+  nextLabel,
   testID,
 }: CalendarMonthProps) {
   const title = formatMonthTitle(month, locale);
@@ -339,7 +344,7 @@ export function CalendarMonth({
         {onPrevious ? (
           <NavButton
             direction="left"
-            label="Previous month"
+            label={previousLabel}
             onPress={onPrevious}
             disabled={previousDisabled}
             palette={palette}
@@ -356,7 +361,7 @@ export function CalendarMonth({
         {onNext ? (
           <NavButton
             direction="right"
-            label="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,9 @@ export function DatePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date',
-  accessibilityLabel = 'Date',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
+  labels,
   disabled,
   open: openProp,
   defaultOpen = false,
@@ -37,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,
@@ -91,6 +97,7 @@ export function DatePicker({
           weekStartsOn={weekStartsOn}
           locale={locale}
           accessibilityLabel={accessibilityLabel}
+          labels={labels}
           testID={testID ? `${testID}-calendar` : undefined}
         />
         <View
@@ -126,6 +133,8 @@ export function DatePicker({
               setOpenState(false);
             }}
             applyDisabled={!pending}
+            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';
@@ -85,9 +87,10 @@ export function DateRangePicker({
   value,
   defaultValue = null,
   onChange,
-  placeholder = 'Select date range',
-  accessibilityLabel = 'Date range',
+  placeholder: placeholderProp,
+  accessibilityLabel: accessibilityLabelProp,
   quickSelect = true,
+  labels,
   disabled,
   open: openProp,
   defaultOpen = false,
@@ -96,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,
@@ -154,8 +160,8 @@ export function DateRangePicker({
             <View style={{ width: 118, gap: 6 }}>
               {presets.map((preset) => (
                 <PresetRow
-                  key={preset.label}
-                  label={preset.label}
+                  key={preset.key}
+                  label={labels?.presets?.[preset.key] ?? messages.presets[preset.key]}
                   active={isSameRange(pending, preset.range)}
                   onPress={() => choose(preset.range)}
                   palette={palette}
@@ -183,6 +189,7 @@ export function DateRangePicker({
             weekStartsOn={weekStartsOn}
             locale={locale}
             accessibilityLabel={accessibilityLabel}
+            labels={labels}
             testID={testID ? `${testID}-calendar` : undefined}
           />
           <View
@@ -206,7 +213,7 @@ export function DateRangePicker({
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                       <DateChipInput
                         date={pending.start}
-                        label="Start date"
+                        label={labels?.startDate ?? messages.startDate}
                         palette={palette}
                         onCommit={(start) =>
                           setPending({ start, end: start > pending.end ? start : pending.end })
@@ -215,7 +222,7 @@ export function DateRangePicker({
                       <Text style={{ ...BODY, color: palette.secondaryText }}>-</Text>
                       <DateChipInput
                         date={pending.end}
-                        label="End date"
+                        label={labels?.endDate ?? messages.endDate}
                         palette={palette}
                         onCommit={(end) =>
                           setPending({ start: end < pending.start ? end : pending.start, end })
@@ -234,7 +241,7 @@ export function DateRangePicker({
                         }}
                       >
                         <Text style={{ ...BODY, color: palette.secondaryText }}>
-                          {days} day{days === 1 ? '' : 's'} selected
+                          {(labels?.daysSelected ?? messages.daysSelected)(days)}
                         </Text>
                       </View>
                     ) : null}
@@ -252,6 +259,8 @@ export function DateRangePicker({
                 setOpenState(false);
               }}
               applyDisabled={!pending}
+              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 = (
@@ -469,6 +475,7 @@ export function MeetingScheduler({
         weekStartsOn={weekStartsOn}
         locale={locale}
         accessibilityLabel={accessibilityLabel}
+        labels={labels}
         testID={testID ? `${testID}-calendar` : undefined}
       />
       <View
@@ -504,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

@@ -99,20 +99,24 @@ export function PickerActions({
   onCancel,
   onApply,
   applyDisabled,
+  cancelLabel,
+  applyLabel,
   testID,
 }: {
   onCancel: () => void;
   onApply: () => void;
   applyDisabled: boolean;
+  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">
-        Cancel
+        {cancelLabel}
       </Button>
       <Button onPress={onApply} disabled={applyDisabled} testID={testID ? `${testID}-apply` : undefined}>
-        Apply
+        {applyLabel}
       </Button>
     </View>
   );

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

@@ -10,7 +10,8 @@
  * internal state. The time of day on an input is ignored.
  */
 
-import type { DateRange, WeekStart } from './types';
+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,20 +327,22 @@ export function clampDate(date: Date, { minDate, maxDate }: DateConstraints): Da
   return startOfDay(date);
 }
 
-/** Quick-select presets, relative to `now`. */
-export function quickSelectPresets(now: Date = today()): { label: string; range: DateRange }[] {
+/** Quick-select presets, relative to `now`. Their names are `DatePickerMessages.presets`. */
+export function quickSelectPresets(
+  now: Date = today(),
+): { 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 [
-    { label: 'Today', range: { start: now, end: now } },
-    { label: 'Yesterday', range: { start: yesterday, end: yesterday } },
-    { label: 'Last week', range: { start: addDays(now, -7), end: yesterday } },
-    { label: 'This month', range: { start: startOfMonth(now), end: endOfMonth(now) } },
-    { label: 'Last month', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
-    { label: 'This year', range: { start: startOfYear(now), end: endOfYear(now) } },
-    { label: 'Last year', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
-    { 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 } },
   ];
 }
 

package/src/date-picker/index.ts

@@ -8,10 +8,14 @@ export { TimeField } from './TimeField';
 
 export type {
   CalendarConstraintProps,
+  CalendarLabels,
   CalendarProps,
+  DatePickerLabels,
   DatePickerProps,
   DateRange,
+  DateRangePickerLabels,
   DateRangePickerProps,
+  DateRangePreset,
   HourFormat,
   MeetingSchedulerDetails,
   MeetingSchedulerHost,