@lotics/ui 21.2.0 → 21.3.0

package/docs/catalog.md

@@ -159,7 +159,9 @@ plain sm tabular count beside it — the cell/heading/peek-trigger meter; a capt
 above a tiny bar reads misaligned. **The track clamps at 100%, the caption does not** — over
 its max it reads `2,100 / 2,000 · 105%`, because a meter that says "100%" when you are over
 tells the reader they are exactly at the limit. Numbers format in the reader's locale, so
-never hand-format the value you pass in) / `StackedProgressBar` / `StepProgress`, `Breakdown` (a
+never hand-format the value you pass in — when display precision differs from the true value
+(whole credits off a fractional balance), `formatValue` reshapes the caption text and leaves
+the fill and the percentage exact) / `StackedProgressBar` / `StepProgress`, `Breakdown` (a
 stacked bar + ranked share rows, pressable to drill; `maxRows` folds the long tail behind a
 "Show N more" toggle — `labels` to localize — so several facet cards align to one height in
 a row), `Funnel` (a CONVERSION funnel — ordered stages as bars that NARROW; the step

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "21.2.0",
+  "version": "21.3.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/locale.tsx

@@ -289,8 +289,11 @@ export const en: LoticsLocale = {
     downloadAll: "Download all",
     downloadSelected: (n: number) => `Download (${n})`,
     delete: "Delete",
-    removeTitle: "Remove attachment?",
-    removeMessage: "This removes the file.",
+    // `FilesEditorRemove` removes the whole SELECTION, so the confirm is phrased for a set —
+    // singular copy under-reports what the button is about to do. And the kit does not know what
+    // the files hang off, so it says what it can see: the files, and that they are selected.
+    removeTitle: "Remove files?",
+    removeMessage: "The selected files will be removed.",
     removeCancel: "Cancel",
     removeConfirm: "Remove",
   },
@@ -438,7 +441,7 @@ export const vi: LoticsLocale = {
     downloadSelected: (n: number) => `Tải ${n} tệp`,
     delete: "Xóa",
     removeTitle: "Xóa tệp?",
-    removeMessage: "Tệp sẽ bị gỡ khỏi bản ghi.",
+    removeMessage: "Các tệp đã chọn sẽ bị xóa.",
     removeCancel: "Hủy",
     removeConfirm: "Xóa",
   },

package/src/progress_bar.tsx

@@ -16,6 +16,16 @@ export interface ProgressBarProps {
    * "1,250 / 2,500 · 50%" (separators follow the reader's locale). Reports the
    * TRUE ratio — over `max` it reads "105%" while the track stays clamped. */
   format?: ProgressBarFormat;
+  /**
+   * How `value` and `max` render inside the caption. Defaults to the reader's locale grouping.
+   *
+   * The escape hatch for a quantity whose natural precision is not its DISPLAY precision — a
+   * fractional credit balance metered to whole credits, a byte count shown as GB. Still the bar's
+   * job rather than the caller's: pass the true `value`/`max` so the track and the percentage stay
+   * exact, and let this reshape only the text. Pre-rounding the numbers you pass in moves the fill
+   * and the percentage too, which is how a 99.6%-full meter starts claiming it is exactly full.
+   */
+  formatValue?: (n: number) => string;
   color?: string;
   completeColor?: string;
   /** COMPACT: one row — the track (flex) with a plain sm tabular count beside
@@ -37,6 +47,7 @@ export function ProgressBar(props: ProgressBarProps) {
     max,
     title,
     format = "percentage",
+    formatValue,
     color = colors.blue["500"],
     completeColor = colors.green["500"],
     compact = false,
@@ -55,10 +66,11 @@ export function ProgressBar(props: ProgressBarProps) {
   const ratio = max > 0 ? Math.max(0, (value / max) * 100) : 0;
   const percentage = Math.min(100, ratio);
   const isComplete = ratio >= 100;
+  const num = formatValue ?? ((n: number) => n.toLocaleString(localeTag));
 
   if (compact) {
     const label =
-      format === "percentage" ? `${Math.round(ratio)}%` : `${value.toLocaleString(localeTag)}/${max.toLocaleString(localeTag)}`;
+      format === "percentage" ? `${Math.round(ratio)}%` : `${num(value)}/${num(max)}`;
     return (
       <View style={styles.compactRow}>
         <View style={[styles.track, styles.compactTrack]}>
@@ -75,7 +87,7 @@ export function ProgressBar(props: ProgressBarProps) {
 
   const caption =
     format === "fraction"
-      ? `${value.toLocaleString(localeTag)} / ${max.toLocaleString(localeTag)} · ${Math.round(ratio)}%`
+      ? `${num(value)} / ${num(max)} · ${Math.round(ratio)}%`
       : format === "percentage"
         ? `${Math.round(ratio)}%`
         : null;