@lotics/ui 2.4.0 → 2.5.0

package/src/popover.tsx

@@ -519,7 +519,7 @@ export function PopoverContent(props: PopoverContentProps) {
         tabIndex={small ? undefined : -1}
         style={{
           position: "fixed",
-          padding: 8,
+          padding: 12,
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
           borderBottomLeftRadius: small ? 0 : 16,
@@ -595,15 +595,25 @@ export function PopoverContent(props: PopoverContentProps) {
 export interface PopoverFooterProps {
   children: React.ReactNode;
   showDivider?: boolean;
+  /** Action Layout rules: the closure/commit action sits RIGHT (`end`,
+   * the default); utility-left + commit-right → `space-between`;
+   * informational/custom-width footers → `start`. */
+  align?: "start" | "end" | "space-between";
 }
 
 export function PopoverFooter(props: PopoverFooterProps) {
-  const { children, showDivider = true } = props;
+  const { children, showDivider = true, align = "end" } = props;
+  const justifyContent =
+    align === "end" ? "flex-end" : align === "space-between" ? "space-between" : "flex-start";
 
   return (
-    <View>
+    // Pull out to the popover's edges (counteract its 12px inset) so the divider
+    // spans full width; the action row then re-insets to align with the body.
+    <View style={{ marginHorizontal: -12, marginTop: 12 }}>
       {showDivider && <Divider />}
-      <View style={{ padding: 8 }}>{children}</View>
+      <View style={{ paddingHorizontal: 12, paddingTop: 12, flexDirection: "row", alignItems: "center", gap: 8, justifyContent }}>
+        {children}
+      </View>
     </View>
   );
 }

package/src/pressable_highlight.tsx

@@ -32,6 +32,14 @@ export interface PressableHighlightProps extends PressableProps {
    * explicitly because the base React Native `PressableProps` type omits it.
    */
   onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
+  /**
+   * Pass "none" on row/card surfaces: a pressable surface is a button, not a
+   * text-selection surface — drag jitter on selectable text starts a
+   * selection and can swallow the click. Exposed as a prop because RN types
+   * only carry `userSelect` on TextStyle, while react-native-web applies it
+   * to any element.
+   */
+  userSelect?: "auto" | "none";
 }
 
 /**
@@ -47,6 +55,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltip,
     tooltipSide = "top",
     onPress,
+    userSelect,
     ...restPressableProps
   } = props;
   const tooltipProps = useTooltip({
@@ -71,7 +80,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
         const hovered = (state as { hovered?: boolean }).hovered;
         return [
           {
-            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
           },
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,

package/src/pressable_row.tsx

@@ -0,0 +1,91 @@
+import { ReactNode, useState } from "react";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+export interface PressableRowProps {
+  onPress: () => void;
+  /** The open/selected record — paints the persistent highlight. */
+  selected?: boolean;
+  /** Part of a multi-select set — paints a persistent blue tint, distinct from
+   *  `selected` (the open record). The hover / open / press wash overrides it, so
+   *  it's the resting state of a ticked row in a bulk-select register. */
+  marked?: boolean;
+  /**
+   * - "bleed" (default): the standalone REGISTER row — px-20, square wash to
+   *   the card edges, separated by full-bleed `Divider`s. The one pattern for
+   *   top-level record lists.
+   * - "inset": a rounded, contained row — the wash is a rounded pill pulled in
+   *   from the edge (radius 8, marginH -8). Lives inside a padded container (an
+   *   `Accordion`'s drill-down rows, or a gap-separated selectable list) so the
+   *   wash insets from the card edge instead of bleeding to it. Use when rows are
+   *   GAP-separated rather than `Divider`-separated.
+   */
+  variant?: "bleed" | "inset";
+  /** Cells + trailing controls. Nested pressables (CTAs, checkboxes, ⋯)
+   * claim their own presses; put the accessible door inside — a plain
+   * `Pressable` with role="button" + "Open …" label around the row body. */
+  children: ReactNode;
+  /** Layout only (gap, minHeight overrides). The surface owns its press
+   * states — never pass backgroundColor for hover/selected. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * THE pressable-row surface for record lists: a role-less, non-focusable press
+ * target whose hover wash spans the ENTIRE row — including over nested controls
+ * (CTAs, ⋯, checkboxes) — because it tracks hover via DOM mouseenter/mouseleave
+ * rather than Pressability hover (react-native-web releases a parent
+ * pressable's hover to the innermost nested pressable, which would stop the
+ * wash short of trailing controls, and is why this can't be hand-rolled from
+ * `PressableHighlight`). The surface carries no button role (a button must not
+ * contain interactive descendants); the row body inside is the accessible door.
+ * `variant` picks bleed (registers) or inset (Accordion drill-down rows).
+ */
+export function PressableRow(props: PressableRowProps) {
+  const { onPress, selected = false, marked = false, variant = "bleed", children, style } = props;
+  const [hovered, setHovered] = useState(false);
+
+  // RN's types don't declare mouse handlers; react-native-web forwards them
+  // to the DOM element (same boundary cast PressableHighlight uses).
+  const mouseProps = {
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+  } as object;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      focusable={false}
+      {...mouseProps}
+      style={({ pressed }) => [
+        styles.row,
+        variant === "inset" ? styles.inset : styles.bleed,
+        {
+          backgroundColor: pressed ? colors.zinc[200] : selected ? colors.zinc[100] : hovered ? colors.zinc[100] : marked ? colors.blue[50] : undefined,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    ...({ cursor: "pointer", userSelect: "none", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+  },
+  // Square, full-bleed — lines up with the Dividers between register rows.
+  bleed: {
+    paddingHorizontal: 20,
+  },
+  // Rounded, pulled in from the edge — matches the Accordion's inset rows.
+  inset: {
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+  },
+});

package/src/progress_bar.tsx

@@ -1,4 +1,4 @@
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 
@@ -7,15 +7,28 @@ export type ProgressBarFormat = "percentage" | "fraction" | "none";
 export interface ProgressBarProps {
   value: number;
   max: number;
+  /** What this bar measures ("Đã nhận", "Tiến độ giao") — the xs muted
+   * uppercase eyebrow above the bar. Omit inside a band that already names
+   * it. */
+  title?: string;
+  /** Caption above-right of the bar: `percentage` → "50%", `fraction` →
+   * "1.250 / 2.500 · 50%". */
   format?: ProgressBarFormat;
   color?: string;
   completeColor?: string;
 }
 
+/**
+ * Continuous value-vs-max meter. Shares the labeled-meter anatomy with
+ * `StepProgress`/`StackedProgressBar`: optional title eyebrow left, derived
+ * caption right, 8px track below. Countable stages → `StepProgress`;
+ * weighted composition → `StackedProgressBar`.
+ */
 export function ProgressBar(props: ProgressBarProps) {
   const {
     value,
     max,
+    title,
     format = "percentage",
     color = colors.blue["500"],
     completeColor = colors.green["500"],
@@ -24,26 +37,34 @@ export function ProgressBar(props: ProgressBarProps) {
   const percentage = Math.min(100, Math.max(0, (value / max) * 100));
   const isComplete = percentage >= 100;
 
-  const label =
+  const caption =
     format === "fraction"
-      ? `${value} / ${max}`
+      ? `${value.toLocaleString("vi-VN")} / ${max.toLocaleString("vi-VN")} · ${Math.round(percentage)}%`
       : format === "percentage"
         ? `${Math.round(percentage)}%`
         : null;
 
   return (
     <View style={styles.container}>
-      {label !== null && (
+      {title || caption ? (
         <View style={styles.header}>
-          <Text size="sm" color="muted">
-            {label}
-          </Text>
+          {title ? (
+            <Text size="xs" color="muted" transform="uppercase">
+              {title}
+            </Text>
+          ) : null}
+          <View style={styles.spacer} />
+          {caption ? (
+            <Text size="xs" color="muted" tabular>
+              {caption}
+            </Text>
+          ) : null}
         </View>
-      )}
-      <View style={styles.barBackground}>
+      ) : null}
+      <View style={styles.track}>
         <View
           style={[
-            styles.barFill,
+            styles.fill,
             {
               width: `${percentage}%`,
               backgroundColor: isComplete ? completeColor : color,
@@ -61,16 +82,25 @@ const styles = StyleSheet.create({
   },
   header: {
     flexDirection: "row",
-    justifyContent: "flex-end",
+    alignItems: "baseline",
+    gap: 12,
   },
-  barBackground: {
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: colors.gray["100"],
+  spacer: {
+    flex: 1,
+  },
+  // 10px — substantial enough to read as a meter, not a hairline.
+  track: {
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: colors.zinc["100"],
     overflow: "hidden",
+    // Hairline inner edge — the track reads as a groove, not a gray strip.
+    ...({ boxShadow: "inset 0 0 0 1px rgba(38,38,38,0.04)" } as ViewStyle),
   },
-  barFill: {
+  fill: {
     height: "100%",
-    borderRadius: 4,
+    borderRadius: 5,
+    // Progress that snaps is dead; progress that moves is alive.
+    ...({ transition: "width 200ms ease-out, background-color 200ms ease-out" } as ViewStyle),
   },
 });

package/src/radio_picker.tsx

@@ -22,10 +22,15 @@ export interface RadioPickerProps<T extends string | number | symbol> {
   options: RadioPickerOption<T>[];
   value: T;
   onValueChange: (value: T) => void;
+  /** "column" (default) stacks full-width rows — right when options carry
+   *  descriptions. "row" wraps compact options inline — right for short,
+   *  description-less choices (a quick-entry form), where a six-option
+   *  column would push the rest of the form below the fold. */
+  direction?: "column" | "row";
 }
 
 export function RadioPicker<T extends string | number | symbol>(props: RadioPickerProps<T>) {
-  const { accessibilityLabel, options, value, onValueChange } = props;
+  const { accessibilityLabel, options, value, onValueChange, direction = "column" } = props;
   const itemRefs = useRef<Array<View | null>>([]);
 
   // Roving tabindex: arrow keys move focus between options and select, matching
@@ -65,7 +70,11 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
   const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
 
   return (
-    <View accessibilityRole="radiogroup" accessibilityLabel={accessibilityLabel}>
+    <View
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      style={direction === "row" ? { flexDirection: "row", flexWrap: "wrap", gap: 4 } : undefined}
+    >
       {options.map((option, index) => (
         <RadioOption
           ref={(node: View | null) => {
@@ -76,6 +85,7 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
           value={option.value}
           description={option.description}
           testID={option.testID}
+          compact={direction === "row"}
           selected={value === option.value}
           isTabStop={index === tabStopIndex}
           onSelect={() => onValueChange(option.value)}
@@ -89,13 +99,14 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
 function RadioOption<T extends string | number | symbol>(
   props: RadioPickerOption<T> & {
     ref: (node: View | null) => void;
+    compact: boolean;
     selected: boolean;
     isTabStop: boolean;
     onSelect: () => void;
     onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
   },
 ) {
-  const { ref, label, description, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
+  const { ref, label, description, compact, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
 
   const handlePress = useCallback(() => {
     onSelect();
@@ -108,9 +119,9 @@ function RadioOption<T extends string | number | symbol>(
       style={{
         flexDirection: "row",
         alignItems: "center",
-        padding: 12,
+        padding: compact ? 8 : 12,
         borderRadius: 8,
-        gap: 16,
+        gap: compact ? 8 : 16,
       }}
       onPress={handlePress}
       accessibilityRole="radio"
@@ -122,8 +133,8 @@ function RadioOption<T extends string | number | symbol>(
     >
       <View
         style={{
-          width: 28,
-          height: 28,
+          width: compact ? 20 : 28,
+          height: compact ? 20 : 28,
           borderRadius: 999,
           borderWidth: 1,
           borderColor: colors.border,
@@ -132,10 +143,10 @@ function RadioOption<T extends string | number | symbol>(
           alignItems: "center",
         }}
       >
-        {selected && <Icon name="check" color={getTextColor("inverted")} />}
+        {selected && <Icon name="check" size={compact ? 14 : 24} color={getTextColor("inverted")} />}
       </View>
       <View>
-        <Text>{label}</Text>
+        <Text size={compact ? "sm" : undefined}>{label}</Text>
         {!!description && <Text color="muted">{description}</Text>}
       </View>
     </PressableHighlight>

package/src/range_slider.tsx

@@ -0,0 +1,185 @@
+import { useRef, useState } from "react";
+import { StyleSheet, View, type GestureResponderEvent, type LayoutChangeEvent, type ViewStyle } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+const THUMB = 20;
+const R = THUMB / 2;
+
+export interface RangeSliderProps {
+  min: number;
+  max: number;
+  step?: number;
+  /** The controlled [low, high] selection. */
+  value: [number, number];
+  onValueChange: (value: [number, number]) => void;
+  /** Render the edge labels (money, units). Default: the bare number. */
+  format?: (value: number) => string;
+  /** Filled-track / thumb accent. Default the neutral ink. */
+  color?: string;
+  /** Base name — the thumbs announce "{label} minimum" / "{label} maximum". */
+  accessibilityLabel: string;
+}
+
+type Thumb = "low" | "high";
+
+/**
+ * A short human summary of a range selection for a `FilterPill` preview —
+ * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
+ * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
+ */
+export function rangeSummary(
+  value: [number, number],
+  format: (n: number) => string = String,
+  bounds?: [number, number],
+): string | undefined {
+  const [low, high] = value;
+  if (!bounds) return `${format(low)}–${format(high)}`;
+  const atMin = low <= bounds[0];
+  const atMax = high >= bounds[1];
+  if (atMin && atMax) return undefined;
+  if (atMin) return `≤ ${format(high)}`;
+  if (atMax) return `≥ ${format(low)}`;
+  return `${format(low)}–${format(high)}`;
+}
+
+/**
+ * A dual-thumb range slider — drag either end to bound a continuous number
+ * (a price range, an amount, a weight). Drag works on web and native (the RN
+ * Responder system), and each thumb is a keyboard-operable ARIA slider
+ * (arrow keys step it, clamped against the other). For a small discrete count
+ * use `Counter`; for a single free value use `NumberInput`.
+ */
+export function RangeSlider(props: RangeSliderProps) {
+  const { min, max, step = 1, value, onValueChange, format, color = colors.zinc[900], accessibilityLabel } = props;
+  const [low, high] = value;
+  const [width, setWidth] = useState(0);
+  const [dragging, setDragging] = useState<Thumb | null>(null);
+  const active = useRef<Thumb | null>(null);
+
+  const fmt = (n: number) => (format ? format(n) : String(n));
+  const span = max - min || 1;
+  const usable = Math.max(0, width - THUMB); // the track inset by a thumb radius at each end
+  const pct = (v: number) => (v - min) / span;
+  const x = (v: number) => pct(v) * usable; // thumb box left, in px — never crosses the edge
+
+  const snap = (raw: number) => {
+    const stepped = Math.round((raw - min) / step) * step + min;
+    return Math.min(max, Math.max(min, stepped));
+  };
+
+  // A thumb never crosses the other — low stays ≤ high.
+  const setThumb = (thumb: Thumb, v: number) => {
+    if (thumb === "low") onValueChange([Math.min(v, high), high]);
+    else onValueChange([low, Math.max(v, low)]);
+  };
+
+  // locationX is relative to the track; the usable range maps [R, width−R] → [0,1].
+  const fromX = (thumb: Thumb, locationX: number) =>
+    setThumb(thumb, snap(min + Math.min(1, Math.max(0, (locationX - R) / (usable || 1))) * span));
+
+  const closerThumb = (locationX: number): Thumb => {
+    const f = Math.min(1, Math.max(0, (locationX - R) / (usable || 1)));
+    const v = min + f * span;
+    return Math.abs(v - low) <= Math.abs(v - high) ? "low" : "high";
+  };
+
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+
+  // The track is the responder; grant picks the nearer thumb. We refuse
+  // termination so a parent ScrollView can't steal the drag on a vertical wobble.
+  const responder = {
+    onStartShouldSetResponder: () => true,
+    onMoveShouldSetResponder: () => true,
+    onResponderTerminationRequest: () => false,
+    onResponderGrant: (e: GestureResponderEvent) => {
+      const t = closerThumb(e.nativeEvent.locationX);
+      active.current = t;
+      setDragging(t);
+      fromX(t, e.nativeEvent.locationX);
+    },
+    onResponderMove: (e: GestureResponderEvent) => {
+      if (active.current) fromX(active.current, e.nativeEvent.locationX);
+    },
+    onResponderRelease: () => { active.current = null; setDragging(null); },
+    onResponderTerminate: () => { active.current = null; setDragging(null); },
+  };
+
+  // Web keyboard handler, forwarded by react-native-web (cast like the mouse
+  // handlers elsewhere — RN's View types don't declare it).
+  const keyProps = (thumb: Thumb) =>
+    ({
+      onKeyDown: (e: { key: string; preventDefault: () => void }) => {
+        const d = e.key === "ArrowRight" || e.key === "ArrowUp" ? step : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -step : 0;
+        if (d === 0) return;
+        e.preventDefault();
+        setThumb(thumb, snap((thumb === "low" ? low : high) + d));
+      },
+    }) as object;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.labels}>
+        <Text size="sm" color="muted" tabular>{fmt(low)}</Text>
+        <Text size="sm" color="muted" tabular>{fmt(high)}</Text>
+      </View>
+      <View style={styles.trackArea} onLayout={onLayout} {...responder}>
+        <View style={styles.trackBg} />
+        <View style={[styles.trackFill, { left: x(low) + R, width: Math.max(0, x(high) - x(low)), backgroundColor: color }]} />
+        {(["low", "high"] as const).map((thumb) => {
+          const v = thumb === "low" ? low : high;
+          return (
+            <View
+              key={thumb}
+              accessibilityRole="adjustable"
+              accessibilityLabel={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
+              accessibilityValue={{ min, max, now: v }}
+              focusable
+              style={[styles.thumb, { left: x(v), borderColor: color }, dragging === thumb && styles.thumbActive]}
+              {...keyProps(thumb)}
+            />
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { gap: 10, minWidth: 240 },
+  labels: { flexDirection: "row", justifyContent: "space-between" },
+  trackArea: {
+    height: 28,
+    justifyContent: "center",
+    ...({ cursor: "pointer", touchAction: "none" } as ViewStyle),
+  },
+  trackBg: {
+    position: "absolute",
+    left: R,
+    right: R,
+    top: 11,
+    height: 6,
+    borderRadius: 999,
+    backgroundColor: colors.zinc[200],
+  },
+  trackFill: {
+    position: "absolute",
+    top: 11,
+    height: 6,
+    borderRadius: 999,
+  },
+  thumb: {
+    position: "absolute",
+    top: 4,
+    width: THUMB,
+    height: THUMB,
+    borderRadius: 999,
+    backgroundColor: colors.white,
+    borderWidth: 2,
+    ...({ cursor: "pointer", boxShadow: "0 1px 3px rgba(38,38,38,0.18)" } as ViewStyle),
+  },
+  thumbActive: {
+    // a soft halo while dragging — no size change, so the thumb never shifts
+    ...({ boxShadow: "0 1px 3px rgba(38,38,38,0.18), 0 0 0 6px rgba(38,38,38,0.10)" } as ViewStyle),
+  },
+});

package/src/remainder_meter.tsx

@@ -0,0 +1,48 @@
+import { StyleSheet, View, type DimensionValue } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+
+export interface RemainderMeterProps {
+  /** The source amount being distributed — the payment, the available stock. */
+  total: number;
+  /** How much has been allocated across the targets so far. */
+  allocated: number;
+  /** Format amounts (money / units). Defaults to a plain locale string. */
+  format?: (n: number) => string;
+}
+
+/**
+ * The heart of an allocation — how much of a SOURCE has been distributed and
+ * how much is left. Three states the operator reads at a glance: UNDER (a
+ * remainder still to place), EXACT (fully applied — green), OVER (over-allocated
+ * — red, the commit is blocked). Pair with `AllocationRow`s that split the source
+ * down until this reads zero. Reused by cash application, stock allocation, cost
+ * distribution, budgeting.
+ */
+export function RemainderMeter(props: RemainderMeterProps) {
+  const { total, allocated, format = (n) => n.toLocaleString() } = props;
+  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" ? "Fully applied" : state === "over" ? `Over by ${format(-remainder)}` : `${format(remainder)} unapplied`;
+  return (
+    <View style={{ gap: 8 }}>
+      <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+        <Text size="sm" color="muted" style={{ flex: 1 }}>{`${format(allocated)} of ${format(total)} applied`}</Text>
+        <Text size="sm" weight="medium" tabular color={state === "over" ? "danger" : state === "exact" ? "success" : "default"}>
+          {right}
+        </Text>
+      </View>
+      <View style={styles.track}>
+        <View style={[styles.fill, { width: pct, backgroundColor: barColor }]} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { height: 8, borderRadius: 999, backgroundColor: colors.zinc[200], overflow: "hidden" },
+  fill: { height: "100%", borderRadius: 999 },
+});

package/src/ring_gauge.tsx

@@ -11,7 +11,7 @@ export interface RingGaugeProps {
   caption?: string;
   /** Diameter in px. Default 128. */
   size?: number;
-  /** Ring stroke width in px. Default 12. */
+  /** Ring stroke width in px. Default 14 — thinner reads weak. */
   thickness?: number;
   /** Arc color. Default teal accent. */
   color?: string;
@@ -29,7 +29,7 @@ export interface RingGaugeProps {
  * (`rotate(-90)`) and grows clockwise via `strokeDasharray`.
  */
 export function RingGauge(props: RingGaugeProps) {
-  const { value, label, caption, size = 140, thickness = 10, color = colors.teal[600] } = props;
+  const { value, label, caption, size = 140, thickness = 14, color = colors.teal[600] } = props;
   const clamped = Math.max(0, Math.min(100, value));
   const center = size / 2;
   const radius = (size - thickness) / 2;
@@ -40,7 +40,7 @@ export function RingGauge(props: RingGaugeProps) {
     <View style={{ alignItems: "center", gap: 12 }}>
       <View style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: "absolute" }}>
-          <circle cx={center} cy={center} r={radius} fill="none" stroke={colors.zinc[200]} strokeWidth={thickness} />
+          <circle cx={center} cy={center} r={radius} fill="none" stroke={colors.zinc[100]} strokeWidth={thickness} />
           <circle
             cx={center}
             cy={center}
@@ -58,11 +58,11 @@ export function RingGauge(props: RingGaugeProps) {
         </Text>
       </View>
       <View style={{ alignItems: "center", gap: 2 }}>
-        <Text size="sm" weight="medium">
+        <Text size="md" weight="semibold">
           {label}
         </Text>
         {caption ? (
-          <Text size="xs" color="muted">
+          <Text size="sm" color="muted">
             {caption}
           </Text>
         ) : null}