@lotics/ui 2.4.1 → 2.5.0

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];
   }

package/src/timeline.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useCallback, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { ActivityIndicator } from "./activity_indicator";
 import { AnimationFadeIn } from "./animation_fade_in";
-import { colors } from "./colors";
+import { colors, withAlpha } from "./colors";
 import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
@@ -10,9 +10,14 @@ import { Text } from "./text";
 export interface TimelineItem {
   id: string;
   icon: IconName;
+  /** Accent for the node — a palette hex (e.g. colors.blue[600]). The node
+   *  renders a tinted disc of this color; the icon takes the full color. */
   iconColor: string;
   isLoading?: boolean;
   label: string;
+  /** An always-visible sub-line under the label (a note, a detail). When set, the
+   *  row top-aligns so `right` sits next to the label, not centred on the block. */
+  description?: string;
   error?: string;
   right?: ReactNode;
   details?: ReactNode;
@@ -22,6 +27,12 @@ interface TimelineProps {
   items: TimelineItem[];
 }
 
+/**
+ * Vertical event log — tinted icon nodes on a hairline spine, one row per
+ * event. Rows are plain (no boxes — the spine provides the structure);
+ * a row becomes pressable only when it carries `details`, revealing them
+ * inline. For horizontal milestone progress use `Stepper`.
+ */
 export function Timeline(props: TimelineProps) {
   const { items } = props;
   const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
@@ -31,52 +42,56 @@ export function Timeline(props: TimelineProps) {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View>
       {items.map((item, index) => {
         const expanded = expandedIds[item.id] ?? false;
         const hasDetails = !!item.details;
 
+        const row = (
+          <View style={[styles.row, item.description ? styles.rowTop : null]}>
+            <View style={{ flex: 1, gap: 2 }}>
+              <Text size="sm">{item.label}</Text>
+              {item.description ? (
+                <Text size="xs" color="muted">{item.description}</Text>
+              ) : null}
+              {item.error ? (
+                <Text size="xs" color="danger" numberOfLines={1}>
+                  {item.error}
+                </Text>
+              ) : null}
+            </View>
+            {item.right}
+            {hasDetails ? (
+              <Icon name={expanded ? "chevron-up" : "chevron-down"} size={14} color={colors.zinc[400]} />
+            ) : null}
+          </View>
+        );
+
         return (
           <View key={item.id} style={styles.itemContainer}>
-            <View style={styles.timelineColumn}>
+            <View style={styles.spineColumn}>
               <AnimationFadeIn key={`${item.id}-${item.icon}`}>
-                <View style={[styles.iconContainer, { borderColor: item.iconColor }]}>
+                {/* Tinted disc: a low-alpha wash of the accent behind a full-color icon. */}
+                <View style={[styles.node, { backgroundColor: withAlpha(item.iconColor, 0.1) }]}>
                   {item.isLoading ? (
-                    <ActivityIndicator size={12} color={item.iconColor} />
+                    <ActivityIndicator size={13} color={item.iconColor} />
                   ) : (
-                    <Icon name={item.icon} size={12} color={item.iconColor} />
+                    <Icon name={item.icon} size={13} color={item.iconColor} />
                   )}
                 </View>
               </AnimationFadeIn>
-              {index < items.length - 1 && <View style={styles.line} />}
+              {index < items.length - 1 && <View style={styles.spine} />}
             </View>
 
             <View style={styles.contentColumn}>
-              <PressableHighlight
-                onPress={hasDetails ? () => toggleItem(item.id) : undefined}
-                style={styles.itemHeader}
-              >
-                <View style={{ flex: 1 }}>
-                  <Text size="sm">{item.label}</Text>
-                  {item.error && (
-                    <Text size="xs" color="danger" numberOfLines={1}>
-                      {item.error}
-                    </Text>
-                  )}
-                </View>
-                {item.right}
-                {hasDetails && (
-                  <Icon
-                    name={expanded ? "chevron-up" : "chevron-down"}
-                    size={14}
-                    color={colors.zinc[500]}
-                  />
-                )}
-              </PressableHighlight>
-
-              {expanded && item.details && (
-                <View style={styles.detailsContainer}>{item.details}</View>
+              {hasDetails ? (
+                <PressableHighlight onPress={() => toggleItem(item.id)} style={styles.pressableRow}>
+                  {row}
+                </PressableHighlight>
+              ) : (
+                <View style={styles.plainRow}>{row}</View>
               )}
+              {expanded && item.details ? <View style={styles.detailsContainer}>{item.details}</View> : null}
             </View>
           </View>
         );
@@ -86,50 +101,68 @@ export function Timeline(props: TimelineProps) {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    gap: 0,
-  },
   itemContainer: {
     flexDirection: "row",
-    gap: 8,
+    gap: 12,
   },
-  timelineColumn: {
-    width: 16,
+  spineColumn: {
+    width: 24,
     alignItems: "center",
+    // Align the node with the FIRST line of content (not the centre of a
+    // multi-line block), so the spine reads as connected.
+    paddingTop: 2,
   },
-  iconContainer: {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    borderWidth: 1,
+  node: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: colors.white,
   },
-  line: {
-    width: 1,
+  spine: {
+    width: 1.5,
     flex: 1,
-    minHeight: 24,
-    backgroundColor: colors.zinc[300],
-    marginTop: 4,
+    minHeight: 12,
+    borderRadius: 1,
+    backgroundColor: colors.zinc[200],
+    marginVertical: 3,
   },
   contentColumn: {
     flex: 1,
-    gap: 8,
+    paddingBottom: 14,
   },
-  itemHeader: {
+  row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
-    borderWidth: 1,
-    borderColor: colors.zinc[200],
+    gap: 10,
+    flex: 1,
+  },
+  // With a description the row is taller than one line — top-align so the
+  // timestamp (`right`) sits beside the label instead of centred on the block.
+  rowTop: {
+    alignItems: "flex-start",
+  },
+  // The press target for expandable rows; pressable rows bleed the hover wash
+  // past the text column. paddingVertical pairs with the spineColumn paddingTop
+  // so the node lines up with the first line.
+  pressableRow: {
     borderRadius: 8,
-    backgroundColor: colors.white,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    marginHorizontal: -8,
+    minHeight: 28,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  plainRow: {
+    paddingVertical: 4,
+    minHeight: 28,
+    flexDirection: "row",
+    alignItems: "center",
   },
   detailsContainer: {
     gap: 8,
-    paddingLeft: 4,
+    paddingTop: 8,
+    paddingLeft: 2,
   },
 });

package/src/trend_footer.tsx

@@ -20,7 +20,7 @@ interface TrendFooterProps {
 
 /**
  * Footer caption that pairs the shadcn TrendingUp icon with a directional
- * Vietnamese sentence — the "Tăng X% so với tháng trước" pattern at the
+ * sentence — the "Up X% vs last month" pattern at the
  * bottom of every chart card on Stripe, Mercury, Linear.
  *
  * Goes inside `<SectionCard footer={...} />`. The Card adds the hairline
@@ -38,7 +38,7 @@ export function TrendFooter(props: TrendFooterProps) {
       <View style={styles.row}>
         <Icon size={16} color={color} />
         <Text size="sm" weight="medium" style={{ color }}>
-          {up ? "Tăng" : "Giảm"} {Math.abs(value)}% {periodLabel}
+          {up ? "Up" : "Down"} {Math.abs(value)}% {periodLabel}
         </Text>
       </View>
       {detail && (