@lotics/ui 1.6.0 → 1.6.1

package/package.json

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

package/src/bar_chart.tsx

@@ -90,10 +90,12 @@ export function BarChart(props: BarChartProps) {
 
             return (
               <View key={index} style={styles.horizontalBarContainer}>
-                <Text size="sm" numberOfLines={1}>
-                  {item.label}
-                </Text>
-                <View style={styles.horizontalBarWrapper}>
+                <View style={styles.horizontalBarLabel}>
+                  <Text size="sm" numberOfLines={1}>
+                    {item.label}
+                  </Text>
+                </View>
+                <View style={styles.horizontalBarTrack}>
                   <View
                     style={[
                       styles.horizontalBar,
@@ -103,23 +105,31 @@ export function BarChart(props: BarChartProps) {
                       },
                     ]}
                   />
-                  <Text size="sm">{formatNumber(item.value)}</Text>
+                </View>
+                <View style={styles.horizontalBarValue}>
+                  <Text size="sm" numberOfLines={1}>
+                    {formatNumber(item.value)}
+                  </Text>
                 </View>
               </View>
             );
           })}
           <View style={styles.horizontalAxisContainer}>
-            {axisTicks.map((tick, index) => (
-              <View
-                key={index}
-                style={[styles.horizontalAxisTick, { left: `${(tick / axisMax) * 100}%` }]}
-              >
-                <View style={styles.tickMark} />
-                <Text size="xs" color="muted">
-                  {formatNumber(tick)}
-                </Text>
-              </View>
-            ))}
+            <View style={styles.horizontalBarLabel} />
+            <View style={styles.horizontalAxisTrack}>
+              {axisTicks.map((tick, index) => (
+                <View
+                  key={index}
+                  style={[styles.horizontalAxisTick, { left: `${(tick / axisMax) * 100}%` }]}
+                >
+                  <View style={styles.tickMark} />
+                  <Text size="xs" color="muted">
+                    {formatNumber(tick)}
+                  </Text>
+                </View>
+              ))}
+            </View>
+            <View style={styles.horizontalBarValue} />
           </View>
         </View>
       </View>
@@ -239,14 +249,24 @@ const styles = StyleSheet.create({
   horizontalChart: {
     gap: 8,
   },
+  // One row per item: a fixed label column, the bar in a flexing track, and
+  // the value in a fixed column — so neither label nor value can be clipped
+  // by a long bar, and each item takes one compact row instead of two.
   horizontalBarContainer: {
-    gap: 4,
-  },
-  horizontalBarWrapper: {
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
   },
+  horizontalBarLabel: {
+    width: 80,
+  },
+  horizontalBarTrack: {
+    flex: 1,
+  },
+  horizontalBarValue: {
+    width: 96,
+    alignItems: "flex-end",
+  },
   horizontalBar: {
     backgroundColor: colors.blue[500],
     borderRadius: 2,
@@ -254,9 +274,14 @@ const styles = StyleSheet.create({
     minWidth: 2,
   },
   horizontalAxisContainer: {
+    flexDirection: "row",
+    gap: 8,
+    marginTop: 4,
+  },
+  horizontalAxisTrack: {
+    flex: 1,
     position: "relative",
     height: 24,
-    marginTop: 4,
   },
   horizontalAxisTick: {
     position: "absolute",

package/src/metric.tsx

@@ -5,6 +5,9 @@ import { useMemo } from "react";
 
 export type MetricFormat = "currency" | "number" | "percentage" | "none";
 
+/** Semantic colour of the metric value. `default` inherits the text colour. */
+export type MetricTone = "default" | "warning" | "danger";
+
 export interface MetricProps {
   value: number | string | null | undefined;
   previousValue?: number | string | null | undefined;
@@ -12,12 +15,18 @@ export interface MetricProps {
   currency?: string;
   locale?: string;
   emptyLabel?: string;
+  tone?: MetricTone;
 }
 
 const TREND_UP = "↑";
 const TREND_DOWN = "↓";
 const TREND_FLAT = "→";
 
+const TONE_COLOR: Record<Exclude<MetricTone, "default">, string> = {
+  warning: colors.amber[600],
+  danger: colors.red[600],
+};
+
 export function Metric(props: MetricProps) {
   const {
     value,
@@ -26,6 +35,7 @@ export function Metric(props: MetricProps) {
     currency = "USD",
     locale,
     emptyLabel = "-",
+    tone = "default",
   } = props;
 
   const displayValue = useMemo(() => {
@@ -55,7 +65,11 @@ export function Metric(props: MetricProps) {
 
   return (
     <View style={styles.container}>
-      <Text size="xl" weight="semibold">
+      <Text
+        size="xl"
+        weight="semibold"
+        style={tone === "default" ? undefined : { color: TONE_COLOR[tone] }}
+      >
         {displayValue}
       </Text>
       {trend && (