@lotics/ui 5.2.0 → 5.3.0

package/AGENTS.md

@@ -13,8 +13,8 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
 - RN-Web only: `View`/`ScrollView` from `react-native`, the `Text` primitive (no raw
   `div`/`span`, no raw `fontSize`/`fontWeight`); styles are RN objects.
 - i18n: most components are string-free; the few that emit their own user-facing strings take
-  a `labels` prop (`DateRangeFilterField`, `Pagination`, `SortHeader`/`Table.sortLabels`) —
-  localize there.
+  a `labels` prop (`DateRangeFilterField`, `Pagination`, `SortHeader`/`Table.sortLabels`,
+  `RemainderMeter`) — localize there.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/remainder_meter.tsx

@@ -2,6 +2,26 @@ import { StyleSheet, View, type DimensionValue } from "react-native";
 import { colors, solid } from "./colors";
 import { Text } from "./text";
 
+/**
+ * Override the meter's captions for localization. Each key is optional and
+ * falls back to English (mirrors `PaginationLabels` / `DateRangeFilterField`).
+ */
+export interface RemainderMeterLabels {
+  /** The left caption. Default: `{allocated} of {total} applied`. */
+  applied?: (allocated: string, total: string) => string;
+  /** UNDER state (a remainder still to place). Default: `{remainder} unapplied`. */
+  remaining?: (remainder: string) => string;
+  /** OVER state (over-allocated). Default: `Over by {amount}`. */
+  over?: (amount: string) => string;
+  /** EXACT state. Default: `Fully applied`. */
+  exact?: string;
+}
+
+const defaultApplied = (allocated: string, total: string) => `${allocated} of ${total} applied`;
+const defaultRemaining = (remainder: string) => `${remainder} unapplied`;
+const defaultOver = (amount: string) => `Over by ${amount}`;
+const DEFAULT_EXACT = "Fully applied";
+
 export interface RemainderMeterProps {
   /** The source amount being distributed — the payment, the available stock. */
   total: number;
@@ -9,6 +29,8 @@ export interface RemainderMeterProps {
   allocated: number;
   /** Format amounts (money / units). Defaults to a plain locale string. */
   format?: (n: number) => string;
+  /** Localize the captions; each key falls back to English. */
+  labels?: RemainderMeterLabels;
 }
 
 /**
@@ -20,17 +42,21 @@ export interface RemainderMeterProps {
  * distribution, budgeting.
  */
 export function RemainderMeter(props: RemainderMeterProps) {
-  const { total, allocated, format = (n) => n.toLocaleString() } = props;
+  const { total, allocated, format = (n) => n.toLocaleString(), labels } = props;
   const remainder = total - allocated;
   const state = remainder > 0 ? "under" : remainder < 0 ? "over" : "exact";
   const pct: DimensionValue = `${total <= 0 ? 0 : Math.min(100, (allocated / total) * 100)}%`;
   const barColor = state === "over" ? solid("red") : state === "exact" ? solid("emerald") : solid("blue");
   const right =
-    state === "exact" ? "Fully applied" : state === "over" ? `Over by ${format(-remainder)}` : `${format(remainder)} unapplied`;
+    state === "exact"
+      ? (labels?.exact ?? DEFAULT_EXACT)
+      : state === "over"
+        ? (labels?.over ?? defaultOver)(format(-remainder))
+        : (labels?.remaining ?? defaultRemaining)(format(remainder));
   return (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
-        <Text size="sm" color="muted" style={{ flex: 1 }}>{`${format(allocated)} of ${format(total)} applied`}</Text>
+        <Text size="sm" color="muted" style={{ flex: 1 }}>{(labels?.applied ?? defaultApplied)(format(allocated), format(total))}</Text>
         <Text size="sm" weight="medium" tabular color={state === "over" ? "danger" : state === "exact" ? "success" : "default"}>
           {right}
         </Text>