@lotics/ui 2.4.0 → 2.5.0

package/src/step_progress.tsx

@@ -0,0 +1,145 @@
+import { View, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { useTooltip } from "./tooltip";
+
+export interface StepProgressProps {
+  /** The stages: pass the NAMES (enables the built-in "4/7 · In" caption
+   *  and per-segment hover names) or a bare count (bar only). */
+  steps: number | string[];
+  /** 0-based index of the stage in progress; earlier segments render
+   *  complete. Pass -1 for "not started", `steps.length` for "complete". */
+  current: number;
+  /** Accent for the completed/current segments. Defaults to the neutral
+   *  ink — pass a brand color to theme it. */
+  color?: string;
+  /** What this progress measures ("Production stages") — adds the xs muted
+   *  uppercase eyebrow row above the bar, caption right. Omit at card
+   *  density where the context already names it. */
+  title?: string;
+  /** Caption override for when the current stage needs prose ("In production") instead of the derived "3/6 · SX". */
+  label?: string;
+  /** Tone for the caption — `danger` flags a stalled/overdue stage (a stuck
+   *  production order) in the FIXED caption spot, so the bar stays consistent
+   *  instead of a floating badge shifting it. */
+  captionTone?: "default" | "danger";
+  /** Put the caption on its OWN line below a full-width bar (vs the default
+   *  inline-right, which lets a varying caption shrink the bar). The compact,
+   *  consistent card/drawer layout — no eyebrow, the bar never shifts. */
+  captionBelow?: boolean;
+  /** Segment height. Default 10 — matches ProgressBar's track; thinner reads
+   *  weak. */
+  height?: number;
+  accessibilityLabel?: string;
+}
+
+/**
+ * THE compact stage indicator — N equal segments filled through the current
+ * stage, with a built-in "4/7 · In" caption when stages are named (hovering
+ * a segment names it). For *countable* stages an item walks through (a
+ * production line, a checklist, a pipeline) shown at card/list density.
+ *
+ * Picking a bar: continuous value-vs-max → `ProgressBar`; weighted
+ * composition/funnel → `StackedProgressBar`; a full-width wizard header
+ * where every milestone label must be visible → `Stepper`; everything
+ * stage-countable at card density → this.
+ */
+export function StepProgress(props: StepProgressProps) {
+  const { steps, current, color = colors.zinc[900], title, label, captionTone = "default", captionBelow = false, height = 10, accessibilityLabel } = props;
+  const captionColor = captionTone === "danger" ? "danger" : "muted";
+  const names = typeof steps === "number" ? null : steps;
+  const count = Math.max(1, typeof steps === "number" ? steps : steps.length);
+  const isComplete = current >= count;
+  const safe = Math.min(current, count - 1);
+  const caption =
+    label ??
+    (names
+      ? isComplete
+        ? `${count}/${count} · Complete`
+        : `${Math.max(0, safe + 1)}/${count}${safe >= 0 ? ` · ${names[safe]}` : ""}`
+      : undefined);
+
+  const bar = (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? caption ?? `${Math.max(0, safe + 1)} of ${count}`}
+      style={{ flexDirection: "row", gap: 3, flex: 1 }}
+    >
+      {Array.from({ length: count }, (_, i) => (
+        <Segment
+          key={i}
+          name={names?.[i]}
+          color={color}
+          height={height}
+          // Complete settles ALL segments solid — "finished" reads as
+          // accomplished, not faded.
+          done={i < safe}
+          isCurrent={isComplete || (i === safe && safe >= 0)}
+        />
+      ))}
+    </View>
+  );
+
+  if (title) {
+    return (
+      <View style={{ gap: 6, flex: 1 }}>
+        <View style={{ flexDirection: "row", alignItems: "baseline", gap: 12 }}>
+          <Text size="xs" color="muted" transform="uppercase">
+            {title}
+          </Text>
+          <View style={{ flex: 1 }} />
+          {caption ? (
+            <Text size="xs" color={captionColor} weight={captionTone === "danger" ? "medium" : "regular"} tabular>
+              {caption}
+            </Text>
+          ) : null}
+        </View>
+        {bar}
+      </View>
+    );
+  }
+
+  if (!caption) return bar;
+  if (captionBelow) {
+    return (
+      <View style={{ gap: 6, flex: 1 }}>
+        {bar}
+        <Text size="xs" color={captionColor} weight={captionTone === "danger" ? "medium" : "regular"} tabular>
+          {caption}
+        </Text>
+      </View>
+    );
+  }
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 10, flex: 1 }}>
+      {bar}
+      <Text size="xs" color={captionColor} weight={captionTone === "danger" ? "medium" : "regular"} tabular>
+        {caption}
+      </Text>
+    </View>
+  );
+}
+
+function Segment(props: { name?: string; color: string; height: number; done: boolean; isCurrent: boolean }) {
+  const { name, color, height, done, isCurrent } = props;
+  // Hovering a segment names its stage — the bar stays self-explanatory
+  // even where the caption is elided. No-ops without a TooltipProvider.
+  const tooltip = useTooltip(name);
+  return (
+    <View
+      {...tooltip}
+      style={{
+        flex: 1,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: done || isCurrent ? color : colors.zinc[100],
+        opacity: done && !isCurrent ? 0.4 : 1,
+        ...(done || isCurrent
+          ? null
+          : ({ boxShadow: "inset 0 0 0 1px rgba(38,38,38,0.04)" } as ViewStyle)),
+        // Progress that snaps is dead; progress that moves is alive.
+        ...({ transition: "background-color 200ms ease-out, opacity 200ms ease-out" } as ViewStyle),
+      }}
+    />
+  );
+}

package/src/stepper.tsx

@@ -23,18 +23,23 @@ function statusOf(index: number, current: number): StepStatus {
 }
 
 /**
- * Horizontal step / status tracker — a row of milestones with completed,
- * current, and upcoming states and a connecting track. For a vertical event
- * log use `Timeline` instead.
+ * Full-width wizard/milestone header — a row of labeled milestones with
+ * completed, current, and upcoming states and a connecting track. Every
+ * label is visible; use it where the journey itself is the headline (a
+ * record detail, a checkout). At card/list density use `StepProgress`
+ * (segments + built-in caption) instead. For a vertical event log use
+ * `Timeline`.
  */
 export function Stepper(props: StepperProps) {
   const { steps, current, color = colors.zinc[900], accessibilityLabel } = props;
   const last = steps.length - 1;
   const safe = Math.max(0, Math.min(current, last));
+  const a11y = accessibilityLabel ?? `Step ${safe + 1} of ${steps.length}: ${steps[safe] ?? ""}`;
+
   return (
     <View
       accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel ?? `Step ${safe + 1} of ${steps.length}: ${steps[safe] ?? ""}`}
+      accessibilityLabel={a11y}
       style={{ flexDirection: "row" }}
     >
       {steps.map((label, i) => {

package/src/table.tsx

@@ -1,125 +1,181 @@
-import { Fragment, useState } from "react";
-import { Pressable, ScrollView, View, StyleSheet } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { Icon } from "@lotics/ui/icon";
-import { colors } from "@lotics/ui/colors";
-import type { Column, TableProps } from "./table_types";
+import {
+  createContext,
+  useContext,
+  Children,
+  cloneElement,
+  isValidElement,
+  type ReactNode,
+  type ReactElement,
+} from "react";
+import { StyleSheet, View, Pressable, type ViewStyle } from "react-native";
+import { Text } from "./text";
+import { Divider } from "./divider";
+import { PressableRow } from "./pressable_row";
+import { SortHeader, type SortState } from "./sort_header";
 
-export type { SortDir, TableSort, Column, TableProps } from "./table_types";
-
-// Native table. RN primitives; a click-to-expand row is a Pressable whose
-// `interactive` cells are their own Pressables — RN's responder system grants the
-// press to the innermost responder, so an action cell never toggles the row (the
-// web DOM-nesting concern doesn't exist here). The detail panel renders below.
+/**
+ * One column of a register — its width/flex/align/label/sortability defined ONCE,
+ * here, instead of being re-typed in the header band AND every row.
+ */
+export interface TableColumn {
+  /** Stable id — also the `sortKey` when `sortable`. */
+  key: string;
+  /** Header label (uppercase eyebrow). Omit for a control column (a trailing ⋯). */
+  label?: string;
+  /** Fixed width in px; omit for a flexible column. */
+  width?: number;
+  /** Flex grow when no `width` (default 1). */
+  flex?: number;
+  align?: "left" | "right";
+  sortable?: boolean;
+}
 
-const stickyHeader = [0];
-const CHEVRON_W = 44;
+interface TableCtx {
+  columns: TableColumn[];
+  leading: number;
+  trailing: number;
+}
+const TableContext = createContext<TableCtx | null>(null);
 
-export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow, onRowPress } = props;
-  const [internal, setInternal] = useState<Set<string>>(() => new Set());
-  const expanded = expandedKeys ?? internal;
-  const expandable = !!renderDetail;
+function colStyle(col: TableColumn): ViewStyle {
+  const base: ViewStyle =
+    col.width != null ? { width: col.width } : { flex: col.flex ?? 1, minWidth: 0 };
+  if (col.align === "right") base.alignItems = "flex-end";
+  return base;
+}
 
-  const toggle = (key: string, row: TRow) => {
-    onToggleRow?.(key, row);
-    if (expandedKeys === undefined) {
-      setInternal((prev) => {
-        const next = new Set(prev);
-        if (next.has(key)) next.delete(key);
-        else next.add(key);
-        return next;
-      });
-    }
-  };
+export interface TableProps {
+  /** The single source of column layout — shared by the header AND every cell. */
+  columns: TableColumn[];
+  sort?: SortState | null;
+  /** Cycles the sort (none→asc→desc→none) — pair with `cycleSort` in the parent. */
+  onSort?: (key: string) => void;
+  /** Reserve a leading gutter (px) for rows that render a `leading` slot (a checkbox). */
+  leading?: number;
+  /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
+  trailing?: number;
+  /** The `TableRow`s. */
+  children: ReactNode;
+}
 
-  const cellWidth = (col: Column<TRow>) => (col.width ? { width: col.width } : styles.flexColumn);
+/**
+ * THE columnar register — define `columns` once and the header band + every row's
+ * cell widths come from it, so they can't drift (no hand-rolled `W` map, no
+ * `<View style={{width}}>` per cell). Renders a full-bleed eyebrow header (a
+ * sortable column becomes a `SortHeader`) and its `TableRow` children,
+ * `Divider`-separated. Compose `TableRow` / `TableCell` for the body. For a
+ * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
+ */
+export function Table(props: TableProps) {
+  const { columns, sort, onSort, leading = 0, trailing = 0, children } = props;
+  const rows = Children.toArray(children).filter(isValidElement);
 
   return (
-    <ScrollView style={styles.container} stickyHeaderIndices={stickyHeader}>
-      <View style={styles.headerRow}>
-        {columns.map((col) => {
-          const sortable = col.sortable && !!onSortChange;
-          const active = sort?.key === col.key;
-          const cellStyle = [cellWidth(col), styles.headerCell, col.align === "right" ? styles.alignEnd : null];
-          const inner = (
-            <View style={styles.headerInner}>
-              <Text size="xs" weight="medium" color="muted" transform="uppercase" numberOfLines={1} userSelect="none">
-                {col.label}
-              </Text>
-              {sortable ? (
-                <Icon
-                  name={active ? (sort?.dir === "asc" ? "chevron-up" : "chevron-down") : "chevrons-up-down"}
-                  size={14}
-                  color={active ? colors.zinc[700] : colors.zinc[400]}
-                />
-              ) : null}
-            </View>
-          );
-          return sortable ? (
-            <Pressable key={col.key as string} accessibilityRole="button" accessibilityLabel={`Sắp xếp theo ${col.label}`} onPress={() => onSortChange?.(col.key)} style={cellStyle}>
-              {inner}
-            </Pressable>
-          ) : (
-            <View key={col.key as string} style={cellStyle}>
-              {inner}
-            </View>
-          );
-        })}
-        {expandable ? <View style={{ width: CHEVRON_W }} /> : null}
-      </View>
-      {rows.filter((r): r is TRow => Boolean(r)).map((row, i) => {
-        const key = rowKey ? String(row[rowKey]) : String(i);
-        const isOpen = expanded.has(key);
-        const extra = rowStyle?.(row);
-        const cells = columns.map((col) => (
-          <View key={col.key as string} style={[cellWidth(col), styles.bodyCell, col.align === "right" ? styles.alignEnd : null]}>
-            {col.renderCell ? col.renderCell({ row, column: col }) : <Text numberOfLines={1}>{row[col.key] != null ? String(row[col.key]) : ""}</Text>}
+    <TableContext.Provider value={{ columns, leading, trailing }}>
+      <View style={styles.headerBand}>
+        {leading > 0 ? <View style={{ width: leading }} /> : null}
+        {columns.map((col) => (
+          <View key={col.key} style={colStyle(col)}>
+            {col.label ? (
+              col.sortable && onSort ? (
+                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} />
+              ) : (
+                <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
+                  {col.label}
+                </Text>
+              )
+            ) : null}
           </View>
-        ));
-        return (
-          <Fragment key={key}>
-            {expandable ? (
-              <Pressable
-                accessibilityRole="button"
-                accessibilityState={{ expanded: isOpen }}
-                onPress={() => toggle(key, row)}
-                style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extra]}
-              >
-                {cells}
-                <View style={styles.chevron}>
-                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
-                </View>
-              </Pressable>
-            ) : onRowPress ? (
-              <Pressable
-                accessibilityRole="button"
-                onPress={() => onRowPress(row)}
-                style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extra]}
-              >
-                {cells}
-              </Pressable>
-            ) : (
-              <View style={[styles.bodyRow, extra]}>{cells}</View>
-            )}
-            {expandable && isOpen ? <View style={styles.detail}>{renderDetail!(row)}</View> : null}
-          </Fragment>
-        );
-      })}
-    </ScrollView>
+        ))}
+        {trailing > 0 ? <View style={{ width: trailing }} /> : null}
+      </View>
+      {rows.map((row, i) => (
+        <View key={(row as ReactElement).key ?? i}>
+          <Divider />
+          {row}
+        </View>
+      ))}
+    </TableContext.Provider>
   );
 }
 
+export interface TableRowProps {
+  /** Opens the record (the drawer). The door + the full-row surface both call it. */
+  onPress?: () => void;
+  selected?: boolean;
+  /** Accessible name for the door (the keyboard-focusable open target). */
+  accessibilityLabel?: string;
+  /** Outside the door, BEFORE the cells (a selection checkbox) — width = Table `leading`. */
+  leading?: ReactNode;
+  /** Outside the door, AFTER the cells (a ⋯ menu / a button) — width = Table `trailing`. */
+  trailing?: ReactNode;
+  /** Min row height. Default 52. */
+  minHeight?: number;
+  /** The `TableCell`s, one per column, in column order. */
+  children: ReactNode;
+}
+
+/**
+ * A register row: a full-bleed `PressableRow` (its hover wash spans the whole row,
+ * incl. the leading/trailing controls) wrapping the door — an inner
+ * `role="button"` `Pressable` (the keyboard-accessible open) around the cells —
+ * with optional `leading`/`trailing` slots OUTSIDE the door so their own presses
+ * win. Cells map to `Table`'s columns by position.
+ */
+export function TableRow(props: TableRowProps) {
+  const { onPress, selected, accessibilityLabel, leading, trailing, minHeight = 52, children } = props;
+  const ctx = useContext(TableContext);
+  if (!ctx) throw new Error("TableRow must be used within a Table");
+
+  const cells = (Children.toArray(children).filter(isValidElement) as ReactElement<TableCellProps>[]).map(
+    (cell, i) => cloneElement(cell, { _column: ctx.columns[i] }),
+  );
+
+  return (
+    <PressableRow onPress={onPress ?? noop} selected={selected} style={styles.row}>
+      {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
+      <Pressable
+        accessibilityRole={onPress ? "button" : undefined}
+        accessibilityLabel={accessibilityLabel}
+        onPress={onPress}
+        style={[styles.door, { minHeight }]}
+      >
+        {cells}
+      </Pressable>
+      {ctx.trailing > 0 ? <View style={{ width: ctx.trailing, alignItems: "flex-end" }}>{trailing}</View> : null}
+    </PressableRow>
+  );
+}
+
+export interface TableCellProps {
+  children: ReactNode;
+  /** @internal — injected by `TableRow` from the column at this cell's position. */
+  _column?: TableColumn;
+}
+
+/** One cell — its width/align come from the column `TableRow` injects by position. */
+export function TableCell(props: TableCellProps) {
+  const { children, _column } = props;
+  return <View style={_column ? colStyle(_column) : undefined}>{children}</View>;
+}
+
+const noop = () => {};
+
 const styles = StyleSheet.create({
-  container: { flex: 1, marginHorizontal: -8 },
-  headerRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, backgroundColor: colors.white },
-  headerCell: { minHeight: 40, justifyContent: "center", paddingHorizontal: 12, paddingVertical: 10 },
-  headerInner: { flexDirection: "row", alignItems: "center", gap: 4 },
-  bodyRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border, alignItems: "stretch", backgroundColor: colors.white },
-  rowPressed: { backgroundColor: colors.zinc[50] },
-  bodyCell: { minHeight: 44, justifyContent: "center", paddingHorizontal: 12, paddingVertical: 12 },
-  chevron: { width: CHEVRON_W, alignItems: "center", justifyContent: "center" },
-  detail: { paddingHorizontal: 16, paddingTop: 4, paddingBottom: 18, backgroundColor: colors.zinc[50], borderBottomWidth: 1, borderBottomColor: colors.border },
-  alignEnd: { alignItems: "flex-end" },
-  flexColumn: { flex: 1 },
+  headerBand: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+  },
+  row: {
+    gap: 14,
+  },
+  door: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+  },
 });

package/src/text.tsx

@@ -20,6 +20,12 @@ export interface TextProps {
   userSelect?: TextUserSelect;
   transform?: TextTransform;
   decoration?: TextDecorationLine;
+  /**
+   * Fixed-width (tabular) numerals. Set on every free-standing numeral —
+   * table cells, counts, money, dates — so digits align across rows and
+   * columns instead of jittering on proportional glyphs.
+   */
+  tabular?: boolean;
   style?: RNTextProps["style"];
   onPress?: () => void;
   /** ID used to target this element from `accessibilityLabelledBy` / `aria-describedby`. */
@@ -62,6 +68,7 @@ export function Text(props: TextProps) {
     weight = "regular",
     numberOfLines,
     decoration,
+    tabular,
     transform,
     onPress,
     style,
@@ -99,6 +106,7 @@ export function Text(props: TextProps) {
         styles[userSelect],
         styles[align],
         decoration && styles[decoration],
+        tabular && styles.tabular,
         transform && styles[transform],
         style,
       ]}
@@ -186,9 +194,16 @@ const styles = StyleSheet.create({
     userSelect: "none",
   },
 
+  tabular: {
+    fontVariant: ["tabular-nums"],
+  },
+
   // Text transform styles
   uppercase: {
     textTransform: "uppercase",
+    // Uppercase needs positive tracking to read as designed, not shouted —
+    // the standard micro-cap/eyebrow treatment (stat labels, column headers).
+    letterSpacing: 0.6,
   },
   lowercase: {
     textTransform: "lowercase",

package/src/text_utils.ts

@@ -6,6 +6,8 @@ export type TextColor =
   | "muted"
   | "inverted"
   | "danger"
+  | "warning"
+  | "success"
   | "zinc-900"
   | "zinc-700"
   | "zinc-500";
@@ -24,8 +26,16 @@ export function getTextColor(color?: TextColor): string {
       return colors.zinc["500"];
     case "inverted":
       return colors.white;
+    // Valence set — the lightest status weight: a state WORD whose meaning is in
+    // the word, colored for reinforcement (never color-only). Red sits darker at
+    // 900; green/amber use 700 to stay recognizably their hue while clearing AA on
+    // white (600 would fail).
     case "danger":
       return colors.red["900"];
+    case "warning":
+      return colors.amber["700"];
+    case "success":
+      return colors.emerald["700"];
     default:
       return colors.zinc[900];
   }