@oxy.so/bloom 5.0.0 → 5.1.1

package/src/chart-cards/primitives/ChartCenterReadout.tsx

@@ -7,6 +7,7 @@ import { TABULAR } from './ChartHeader';
 import { FadeOnChange } from './FadeOnChange';
 import { formatNumber } from './format';
 import { useChartCardPalette } from './use-chart-palette';
+import { useBloomLocale } from '../../locale/context';
 
 export interface ChartCenterReadoutProps {
   value: number;
@@ -28,13 +29,15 @@ export interface ChartCenterReadoutProps {
  */
 export function ChartCenterReadout({
   value,
-  format = formatNumber,
+  format: formatProp,
   caption,
   fadeKey = 'rest',
   size = 'display',
   style,
   testID,
 }: ChartCenterReadoutProps) {
+  const locale = useBloomLocale();
+  const format = formatProp ?? ((value: number) => formatNumber(value, locale));
   const palette = useChartCardPalette();
   const display = useCountUpPrecise(value);
   return (

package/src/chart-cards/primitives/ChartHeader.tsx

@@ -9,6 +9,7 @@ import { FadeOnChange } from './FadeOnChange';
 import { formatNumber, type ChartDelta } from './format';
 import type { ChartRangeOption } from './use-chart-range';
 import { useChartCardPalette } from './use-chart-palette';
+import { useBloomLocale } from '../../locale/context';
 
 export const TABULAR: TextStyle = { fontVariant: ['tabular-nums'] };
 
@@ -47,7 +48,7 @@ export interface ChartHeadlineProps {
 export function ChartHeadline({
   label,
   value,
-  format = formatNumber,
+  format: formatProp,
   delta,
   hovering = false,
   fadeKey = 'rest',
@@ -55,6 +56,8 @@ export function ChartHeadline({
   style,
   testID,
 }: ChartHeadlineProps) {
+  const locale = useBloomLocale();
+  const format = formatProp ?? ((value: number) => formatNumber(value, locale));
   const palette = useChartCardPalette();
   const display = useCountUpPrecise(value ?? 0);
   const chip = delta

package/src/chart-cards/primitives/ChartRangePill.tsx

@@ -16,6 +16,8 @@ import { Text } from '../../typography';
 import type { ChartRangeOption } from './use-chart-range';
 import { useChartCardPalette } from './use-chart-palette';
 import { useWebTransition } from './use-web-transition';
+import { CHART_CARDS_MESSAGES } from '../messages';
+import { useMessages } from '../../locale/messages';
 
 const ICON = 16;
 /** `w-[188px]` on the period menu. */
@@ -97,10 +99,12 @@ export function ChartRangeSelect({
   ranges,
   value,
   onChange,
-  label = 'Change period',
+  label: labelProp,
   style,
   testID,
 }: ChartRangeSelectProps) {
+  const { messages: chartText } = useMessages(CHART_CARDS_MESSAGES);
+  const label = labelProp ?? chartText.changePeriod;
   const palette = useChartCardPalette();
   const [open, setOpen] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -130,7 +134,7 @@ export function ChartRangeSelect({
         </Pressable>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        label="Period"
+        label={chartText.period}
         side="bottom"
         align="end"
         minWidth={RANGE_MENU_WIDTH}

package/src/chart-cards/primitives/format.ts

@@ -1,38 +1,44 @@
 import type { ChartDeltaTone } from '../geometry';
 
+import {
+  formatCompactNumber,
+  formatInteger,
+  formatNumber as formatLocaleNumber,
+  formatPercent,
+  formatSignedPercent,
+} from '../../locale/format-number';
+
 /**
- * Number formatting shared by the chart cards. Pure and `Intl`-free, so it
- * formats identically on Hermes, JSC and every browser.
+ * Number formatting shared by the chart cards, in the reader's locale
+ * (`locale` is what the card resolved; `undefined` is the runtime's). They go
+ * through `locale/format-number.ts`, which uses the engine's
+ * `Intl.NumberFormat` — Hermes has it — and falls back to English grouping.
  */
 
-/** `1234567.8` → `"1,234,568"` — en-US grouping (`toLocaleString("en-US")`-equivalent) for whole numbers. */
-export function groupThousands(value: number): string {
-  const rounded = Math.round(value);
-  const digits = String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  return rounded < 0 ? `-${digits}` : digits;
+/** `1234567.8` → `"1,234,568"` (en), `"1.234.568"` (de) — a whole number with grouping. */
+export function groupThousands(value: number, locale?: string): string {
+  return formatInteger(value, locale);
 }
 
 /**
- * En-US grouping that keeps up to three fraction
- * digits (`48.8` → `"48.8"`, `12500` → `"12,500"`).
+ * Grouping that keeps up to three fraction digits (`48.8` → `"48.8"`,
+ * `12500` → `"12,500"`, `"12.500"` in German). A value that rounds to zero
+ * reads `0`, never `-0`.
  */
-export function formatNumber(value: number): string {
+export function formatNumber(value: number, locale?: string): string {
   if (!Number.isFinite(value)) return String(value);
-  const fixed = (Math.round(Math.abs(value) * 1000) / 1000).toString();
-  const [int = '0', frac] = fixed.split('.');
-  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-  const sign = value < 0 && Number(fixed) !== 0 ? '-' : '';
-  return frac ? `${sign}${grouped}.${frac}` : `${sign}${grouped}`;
+  const rounded = Math.round(value * 1000) / 1000;
+  return formatLocaleNumber(rounded === 0 ? 0 : rounded, locale);
 }
 
-/** Compact axis-tick format: `4.5K`, `13K`, or the rounded number under a thousand. */
-export function compactNumber(value: number): string {
-  return value >= 1000 ? `${Math.round(value / 100) / 10}K`.replace('.0K', 'K') : String(Math.round(value));
+/** Compact axis-tick format: `4.5K`, `13K` (en), `4,5 mil` (es); the rounded number under a thousand. */
+export function compactNumber(value: number, locale?: string): string {
+  return formatCompactNumber(value, locale);
 }
 
-/** `0.25` → `"25%"` — the 100% chart's axis. */
-export function percentTick(value: number): string {
-  return `${Math.round(value * 100)}%`;
+/** `0.25` → `"25%"` (en), `"25 %"` (fr), `"%25"` (tr) — the 100% chart's axis. */
+export function percentTick(value: number, locale?: string): string {
+  return formatPercent(value, locale);
 }
 
 export interface ChartDelta {
@@ -47,10 +53,16 @@ export interface ChartDelta {
  * (The dashboard revenue / orders cards compare two totals instead — that is
  * `describeDelta(current, previous)` in `geometry.ts`.)
  */
-export function describeDeltaRatio(delta: number): ChartDelta {
-  const pct = Math.round(Math.abs(delta) * 1000) / 10;
-  if (pct === 0) return { label: '0.0%', tone: 'neutral' };
-  return { label: `${delta > 0 ? '+' : '-'}${pct}%`, tone: delta > 0 ? 'positive' : 'negative' };
+export function describeDeltaRatio(delta: number, locale?: string): ChartDelta {
+  // Rounded to the tenth of a percent it is shown at, so the sign and the tone
+  // agree with the number on screen.
+  const rounded = Math.round(delta * 1000) / 1000;
+  // Zero keeps its tenth ("0.0%"); anything else shows a tenth only when it has one ("+5.2%", "-5%").
+  if (rounded === 0) return { label: formatPercent(0, locale, 1), tone: 'neutral' };
+  return {
+    label: formatSignedPercent(rounded, locale, { minimum: 0, maximum: 1 }),
+    tone: rounded > 0 ? 'positive' : 'negative',
+  };
 }
 
 /** Decimal places a value carries, capped at 2 — what the count-up must preserve. */

package/src/chat-composer/AttachmentMenu.tsx

@@ -1,217 +1,5 @@
-/**
- * The plus/paperclip menu.
- *
- * It is `Popover`, not a hand-rolled surface, and that one choice is the whole
- * platform story: Bloom's popover is already an anchored panel on a pointer and
- * a bottom sheet on a phone, so this family adds no platform fork of its own
- * and inherits the dismissal, stacking and focus behaviour those surfaces were
- * gated for.
- */
-import React from 'react';
-import { View, type DimensionValue } from 'react-native';
-
 import { Button } from '../button';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { attachmentMenuItems, resolveChatComposerPalette } from './shared';
-import type { AttachmentMenuItem, AttachmentMenuProps } from './types';
-import { useChatComposerWebCss } from './web-hooks';
-import { useMessages } from '../locale/messages';
-import { CHAT_COMPOSER_MESSAGES } from './messages';
-
-/** A 48px tinted disc with its label under it. */
-function GridCell({
-  item,
-  onPress,
-  width,
-  testID,
-}: {
-  item: AttachmentMenuItem;
-  onPress: () => void;
-  width: DimensionValue;
-  testID?: string;
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const tint = item.color ?? palette.accent;
-  const cell: WebCssStyle = {
-    width,
-    height: 'auto',
-    minHeight: 0,
-    minWidth: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-    alignItems: 'center',
-    gap: 6,
-    paddingTop: 8,
-    paddingBottom: 8,
-    borderRadius: 12,
-    opacity: item.disabled ? 0.45 : 1,
-    cursor: item.disabled ? 'auto' : 'pointer',
-  };
-  return (
-    <Button
-      appearance="plain"
-      tone="neutral"
-      accessibilityLabel={item.label}
-      disabled={item.disabled}
-      onPress={onPress}
-      style={cell}
-      testID={testID}>
-      <View style={{ alignItems: 'center', gap: 6 }}>
-      <View
-        style={{
-          width: 48,
-          height: 48,
-          borderRadius: 24,
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: palette.accentSoft,
-        }}>
-        <item.icon width={22} height={22} fill={tint} />
-      </View>
-      <Text variant="caption-1-regular" numberOfLines={1} style={{ color: palette.textSecondary }}>
-        {item.label}
-      </Text>
-      </View>
-    </Button>
-  );
-}
-
-/** A full-width row: glyph, label. */
-function ListRow({
-  item,
-  onPress,
-  testID,
-}: {
-  item: AttachmentMenuItem;
-  onPress: () => void;
-  testID?: string;
-}) {
-  const theme = useTheme();
-  const palette = resolveChatComposerPalette(theme);
-  const tint = item.color ?? palette.accent;
-  const row: WebCssStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-    minHeight: 40,
-    height: 'auto',
-    minWidth: 0,
-    width: '100%',
-    borderRadius: 10,
-    paddingLeft: 8,
-    paddingRight: 8,
-    paddingTop: 6,
-    paddingBottom: 6,
-    opacity: item.disabled ? 0.45 : 1,
-    cursor: item.disabled ? 'auto' : 'pointer',
-  };
-  return (
-    <Button
-      appearance="plain"
-      tone="neutral"
-      accessibilityLabel={item.label}
-      disabled={item.disabled}
-      onPress={onPress}
-      style={row}
-      testID={testID}>
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, width: '100%' }}>
-      <View
-        style={{
-          width: 32,
-          height: 32,
-          borderRadius: 16,
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: palette.accentSoft,
-        }}>
-        <item.icon width={18} height={18} fill={tint} />
-      </View>
-      <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
-        {item.label}
-      </Text>
-      </View>
-    </Button>
-  );
-}
-
-export function AttachmentMenu({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  items: itemsProp,
-  layout = 'grid',
-  columns = 4,
-  onSelect,
-  recent,
-  label: labelProp,
-  style,
-  testID,
-}: AttachmentMenuProps) {
-  useChatComposerWebCss();
-  const { messages } = useMessages(CHAT_COMPOSER_MESSAGES);
-  const localizedItems = React.useMemo(() => attachmentMenuItems(messages), [messages]);
-  const items = itemsProp ?? localizedItems;
-  const label = labelProp ?? messages.attach;
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
-  const isOpen = open ?? uncontrolledOpen;
-
-  const setOpen = (next: boolean) => {
-    if (open === undefined) setUncontrolledOpen(next);
-    onOpenChange?.(next);
-  };
-
-  // A percentage string is the only way to say "n per row" in a wrapping flex
-  // row that has to work on both platforms; Yoga and CSS agree on it.
-  const cellWidth: DimensionValue = `${100 / Math.max(1, columns)}%`;
+import { createAttachmentMenu } from './create-attachment-menu';
 
-  return (
-    <Popover open={isOpen} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
-      <PopoverContent
-        label={label}
-        side="top"
-        align="start"
-        minWidth={layout === 'grid' ? Math.max(264, columns * 72) : 220}
-        style={style}
-        testID={testID}>
-        {recent ? <View style={{ paddingBottom: 8 }}>{recent}</View> : null}
-        <View
-          style={
-            layout === 'grid'
-              ? { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start' }
-              : { flexDirection: 'column', gap: 2 }
-          }>
-          {items.map((item) =>
-            layout === 'grid' ? (
-              <GridCell
-                key={item.id}
-                item={item}
-                width={cellWidth}
-                onPress={() => {
-                  onSelect?.(item.id, item);
-                  setOpen(false);
-                }}
-                testID={testID ? `${testID}-${item.id}` : undefined}
-              />
-            ) : (
-              <ListRow
-                key={item.id}
-                item={item}
-                onPress={() => {
-                  onSelect?.(item.id, item);
-                  setOpen(false);
-                }}
-                testID={testID ? `${testID}-${item.id}` : undefined}
-              />
-            ),
-          )}
-        </View>
-      </PopoverContent>
-    </Popover>
-  );
-}
+export const AttachmentMenu = createAttachmentMenu({ Button, Popover, PopoverContent, PopoverTrigger });

package/src/chat-composer/AttachmentMenu.web.tsx

@@ -0,0 +1,5 @@
+import { Button } from '../button/index.web';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.web';
+import { createAttachmentMenu } from './create-attachment-menu';
+
+export const AttachmentMenu = createAttachmentMenu({ Button, Popover, PopoverContent, PopoverTrigger });