@lotics/ui 1.6.0 → 1.8.0

package/src/trend_chip.tsx

@@ -0,0 +1,65 @@
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+export interface TrendChipProps {
+  /**
+   * Percent delta vs comparator. Positive = up, negative = down, 0 = flat.
+   * Convention: signed. `value={12}` → "↑ 12%". `value={-5}` → "↓ 5%".
+   */
+  value: number;
+  /**
+   * Semantic override. By default, up = good (green) and down = bad (red).
+   * For metrics where down is good (e.g. response time, error rate), pass
+   * `goodDirection="down"` to flip the colors without changing the arrow.
+   */
+  goodDirection?: "up" | "down";
+}
+
+/**
+ * Inline ±% chip that sits next to a metric. Answers "is this good?" — the
+ * single most common missing piece on dashboards that show only "what".
+ * Stripe, Mercury, Linear all ship this pattern.
+ *
+ * Color logic: trend direction × goodDirection. Up + good="up" = green.
+ * Up + good="down" = red. Symmetric for down. Flat = neutral.
+ */
+export function TrendChip(props: TrendChipProps) {
+  const { value, goodDirection = "up" } = props;
+
+  const direction = value > 0 ? "up" : value < 0 ? "down" : "flat";
+  const arrow = direction === "up" ? "↑" : direction === "down" ? "↓" : "→";
+
+  const isGood =
+    direction === "flat"
+      ? null
+      : (direction === "up" && goodDirection === "up") ||
+        (direction === "down" && goodDirection === "down");
+
+  const tone = isGood === null ? "neutral" : isGood ? "good" : "bad";
+
+  return (
+    <View style={[styles.chip, styles[`chip_${tone}`]]}>
+      <Text size="xs" weight="medium" style={styles[`text_${tone}`]}>
+        {arrow} {Math.abs(value)}%
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    alignSelf: "flex-start",
+  },
+  // Tinted backgrounds (50-shade) keep the chip readable + non-shouty.
+  // Pairs with same-hue 700-shade text → 4.5+ contrast.
+  chip_good: { backgroundColor: colors.green[50] },
+  chip_bad: { backgroundColor: colors.red[50] },
+  chip_neutral: { backgroundColor: colors.zinc[100] },
+  text_good: { color: colors.green[700] },
+  text_bad: { color: colors.red[700] },
+  text_neutral: { color: colors.zinc[600] },
+});

package/src/trend_footer.tsx

@@ -0,0 +1,56 @@
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { SPACE } from "./spacing";
+
+interface TrendFooterProps {
+  /** Signed percentage change. Positive = up, negative = down, 0 = no
+   * arrow. Caller is responsible for skipping the component entirely
+   * when there's no comparator (e.g., last-period base = 0). */
+  value: number;
+  /** Suffix after the percentage, e.g. "so với tháng trước". */
+  periodLabel: string;
+  /** Optional detail line below, e.g. "Tháng trước: 50.000.000 đ". */
+  detail?: string;
+  /** Override the up=green convention for metrics where down is good
+   * (response time, error rate). Defaults to `up`. */
+  goodDirection?: "up" | "down";
+}
+
+/**
+ * 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
+ * bottom of every chart card on Stripe, Mercury, Linear.
+ *
+ * Goes inside `<SectionCard footer={...} />`. The Card adds the hairline
+ * divider above; this component owns only the icon + text composition.
+ */
+export function TrendFooter(props: TrendFooterProps) {
+  const { value, periodLabel, detail, goodDirection = "up" } = props;
+  const up = value > 0;
+  const flat = value === 0;
+  const isGood = flat ? null : (up && goodDirection === "up") || (!up && goodDirection === "down");
+  const color = isGood === null ? colors.zinc[600] : isGood ? colors.green[700] : colors.red[700];
+  const Icon = up ? TrendingUp : TrendingDown;
+  return (
+    <View style={styles.container}>
+      <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}
+        </Text>
+      </View>
+      {detail && (
+        <Text size="xs" color="muted">
+          {detail}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { gap: SPACE.xs },
+  row: { flexDirection: "row", alignItems: "center", gap: SPACE.sm },
+});