@lotics/ui 1.5.1 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -31,6 +31,7 @@
     "./pressable_highlight": "./src/pressable_highlight.tsx",
     "./icon_button": "./src/icon_button.tsx",
     "./info_popover": "./src/info_popover.tsx",
+    "./select_item": "./src/select_item.tsx",
     "./badge": "./src/badge.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",

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/card.tsx

@@ -37,11 +37,9 @@ export function Card(props: CardProps) {
 
 const styles = StyleSheet.create({
   container: {
-    padding: 16,
-    borderRadius: 8,
+    padding: 20,
+    borderRadius: 16,
     backgroundColor: colors.background,
-    borderColor: colors.border,
-    borderWidth: 1,
   },
   hovered: {
     outlineColor: colors.zinc["900"],

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 && (

package/src/select_item.tsx

@@ -0,0 +1,57 @@
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+interface SelectItemProps {
+  children: React.ReactNode;
+  testID?: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A bordered, optionally-pressable container — the selectable-row look used on
+ * auth screens (organization picker, login choices). Frozen at the original
+ * Card styling (white, 1px border, radius 8, padding 16) so those screens stay
+ * visually stable while Card itself evolves toward a flatter dashboard look.
+ */
+export function SelectItem(props: SelectItemProps) {
+  const { children, testID, onPress, style } = props;
+
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        onPress={() => {
+          onPress();
+        }}
+        style={(state) => {
+          const hovered = (state as { hovered?: boolean }).hovered;
+          return [styles.container, hovered && styles.hovered, style];
+        }}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View testID={testID} style={[styles.container, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: colors.background,
+    borderColor: colors.border,
+    borderWidth: 1,
+  },
+  hovered: {
+    outlineColor: colors.zinc["900"],
+    outlineWidth: 2,
+    outlineStyle: "solid",
+  },
+});