@lotics/ui 28.2.1 → 28.3.0

package/docs/catalog.md

@@ -922,6 +922,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `metric` {label,value,tone,note} pinned right, the band's ONE accent. The record's FIELDS
   never live in the header: compose them as `DetailTable`s in the sections below. Replaces
   hand-rolled record headers (mixed scales, several competing figures, color noise).
+  `metric.value` also takes a NODE, for the one case of a figure that has not loaded yet — pass
+  a `Skeleton` and it renders in place of the styled figure, in a slot holding that figure's own
+  line box, so the band is the same height either way and a loading record's header does not
+  move when the number lands. Still ONE number: a node is a stand-in for it, not a licence to
+  put a control in the slot.
 - **`ledger`** — `Ledger` + `LedgerGroup` + `LedgerBasis` + `LedgerRow` + `LedgerTotal` — the
   record-level money list: every figure on ONE right-aligned tabular column, `peek` turns a row
   into a pressable door floating its particulars in an anchored popover (put links INSIDE the

package/package.json

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

package/src/record_summary.tsx

@@ -5,8 +5,20 @@ import { Text } from "./text";
 export interface RecordSummaryMetric {
   /** Caption above the number ("Outstanding", "Total value"). */
   label: string;
-  /** The headline figure — rendered lg semibold tabular. */
-  value: string;
+  /**
+   * The headline figure — rendered lg semibold tabular.
+   *
+   * A NODE is accepted for one reason: the figure is not known yet, and the
+   * surface wants a placeholder (a `Skeleton`) in its place while the record
+   * loads. It is rendered INSTEAD of the styled `Text`, not inside it — a `View`
+   * nested in a `Text` is not a thing React Native supports — into a slot that
+   * reserves the figure's own line box, so a placeholder cannot change the
+   * band's height and the caller never has to know what that height is.
+   *
+   * It is still ONE headline number. A node here is a stand-in for the number,
+   * never a licence to put a control or a second figure in the slot.
+   */
+  value: ReactNode;
   /** Valence of the figure (and its note) — the summary's ONE permitted accent. */
   tone?: "default" | "danger" | "warning" | "success";
   /** One short qualifier under the number ("Overdue 25 days"). */
@@ -65,9 +77,13 @@ export function RecordSummary(props: RecordSummaryProps) {
             <Text size="xs" color="muted" weight="medium" align="right">
               {metric.label}
             </Text>
-            <Text size="lg" weight="semibold" tabular align="right" color={metric.tone === "default" ? undefined : metric.tone}>
-              {metric.value}
-            </Text>
+            {typeof metric.value === "string" ? (
+              <Text size="lg" weight="semibold" tabular align="right" color={metric.tone === "default" ? undefined : metric.tone}>
+                {metric.value}
+              </Text>
+            ) : (
+              <View style={styles.metricSlot}>{metric.value}</View>
+            )}
             {metric.note ? (
               <Text size="xs" align="right" weight={metric.tone && metric.tone !== "default" ? "medium" : "regular"} color={metric.tone && metric.tone !== "default" ? metric.tone : "muted"}>
                 {metric.note}
@@ -100,4 +116,12 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
     gap: 1,
   },
+  // The figure's line box, held open for a non-string value so the band is the
+  // same height whether it holds the number or a placeholder. 30 is `Text` size
+  // `lg`'s lineHeight (src/text.tsx) — the height the styled figure occupies.
+  metricSlot: {
+    height: 30,
+    justifyContent: "center",
+    alignItems: "flex-end",
+  },
 });