@lotics/ui 2.4.0 → 2.5.0

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

package/src/alert_row.tsx

@@ -1,81 +0,0 @@
-import { type ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { Text } from "./text";
-import { Metric, type MetricSize, type MetricTone } from "./metric";
-import { colors } from "./colors";
-import { SPACE } from "./spacing";
-
-interface AlertRowProps {
-  /** Leading icon (lucide-react `<AlertCircle />`, `<CheckCircle2 />`, etc.).
-   * Sized 18px in the host. Caller controls color so different severities
-   * can use different palettes. */
-  icon: ReactNode;
-  label: string;
-  /** The count or quantity. `null` while loading → renders as `emptyLabel`. */
-  count: number | string | null;
-  /** Small text below the count — unit ("Hồ sơ"), amount caption
-   * ("12.000.000 đ"), or short hint. */
-  hint?: string;
-  /** Number size. Default `lg` keeps the row scannable; `md` for denser
-   * lists where many rows compete. */
-  size?: MetricSize;
-  /** Auto-set: non-zero count = danger (red), zero = default. Override for
-   * status semantics (e.g., when down is good). */
-  tone?: MetricTone;
-  /** Suppress the bottom hairline. Set on the last row of a list. */
-  last?: boolean;
-}
-
-/**
- * One row of a prioritized action list — icon + label on the left, count
- * + hint on the right. The Mercury / Linear "needs attention" pattern.
- *
- * Layout enforces two-column rhythm: left side flex-grows with the label,
- * right side is fixed-width and right-aligned. Without enforcement, rows
- * drift into "label centered, count floating left of right edge" which
- * makes the list unscannable.
- */
-export function AlertRow(props: AlertRowProps) {
-  const { icon, label, count, hint, size = "lg", tone, last } = props;
-  const hasIssue = typeof count === "number" && count > 0;
-  const resolvedTone: MetricTone = tone ?? (hasIssue ? "danger" : "default");
-  return (
-    <View style={[styles.row, !last && styles.divider]}>
-      <View style={styles.leftCol}>
-        {icon}
-        <Text size="sm">{label}</Text>
-      </View>
-      <View style={styles.rightCol}>
-        <Metric value={count} size={size} tone={resolvedTone} />
-        {hint && (
-          <Text size="xs" color="muted">
-            {hint}
-          </Text>
-        )}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: SPACE.md,
-  },
-  divider: {
-    borderBottomWidth: 1,
-    borderBottomColor: colors.zinc[100],
-  },
-  leftCol: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.md,
-    flex: 1,
-  },
-  rightCol: {
-    alignItems: "flex-end",
-    minWidth: 100,
-  },
-});

package/src/table.web.tsx

@@ -1,235 +0,0 @@
-import { CSSProperties, Fragment, useState } from "react";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { colors } from "./colors";
-import type { Column, TableProps } from "./table_types";
-
-export type { SortDir, TableSort, Column, TableProps } from "./table_types";
-
-// Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
-// can legally contain interactive controls: the row is a <div role="row">, never
-// a <button>. A row click toggles expansion EXCEPT when it lands on an actual
-// interactive element — those keep their own behaviour. This is the web mirror of
-// RN's responder model (the innermost control wins): only the control suppresses
-// the toggle, so empty space anywhere in the row — including around a control in a
-// wide action column — still expands. No stopPropagation, no nested <button>, no
-// absolute overlay, no dead zones. The detail panel renders full-width below.
-
-const CHEVRON_W = 44;
-
-// Clicks landing on (or inside) one of these keep their own behaviour instead of
-// toggling the row — the standard interactive HTML tags + ARIA interactive roles,
-// plus an explicit [data-interactive] escape hatch for a non-element control.
-const INTERACTIVE_SELECTOR =
-  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="tab"], [role="slider"], [role="spinbutton"], [contenteditable="true"], [data-interactive]';
-
-function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
-  return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
-}
-
-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 [hoverKey, setHoverKey] = useState<string | null>(null);
-  const expanded = expandedKeys ?? internal;
-  const expandable = !!renderDetail;
-  // A row reacts to clicks for one of two reasons: expansion (renderDetail) or
-  // selection (onRowPress). Expansion wins if both are set.
-  const pressable = expandable || !!onRowPress;
-
-  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;
-      });
-    }
-  };
-
-  const visibleRows = rows.filter((r): r is TRow => Boolean(r));
-
-  return (
-    <div style={containerStyle} role="table">
-      {/* Header */}
-      <div style={headerRowStyle} role="row">
-        {columns.map((col) => {
-          const sortable = col.sortable && !!onSortChange;
-          const active = sort?.key === col.key;
-          const style: CSSProperties = {
-            ...headerCellStyle,
-            ...colWidth(col),
-            justifyContent: col.align === "right" ? "flex-end" : "flex-start",
-            cursor: sortable ? "pointer" : "default",
-          };
-          const inner = (
-            <>
-              <Text size="xs" weight="medium" color="muted" numberOfLines={1} userSelect="none" transform="uppercase">
-                {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}
-            </>
-          );
-          return sortable ? (
-            <div
-              key={col.key as string}
-              role="columnheader"
-              aria-sort={active ? (sort?.dir === "asc" ? "ascending" : "descending") : undefined}
-              tabIndex={0}
-              onClick={() => onSortChange?.(col.key)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onSortChange?.(col.key);
-                }
-              }}
-              style={style}
-            >
-              {inner}
-            </div>
-          ) : (
-            <div key={col.key as string} role="columnheader" style={style}>
-              {inner}
-            </div>
-          );
-        })}
-        {expandable ? <div style={{ width: CHEVRON_W, flexShrink: 0 }} /> : null}
-      </div>
-
-      {/* Body */}
-      {visibleRows.map((row, i) => {
-        const key = rowKey ? String(row[rowKey]) : String(i);
-        const isOpen = expanded.has(key);
-        const extra = (rowStyle?.(row) as CSSProperties | undefined) ?? undefined;
-        const rowStyleFinal: CSSProperties = {
-          ...bodyRowStyle,
-          cursor: pressable ? "pointer" : "default",
-          background: hoverKey === key && pressable ? colors.zinc[50] : colors.white,
-          ...extra,
-        };
-        return (
-          <Fragment key={key}>
-            <div
-              role="row"
-              onClick={
-                pressable
-                  ? (e: React.MouseEvent) => {
-                      // Whole-row click acts (expand or select), EXCEPT when it lands on an
-                      // actual interactive element — those keep their own behaviour. The
-                      // disclosure chevron is the keyboard/AT affordance for expansion.
-                      if ((e.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
-                      if (expandable) toggle(key, row);
-                      else onRowPress?.(row);
-                    }
-                  : undefined
-              }
-              onMouseEnter={pressable ? () => setHoverKey(key) : undefined}
-              onMouseLeave={pressable ? () => setHoverKey((k) => (k === key ? null : k)) : undefined}
-              style={rowStyleFinal}
-            >
-              {columns.map((col) => (
-                <div
-                  key={col.key as string}
-                  role="cell"
-                  style={{
-                    ...bodyCellStyle,
-                    ...colWidth(col),
-                    alignItems: col.align === "right" ? "flex-end" : "flex-start",
-                  }}
-                >
-                  {col.renderCell ? (
-                    col.renderCell({ row, column: col })
-                  ) : (
-                    <Text numberOfLines={1}>{row[col.key] != null ? String(row[col.key]) : ""}</Text>
-                  )}
-                </div>
-              ))}
-              {expandable ? (
-                <button
-                  type="button"
-                  data-interactive
-                  aria-expanded={isOpen}
-                  aria-label={isOpen ? "Collapse row" : "Expand row"}
-                  onClick={() => toggle(key, row)}
-                  style={chevronButtonStyle}
-                >
-                  <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
-                </button>
-              ) : null}
-            </div>
-            {expandable && isOpen ? (
-              <div role="row" style={detailRowStyle}>
-                <div role="cell" style={detailCellStyle}>
-                  {renderDetail!(row)}
-                </div>
-              </div>
-            ) : null}
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-}
-
-// `maxHeight: 100%` is a no-op in a content-sized parent (a card grows to its
-// rows) but caps the table to a bounded parent (a modal's flex region), so
-// `overflow: auto` then scrolls and the sticky header engages.
-const containerStyle: CSSProperties = { width: "100%", maxHeight: "100%", overflow: "auto" };
-const headerRowStyle: CSSProperties = {
-  display: "flex",
-  position: "sticky",
-  top: 0,
-  zIndex: 1,
-  background: colors.white,
-  borderBottom: `1px solid ${colors.border}`,
-};
-const headerCellStyle: CSSProperties = {
-  minHeight: 40,
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: 4,
-  padding: "10px 12px",
-  boxSizing: "border-box",
-};
-const bodyRowStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "stretch",
-  borderBottom: `1px solid ${colors.border}`,
-};
-const bodyCellStyle: CSSProperties = {
-  minHeight: 44,
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  padding: 12,
-  boxSizing: "border-box",
-};
-const chevronButtonStyle: CSSProperties = {
-  width: CHEVRON_W,
-  flexShrink: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  background: "transparent",
-  border: "none",
-  padding: 0,
-  cursor: "pointer",
-};
-const detailRowStyle: CSSProperties = {
-  background: colors.zinc[50],
-  borderBottom: `1px solid ${colors.border}`,
-};
-const detailCellStyle: CSSProperties = {
-  padding: "4px 16px 18px",
-  width: "100%",
-  boxSizing: "border-box",
-};