@lotics/ui 6.1.0 → 6.2.0

package/AGENTS.md

@@ -19,10 +19,11 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   redefine — or drift on — strings). Resolution is **prop → provider locale → English default**, so a
   per-instance `labels`/`clearLabel`/`selectAllLabel` still overrides for one-offs, and an un-wrapped
   app stays English. Wired so far: `Pagination`, `SortHeader`/`Table.sortLabels`, `OptionList`
-  (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`. Adding a string to a wired component's
-  `*Labels` forces both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a
-  silent English leak. Not yet on the provider (pass `labels` for now): `DateRangeFilterField`,
-  `RemainderMeter`, `ChangeReview`, calendar/gantt.
+  (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`, `Confidence`, `RemainderMeter`,
+  `ChangeReview`/`ChangeReviewActions`, and `DateRangeFilterField`/`DateFilter` (presets + footer +
+  time-segment a11y, one `dateRange` slice). Adding a string to a wired component's `*Labels` forces
+  both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a silent English
+  leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the file/preview/comment labels.
 
 ---
 

package/package.json

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

package/src/change_review.tsx

@@ -5,6 +5,7 @@ import { reviewCardStyle, reviewResolvedStyle } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Button } from "./button";
+import { useLoticsLocale } from "./locale";
 
 export type ChangeReviewItemStatus = "pending" | "accepted" | "rejected";
 
@@ -116,17 +117,18 @@ export function ChangeDiff({ before, after }: { before?: string; after: string }
  * `ReviewCard` reviews a SINGLE proposal, this is the BATCH engine.
  */
 export function ChangeReview<T>(props: ChangeReviewProps<T>) {
+  const loc = useLoticsLocale().changeReview;
   const status = props.status ?? "open";
   const perItem = props.onAcceptItem != null || props.onRejectItem != null;
   const total = props.items.length;
   const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
   const keptCount = props.items.filter((it, i) => statusFor(it, i) === "accepted").length;
-  const title = props.title ?? "Suggested edits";
+  const title = props.title ?? loc.title;
   const L = {
-    undo: "Undo",
-    applied: "Applied",
-    discarded: "Discarded",
-    keptCount: (kept: number, total: number) => `${kept} of ${total} kept`,
+    undo: loc.undo,
+    applied: loc.applied,
+    discarded: loc.discarded,
+    keptCount: loc.keptCount,
     ...props.labels,
   };
 
@@ -173,8 +175,8 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
                   <View key={props.getKey(item, i)} style={styles.itemCard}>
                     {props.renderItem(item, i)}
                     <View style={styles.itemActions}>
-                      <Button title={props.rejectLabel ?? "Drop"} color="muted" onPress={() => props.onRejectItem?.(i)} />
-                      <Button title={props.acceptLabel ?? "Keep"} color="secondary" onPress={() => props.onAcceptItem?.(i)} />
+                      <Button title={props.rejectLabel ?? loc.reject} color="muted" onPress={() => props.onRejectItem?.(i)} />
+                      <Button title={props.acceptLabel ?? loc.accept} color="secondary" onPress={() => props.onAcceptItem?.(i)} />
                     </View>
                   </View>
                 );
@@ -233,6 +235,7 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
  * inline wrapper provides the chrome); self-hides once `status` isn't open.
  */
 export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
+  const loc = useLoticsLocale().changeReview;
   if ((props.status ?? "open") !== "open") return null;
   const perItem = props.onAcceptItem != null;
   const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
@@ -243,12 +246,12 @@ export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
     });
   return (
     <View style={styles.actionsRow}>
-      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" onPress={acceptAll} /> : null}
+      {perItem ? <Button title={props.acceptAllLabel ?? loc.acceptAll} color="muted" onPress={acceptAll} /> : null}
       <View style={{ flex: 1 }} />
-      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" onPress={props.onDiscard} /> : null}
+      {props.onDiscard ? <Button title={props.discardLabel ?? loc.discard} color="muted" onPress={props.onDiscard} /> : null}
       {props.onApply ? (
         <Button
-          title={props.applyLabel ?? (perItem ? "Apply kept" : "Apply")}
+          title={props.applyLabel ?? (perItem ? loc.applyKept : loc.apply)}
           color="primary"
           disabled={perItem && keptCount === 0}
           onPress={props.onApply}

package/src/confidence.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, View } from "react-native";
 import { colors, solid, type ColorName } from "./colors";
 import { Text } from "./text";
+import { useLoticsLocale } from "./locale";
 
 export type ConfidenceLevel = "high" | "medium" | "low";
 
@@ -20,7 +21,6 @@ export interface ConfidenceProps {
   labels?: Partial<ConfidenceLabels>;
 }
 
-const DEFAULT_LABELS: ConfidenceLabels = { high: "High confidence", medium: "Medium confidence", low: "Low confidence" };
 const FILLED: Record<ConfidenceLevel, number> = { high: 3, medium: 2, low: 1 };
 // high emerald, medium amber, low zinc (unsure — not an error). One family per
 // level; the fill count AND the colour both carry it.
@@ -40,7 +40,7 @@ export function levelFromScore(score: number): ConfidenceLevel {
  */
 export function Confidence(props: ConfidenceProps) {
   const level = props.level ?? (props.score != null ? levelFromScore(props.score) : "medium");
-  const l = { ...DEFAULT_LABELS, ...props.labels };
+  const l = { ...useLoticsLocale().confidence, ...props.labels };
   const filled = FILLED[level];
   const fill = solid(COLOR[level]);
   return (

package/src/date_filter.tsx

@@ -11,6 +11,7 @@ import { useScreenSize } from "./use_screen_size";
 import { SegmentLabels } from "./date_segments";
 import { PresetId, PRESET_IDS, getPresetValue } from "./date_filter_presets";
 import { formatDate } from "./format_date";
+import { useLoticsLocale } from "./locale";
 
 type SelectionMode = "single" | "range";
 
@@ -42,25 +43,6 @@ export interface DateFilterLabels extends SegmentLabels {
   selectDate: string;
 }
 
-const DEFAULT_LABELS: DateFilterLabels = {
-  year: "Year",
-  month: "Month",
-  day: "Day",
-  hour: "Hour",
-  minute: "Minute",
-  dayPeriod: "AM/PM",
-  today: "Today",
-  yesterday: "Yesterday",
-  tomorrow: "Tomorrow",
-  thisWeek: "This week",
-  thisMonth: "This month",
-  lastMonth: "Last month",
-  custom: "Custom",
-  from: "From",
-  to: "To",
-  selectDateRange: "Select date range",
-  selectDate: "Select date",
-};
 
 export interface DateFilterProps {
   value: DateFilterValue;
@@ -106,9 +88,10 @@ function formatDateDisplay(date: Date | null, locale: string | undefined): strin
 
 export function DateFilter(props: DateFilterProps) {
   const { value, onValueChange, includeTime = false, locale } = props;
+  const loc = useLoticsLocale().dateRange;
   const labels = useMemo<DateFilterLabels>(
-    () => ({ ...DEFAULT_LABELS, ...props.labels }),
-    [props.labels],
+    () => ({ ...loc, ...props.labels }),
+    [loc, props.labels],
   );
   const screenSize = useScreenSize();
   const calendarRef = useRef<CalendarRef>(null);

package/src/date_range_filter_field.tsx

@@ -9,6 +9,7 @@ import { PressableHighlight } from "./pressable_highlight";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import { DateFilter, DateFilterValue, DateFilterLabels } from "./date_filter";
 import { formatDate } from "./format_date";
+import { useLoticsLocale } from "./locale";
 
 // =============================================================================
 // DateRangeFilterField — the common filter composition over DateFilter:
@@ -27,7 +28,6 @@ export interface DateRangeFilterFieldLabels extends DateFilterLabels {
   placeholder: string;
 }
 
-const DEFAULT_FIELD_LABELS = { clear: "Clear", done: "Done", placeholder: "All time" };
 
 export interface DateRangeFilterFieldProps {
   value: DateFilterValue;
@@ -110,7 +110,8 @@ function formatTrigger(value: DateFilterValue, includeTime: boolean, locale: str
 
 export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
   const { value, onValueChange, includeTime, locale, testID } = props;
-  const labels = useMemo(() => ({ ...DEFAULT_FIELD_LABELS, ...props.labels }), [props.labels]);
+  const loc = useLoticsLocale().dateRange;
+  const labels = useMemo(() => ({ ...loc, ...props.labels }), [loc, props.labels]);
   const [open, setOpen] = useState(false);
 
   const hasValue = Boolean(value.start.date || value.end.date);

package/src/locale.tsx

@@ -1,6 +1,9 @@
 import { createContext, useContext, type ReactNode } from "react";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
+import { type ConfidenceLabels } from "./confidence";
+import { type RemainderMeterLabels } from "./remainder_meter";
+import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -29,6 +32,30 @@ export interface LoticsLocale {
   filterChip: { clear: string };
   /** `Drawer`: the record prev/next + close controls (screen-reader names). */
   drawer: { previous: string; next: string; close: string };
+  /** `Confidence`: the full level phrase ("High confidence" …). */
+  confidence: ConfidenceLabels;
+  /** `RemainderMeter`: the applied / remaining / over / exact captions. */
+  remainderMeter: Required<RemainderMeterLabels>;
+  /** `ChangeReview` (+ `ChangeReviewActions`): the review-card chrome — the
+   *  Keep/Drop verdicts, Undo, the Applied/Discarded tags, the kept-counter,
+   *  the title, and the commit-bar Accept-all / Discard. */
+  changeReview: {
+    title: string;
+    accept: string;
+    reject: string;
+    undo: string;
+    applied: string;
+    discarded: string;
+    keptCount: (kept: number, total: number) => string;
+    acceptAll: string;
+    discard: string;
+    apply: string;
+    applyKept: string;
+  };
+  /** `DateRangeFilterField` (and the `DateFilter` panel it wraps): presets,
+   *  from/to, the footer Clear/Done, the trigger placeholder, and the time-field
+   *  segment a11y names. */
+  dateRange: DateRangeFilterFieldLabels;
 }
 
 /** The platform default — English. Every component's hardcoded default lives
@@ -50,6 +77,34 @@ export const en: LoticsLocale = {
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", noResults: "No results", recent: "Recent" },
   filterChip: { clear: "Clear" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
+  confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
+  remainderMeter: {
+    applied: (allocated, total) => `${allocated} of ${total} applied`,
+    remaining: (remainder) => `${remainder} unapplied`,
+    over: (amount) => `Over by ${amount}`,
+    exact: "Fully applied",
+  },
+  changeReview: {
+    title: "Suggested edits",
+    accept: "Keep",
+    reject: "Drop",
+    undo: "Undo",
+    applied: "Applied",
+    discarded: "Discarded",
+    keptCount: (kept, total) => `${kept} of ${total} kept`,
+    acceptAll: "Accept all",
+    discard: "Discard",
+    apply: "Apply",
+    applyKept: "Apply kept",
+  },
+  dateRange: {
+    year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM",
+    today: "Today", yesterday: "Yesterday", tomorrow: "Tomorrow",
+    thisWeek: "This week", thisMonth: "This month", lastMonth: "Last month",
+    custom: "Custom", from: "From", to: "To",
+    selectDateRange: "Select date range", selectDate: "Select date",
+    clear: "Clear", done: "Done", placeholder: "All time",
+  },
 };
 
 /** Vietnamese. Maintained once here so every app (and the frontend) shares one
@@ -71,6 +126,34 @@ export const vi: LoticsLocale = {
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", noResults: "Không có kết quả", recent: "Gần đây" },
   filterChip: { clear: "Xóa" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
+  confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
+  remainderMeter: {
+    applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,
+    remaining: (remainder) => `Còn ${remainder}`,
+    over: (amount) => `Vượt ${amount}`,
+    exact: "Đã phân bổ đủ",
+  },
+  changeReview: {
+    title: "Đề xuất chỉnh sửa",
+    accept: "Giữ",
+    reject: "Bỏ",
+    undo: "Hoàn tác",
+    applied: "Đã áp dụng",
+    discarded: "Đã bỏ",
+    keptCount: (kept, total) => `Giữ ${kept}/${total}`,
+    acceptAll: "Giữ tất cả",
+    discard: "Hủy",
+    apply: "Áp dụng",
+    applyKept: "Áp dụng mục đã giữ",
+  },
+  dateRange: {
+    year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH",
+    today: "Hôm nay", yesterday: "Hôm qua", tomorrow: "Ngày mai",
+    thisWeek: "Tuần này", thisMonth: "Tháng này", lastMonth: "Tháng trước",
+    custom: "Tùy chọn", from: "Từ", to: "Đến",
+    selectDateRange: "Chọn khoảng ngày", selectDate: "Chọn ngày",
+    clear: "Xóa", done: "Xong", placeholder: "Tất cả thời gian",
+  },
 };
 
 const LoticsLocaleContext = createContext<LoticsLocale>(en);

package/src/remainder_meter.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, View, type DimensionValue } from "react-native";
 import { colors, solid } from "./colors";
 import { Text } from "./text";
+import { useLoticsLocale } from "./locale";
 
 /**
  * Override the meter's captions for localization. Each key is optional and
@@ -17,11 +18,6 @@ export interface RemainderMeterLabels {
   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;
@@ -43,20 +39,21 @@ export interface RemainderMeterProps {
  */
 export function RemainderMeter(props: RemainderMeterProps) {
   const { total, allocated, format = (n) => n.toLocaleString(), labels } = props;
+  const loc = useLoticsLocale().remainderMeter;
   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"
-      ? (labels?.exact ?? DEFAULT_EXACT)
+      ? (labels?.exact ?? loc.exact)
       : state === "over"
-        ? (labels?.over ?? defaultOver)(format(-remainder))
-        : (labels?.remaining ?? defaultRemaining)(format(remainder));
+        ? (labels?.over ?? loc.over)(format(-remainder))
+        : (labels?.remaining ?? loc.remaining)(format(remainder));
   return (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
-        <Text size="sm" color="muted" style={{ flex: 1 }}>{(labels?.applied ?? defaultApplied)(format(allocated), format(total))}</Text>
+        <Text size="sm" color="muted" style={{ flex: 1 }}>{(labels?.applied ?? loc.applied)(format(allocated), format(total))}</Text>
         <Text size="sm" weight="medium" tabular color={state === "over" ? "danger" : state === "exact" ? "success" : "default"}>
           {right}
         </Text>