@lotics/ui 2.4.0 → 2.5.0

package/src/scan_field.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { TextInputField } from "./text_input_field";
+
+export type ScanStatus = "idle" | "match" | "mismatch";
+
+export interface ScanFieldProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  /** Verify state — drives the border colour, the leading glyph, and the inline
+   *  message. Stays "idle" until the consumer compares the scan to the expected
+   *  code and reports the result. */
+  status?: ScanStatus;
+  /** Inline confirmation shown when `status` is "match". */
+  matchHint?: string;
+  /** Inline correction shown when `status` is "mismatch". */
+  mismatchHint?: string;
+  /** Fired on Enter — a scan gun sends a return after the code, so this is the
+   *  "scanned" signal (also a manual submit). */
+  onScan?: () => void;
+  accessibilityLabel?: string;
+}
+
+/**
+ * The scan/verify input for operations work — scan (or type) a code to confirm
+ * you're at the right bin, on the right item, handling the right tote. Unlike a
+ * plain field it carries a VERIFY state: the border, the leading glyph, and an
+ * inline message go green on a match and red on a mismatch, giving the operator a
+ * go / no-go before they act. Reused across pick / pack / receive / count / ship.
+ */
+export function ScanField(props: ScanFieldProps) {
+  const { value, onChangeText, placeholder, status = "idle", matchHint, mismatchHint, onScan, accessibilityLabel } = props;
+  const borderColor = status === "match" ? solid("emerald") : status === "mismatch" ? solid("red") : colors.zinc[300];
+  return (
+    <View style={{ gap: 6 }}>
+      <TextInputField
+        value={value}
+        onChangeText={onChangeText}
+        onSubmitEditing={onScan}
+        placeholder={placeholder}
+        icon={status === "match" ? "circle-check" : "scan"}
+        accessibilityLabel={accessibilityLabel}
+        style={[styles.field, { borderColor }]}
+      />
+      {status === "match" && matchHint ? <Text size="xs" color="success">{matchHint}</Text> : null}
+      {status === "mismatch" && mismatchHint ? <Text size="xs" color="danger">{mismatchHint}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  field: {
+    borderRadius: 10,
+    backgroundColor: colors.white,
+  },
+});

package/src/search_input.tsx

@@ -8,6 +8,7 @@ import {
   View,
   type ViewStyle,
 } from "react-native";
+import { colors } from "./colors";
 import { TextInputField } from "./text_input_field";
 
 type SearchInputProps = Omit<
@@ -55,7 +56,18 @@ export function SearchInput(props: SearchInputProps) {
 }
 
 const styles = StyleSheet.create({
+  // Search reads as a view-control by SHAPE (rounded pill + the leading
+  // search glyph). White fill pops against the zinc-50 canvas where most
+  // toolbars live; a zinc-300 border (one step up from the form-input
+  // hairline) keeps it defined on white cards too, where the fill alone
+  // would vanish. 40px (TextInputField default) — the system control height
+  // every band aligns to.
   pill: {
     borderRadius: 999,
+    backgroundColor: colors.white,
+    // A thin 1px resting border (TextInputField's default width) — emphasis on
+    // interaction comes from the input's own focus outline, so the pill stays
+    // quiet at rest. zinc-300 keeps it defined on white cards.
+    borderColor: colors.zinc[300],
   },
 });

package/src/sort_header.tsx

@@ -0,0 +1,102 @@
+import { StyleSheet, type ViewStyle } from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+
+export type SortDir = "asc" | "desc";
+export interface SortState {
+  key: string;
+  dir: SortDir;
+}
+
+/**
+ * Cycle a SINGLE-column sort on press: none → asc → desc → none (the third
+ * toggle clears it). The parent holds one `SortState | null`.
+ */
+export function cycleSort(current: SortState | null, key: string): SortState | null {
+  if (current?.key !== key) return { key, dir: "asc" };
+  if (current.dir === "asc") return { key, dir: "desc" };
+  return null;
+}
+
+/**
+ * Order a COPY of `items` by the active column. `getValue` maps (item, key) to a
+ * comparable (lowercase strings for case-insensitive order). Returns `items`
+ * unchanged when nothing is sorted.
+ */
+export function sortBy<T>(
+  items: T[],
+  sort: SortState | null,
+  getValue: (item: T, key: string) => string | number,
+): T[] {
+  if (!sort) return items;
+  const dir = sort.dir === "asc" ? 1 : -1;
+  return [...items].sort((a, b) => {
+    const va = getValue(a, sort.key);
+    const vb = getValue(b, sort.key);
+    return va < vb ? -dir : va > vb ? dir : 0;
+  });
+}
+
+export interface SortHeaderProps {
+  label: string;
+  sortKey: string;
+  sort: SortState | null;
+  onSort: (key: string) => void;
+  /** Right-align for numeric columns — the arrow then sits LEFT of the label. */
+  align?: "left" | "right";
+  style?: ViewStyle;
+}
+
+/**
+ * A sortable column header — the eyebrow label's pressable sibling. Press
+ * cycles a single-column sort (none → asc → desc → none) via `cycleSort`,
+ * showing a direction chevron when active; the parent orders rows with `sortBy`.
+ * One sort at a time. The hover wash bleeds (negative margin) so the label stays
+ * flush with the column content beneath it.
+ */
+export function SortHeader(props: SortHeaderProps) {
+  const { label, sortKey, sort, onSort, align = "left", style } = props;
+  const active = sort?.key === sortKey;
+  const arrow = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
+  const dirText = active ? (sort.dir === "asc" ? ", ascending" : ", descending") : "";
+
+  return (
+    <PressableHighlight
+      accessibilityRole="button"
+      accessibilityLabel={`Sort by ${label}${dirText}`}
+      onPress={() => onSort(sortKey)}
+      style={[styles.header, align === "right" ? styles.right : null, style]}
+    >
+      {align === "right" && arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
+      <Text
+        size="xs"
+        color={active ? "default" : "muted"}
+        weight={active ? "medium" : "regular"}
+        transform="uppercase"
+        numberOfLines={1}
+      >
+        {label}
+      </Text>
+      {align === "left" && arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Negative margin so the wash bleeds while the label stays flush with the
+  // column content below (same idea as LinkButton).
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    marginHorizontal: -6,
+    borderRadius: 6,
+  },
+  right: {
+    justifyContent: "flex-end",
+  },
+});

package/src/stacked_progress_bar.tsx

@@ -1,5 +1,6 @@
 import { View, StyleSheet } from "react-native";
 import { colors } from "./colors";
+import { Text } from "./text";
 
 interface Segment {
   /** Identifier for the segment — used as a React key. */
@@ -16,6 +17,11 @@ interface StackedProgressBarProps {
    * states render consistently (an empty array would otherwise look like
    * "data loaded with no values"). */
   total: number;
+  /** What this bar breaks down ("Phễu bán hàng") — the xs muted uppercase
+   * eyebrow above the bar. Omit inside a band that already names it. */
+  title?: string;
+  /** Context above-right of the bar ("97 cơ hội"). xs muted tabular. */
+  caption?: string;
   /** Bar pixel height. Default 14 — the dashboard hero-progress size.
    * Drop to 6-8 for inline status bars in tight rows; bump to 20-24
    * when the bar IS the section's main visualization. */
@@ -30,30 +36,59 @@ interface StackedProgressBarProps {
  * width, and a single dominant value renders as one long segment rather
  * than a "broken" bar chart with five empty stages.
  *
- * Pair with `<LegendItem />` rows below to name the colored segments.
- * Without a legend, the colored bar is decorative — viewers can't map
- * colors back to meaning.
+ * Shares the labeled-meter anatomy with `ProgressBar`/`StepProgress`:
+ * optional title eyebrow left, caption right, bar below. Pair with
+ * `<LegendItem />` rows below to name the colored segments — without a
+ * legend, the colored bar is decorative.
  */
 export function StackedProgressBar(props: StackedProgressBarProps) {
-  const { segments, total, height = 14, loading } = props;
-  if (loading || total === 0) {
-    return <View style={[styles.bar, { height, backgroundColor: colors.zinc[100] }]} />;
-  }
+  const { segments, total, title, caption, height = 14, loading } = props;
+  const bar =
+    loading || total === 0 ? (
+      <View style={[styles.bar, { height, backgroundColor: colors.zinc[100] }]} />
+    ) : (
+      <View style={[styles.bar, styles.barFilled, { height }]}>
+        {segments
+          .filter((s) => s.value > 0)
+          .map((seg) => (
+            <View key={seg.key} style={{ flex: seg.value, backgroundColor: seg.color }} />
+          ))}
+      </View>
+    );
+
+  if (!title && !caption) return bar;
   return (
-    <View style={[styles.bar, styles.barFilled, { height }]}>
-      {segments
-        .filter((s) => s.value > 0)
-        .map((seg) => (
-          <View
-            key={seg.key}
-            style={{ flex: seg.value, backgroundColor: seg.color }}
-          />
-        ))}
+    <View style={styles.container}>
+      <View style={styles.header}>
+        {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>
+      {bar}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    gap: 6,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 12,
+  },
+  spacer: {
+    flex: 1,
+  },
   bar: {
     borderRadius: 999,
     overflow: "hidden",

package/src/status_grid.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { colors, solid, tint, type ColorName } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+import { Text } from "./text";
+
+export interface StatusGridState {
+  key: string;
+  label: string;
+  /** Palette family name — the cell fill and legend dot derive their shades
+   * from it (solid for the cell, a tint when dimmed). Pass the name, not a
+   * hex, so one state is one color everywhere. */
+  color: ColorName;
+}
+
+export interface StatusGridItem {
+  key: string;
+  label: string;
+  state: string;
+}
+
+export interface StatusGridProps {
+  items: StatusGridItem[];
+  states: StatusGridState[];
+  /** The drilled-in state (from `StatusLegend`). Cells in other states dim
+   * and stop being pressable — they're outside the current slice. */
+  selectedState?: string | null;
+  onPressItem?: (key: string) => void;
+  /** The open/highlighted item (e.g. the unit in the drawer). */
+  activeKey?: string | null;
+  /** Cell edge in px. Default 16 — readable at hundreds of cells. */
+  cellSize?: number;
+}
+
+/**
+ * Live-state scan for hundreds of units — the wallboard pattern (machine
+ * park, fleet, gate bank, sensor field). Every unit is one color-coded
+ * cell; the job is scanning for red, not reading labels. Pressing a cell
+ * opens the unit; selecting a state in `StatusLegend` dims everything else.
+ * Render one grid per group (zone, site) and share a single legend +
+ * selection in the host — same lifted-state idiom as `Breakdown`.
+ */
+export function StatusGrid(props: StatusGridProps) {
+  const { items, states, selectedState = null, onPressItem, activeKey = null, cellSize = 16 } = props;
+  const stateOf = (key: string) => states.find((s) => s.key === key);
+
+  return (
+    <View style={styles.grid}>
+      {items.map((item) => {
+        const state = stateOf(item.state);
+        const dimmed = selectedState !== null && item.state !== selectedState;
+        const cellColor = state ? (dimmed ? tint(state.color, 0.2) : solid(state.color)) : colors.zinc[300];
+        return (
+          <Cell
+            key={item.key}
+            label={`${item.label} — ${state?.label ?? item.state}`}
+            color={cellColor}
+            size={cellSize}
+            active={activeKey === item.key}
+            onPress={onPressItem && !dimmed ? () => onPressItem(item.key) : undefined}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+interface CellProps {
+  label: string;
+  color: string;
+  size: number;
+  active: boolean;
+  onPress?: () => void;
+}
+
+function Cell(props: CellProps) {
+  const { label, color, size, active, onPress } = props;
+  const [hovered, setHovered] = useState(false);
+  const base = {
+    width: size,
+    height: size,
+    backgroundColor: color,
+    borderColor: active ? colors.zinc[900] : hovered && onPress ? "rgba(255,255,255,0.75)" : "transparent",
+  };
+  if (!onPress) return <View style={[styles.cell, base]} />;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      style={[styles.cell, base]}
+    />
+  );
+}
+
+export interface StatusLegendProps {
+  /** ALL items the legend summarizes (across every grid it governs). */
+  items: StatusGridItem[];
+  states: StatusGridState[];
+  selectedKey?: string | null;
+  /** Press a state to drill into it (press again to clear). Omit for an
+   * informational legend. */
+  onSelect?: (key: string | null) => void;
+}
+
+/**
+ * The legend + counts for one or more `StatusGrid`s. Pressable states drill
+ * the grids (host holds the selection); counts are derived here so the
+ * legend can never disagree with the cells.
+ */
+export function StatusLegend(props: StatusLegendProps) {
+  const { items, states, selectedKey = null, onSelect } = props;
+
+  return (
+    <View style={styles.legend}>
+      {states.map((state) => {
+        const count = items.reduce((n, item) => n + (item.state === state.key ? 1 : 0), 0);
+        const selected = selectedKey === state.key;
+        const dimmed = selectedKey !== null && !selected;
+        const row = (
+          <>
+            <View style={[styles.swatch, { backgroundColor: dimmed ? tint(state.color, 0.3) : solid(state.color) }]} />
+            <Text size="xs" color={dimmed ? "muted" : "default"}>{state.label}</Text>
+            <Text size="xs" weight={selected ? "semibold" : "regular"} color={dimmed ? "muted" : "default"} tabular>
+              {count.toLocaleString("en-US")}
+            </Text>
+          </>
+        );
+        return onSelect ? (
+          <PressableHighlight
+            key={state.key}
+            accessibilityRole="button"
+            accessibilityState={{ selected }}
+            accessibilityLabel={`${state.label}: ${count}`}
+            onPress={() => onSelect(selected ? null : state.key)}
+            style={[styles.legendItem, styles.legendPressable, selected ? styles.legendSelected : null]}
+          >
+            {row}
+          </PressableHighlight>
+        ) : (
+          <View key={state.key} style={styles.legendItem}>
+            {row}
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 3,
+  },
+  cell: {
+    borderRadius: 4,
+    borderWidth: 2,
+  },
+  legend: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: 8,
+    rowGap: 4,
+  },
+  legendItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 28,
+  },
+  legendPressable: {
+    borderRadius: 6,
+    paddingHorizontal: 8,
+  },
+  legendSelected: {
+    backgroundColor: colors.zinc[100],
+  },
+  swatch: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+  },
+});

package/src/step_list.tsx

@@ -0,0 +1,128 @@
+import { ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { PressableHighlight } from "./pressable_highlight";
+
+export type StepStatus = "pending" | "current" | "done" | "warning";
+
+export interface StepListItem {
+  id: string;
+  status: StepStatus;
+  /** Primary line — a stage, a code, a name. */
+  title: string;
+  /** Secondary muted line. */
+  subtitle?: string;
+  /** Right-aligned node — a count, a `Badge`, a time. */
+  trailing?: ReactNode;
+}
+
+export interface StepListProps {
+  steps: StepListItem[];
+  /** When set, steps become pressable to navigate; the matching step is held
+   *  highlighted so its panel can be shown elsewhere. */
+  selectedId?: string;
+  onStepPress?: (id: string) => void;
+  accessibilityLabel?: string;
+}
+
+/**
+ * A vertical step sequence on a connecting spine — done · now · up next — for a
+ * guided run, a staged process, a checklist. Every status is the SAME 20px node
+ * (filled once reached, hollow while pending), so the spine reads as one line no
+ * matter which statuses appear or in what order. Unlike `Stepper` (horizontal) or
+ * `StepProgress` (a bar), and unlike `Timeline` (past events only), it models
+ * future/pending steps. Pass `onStepPress` to make the steps NAVIGABLE — the
+ * selected step is held highlighted so the host can show its panel beside the list.
+ */
+export function StepList(props: StepListProps) {
+  const { steps, selectedId, onStepPress, accessibilityLabel } = props;
+  return (
+    <View accessibilityLabel={accessibilityLabel}>
+      {steps.map((s, i) => {
+        // The focused step: the navigated one when navigable, else "now".
+        const active = selectedId != null ? s.id === selectedId : s.status === "current";
+        const past = s.status === "done" || s.status === "warning";
+        const content = (
+          <View style={styles.contentRow}>
+            <View style={{ flex: 1, gap: 1 }}>
+              <Text size="sm" weight={active ? "medium" : "regular"} color={past && !active ? "muted" : "default"}>
+                {s.title}
+              </Text>
+              {s.subtitle ? (
+                <Text size="xs" color="muted" numberOfLines={1}>{s.subtitle}</Text>
+              ) : null}
+            </View>
+            {s.trailing}
+          </View>
+        );
+        return (
+          <View key={s.id} style={styles.item}>
+            <View style={styles.spineCol}>
+              <Marker status={s.status} />
+              {i < steps.length - 1 ? <View style={styles.spine} /> : null}
+            </View>
+            <View style={[styles.contentCol, i < steps.length - 1 ? styles.contentGap : null]}>
+              {onStepPress ? (
+                <PressableHighlight onPress={() => onStepPress(s.id)} style={[styles.rowBox, active ? styles.active : null]}>
+                  {content}
+                </PressableHighlight>
+              ) : (
+                <View style={[styles.rowBox, active ? styles.active : null]}>{content}</View>
+              )}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/** One uniform 20px node; status drives fill, not size or shape. */
+function Marker({ status }: { status: StepStatus }) {
+  if (status === "pending") {
+    return <View style={[styles.disc, styles.discPending]} />;
+  }
+  if (status === "current") {
+    return (
+      <View style={[styles.disc, { backgroundColor: solid("blue") }]}>
+        <View style={styles.currentDot} />
+      </View>
+    );
+  }
+  if (status === "warning") {
+    return (
+      <View style={[styles.disc, { backgroundColor: solid("amber") }]}>
+        <View style={styles.shortBar} />
+      </View>
+    );
+  }
+  return (
+    <View style={[styles.disc, { backgroundColor: solid("emerald") }]}>
+      <Icon name="check" size={12} color={colors.background} />
+    </View>
+  );
+}
+
+const NODE = 20;
+
+const styles = StyleSheet.create({
+  item: { flexDirection: "row", gap: 12 },
+  // paddingTop pairs with rowBox.paddingVertical so the node centres on the
+  // FIRST line of content, not on a multi-line block.
+  spineCol: { width: NODE, alignItems: "center", paddingTop: 4 },
+  disc: { width: NODE, height: NODE, borderRadius: NODE / 2, alignItems: "center", justifyContent: "center" },
+  discPending: { backgroundColor: colors.background, borderWidth: 1.5, borderColor: colors.zinc[300] },
+  currentDot: { width: 7, height: 7, borderRadius: 999, backgroundColor: colors.background },
+  shortBar: { width: 8, height: 2, borderRadius: 1, backgroundColor: colors.background },
+  spine: { width: 1.5, flex: 1, minHeight: 14, borderRadius: 1, backgroundColor: colors.zinc[200], marginTop: 4 },
+  contentCol: { flex: 1 },
+  // The inter-step gap — on every step but the last, so the list ends flush and
+  // a container's own padding isn't doubled at the bottom.
+  contentGap: { paddingBottom: 12 },
+  contentRow: { flexDirection: "row", alignItems: "flex-start", gap: 12, flex: 1 },
+  // press + plain share one box so the active wash looks identical either way.
+  rowBox: { borderRadius: 8, paddingHorizontal: 10, paddingVertical: 4, marginHorizontal: -10, flexDirection: "row", alignItems: "flex-start" },
+  active: { backgroundColor: colors.zinc[100] },
+});