@lotics/ui 9.0.0 → 11.0.0

package/src/locale.tsx

@@ -45,6 +45,8 @@ export interface LoticsLocale {
   sectionHeading: { info: string };
   /** `Chip`: the ✕ default name when no `dismissTooltip` is given. */
   chip: { remove: string };
+  /** `TrendFooter`: the direction words of the trend sentence. */
+  trendFooter: { up: string; down: string };
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
@@ -105,6 +107,7 @@ export const en: LoticsLocale = {
   ledger: { rowDetails: (label) => `${label} details` },
   sectionHeading: { info: "About this data" },
   chip: { remove: "Remove" },
+  trendFooter: { up: "Up", down: "Down" },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
@@ -181,6 +184,7 @@ export const vi: LoticsLocale = {
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },
   chip: { remove: "Xóa" },
+  trendFooter: { up: "Tăng", down: "Giảm" },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {

package/src/page_content.tsx

@@ -84,7 +84,7 @@ export function PageContent(props: PageContentProps) {
             }}
           >
             {!!title && (
-              <Text size="xl" weight="semibold">
+              <Text size="xxl" weight="semibold">
                 {title}
               </Text>
             )}

package/src/page_header.tsx

@@ -1,7 +1,6 @@
 import { View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { ReactNode } from "react";
-import { useScreenSize } from "@lotics/ui/use_screen_size";
 
 interface PageHeaderProps {
   title: string;
@@ -12,7 +11,6 @@ interface PageHeaderProps {
 
 export function PageHeader(props: PageHeaderProps) {
   const { title, description, left, right } = props;
-  const screenSize = useScreenSize();
 
   const hasNav = !!left || !!right;
 
@@ -24,12 +22,12 @@ export function PageHeader(props: PageHeaderProps) {
             {left}
             {right}
           </View>
-          <Text size="xl" weight="semibold">
+          <Text size="xxl" weight="semibold">
             {title}
           </Text>
         </>
       ) : (
-        <Text size="xl" weight="semibold">
+        <Text size="xxl" weight="semibold">
           {title}
         </Text>
       )}

package/src/popover_nav.tsx

@@ -1,4 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
+import { IconButton } from "./icon_button";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
 
 export interface PopoverNavContextValue {
   currentRoute: string;
@@ -30,3 +33,40 @@ export function PopoverScreen(props: PopoverScreenProps) {
 
   return <>{children}</>;
 }
+
+export interface PopoverNavHeaderProps {
+  title: string;
+  right?: ReactNode;
+  /** Accessible name for the back button. Default: "Back". Pass a translated string from the consumer. */
+  backLabel?: string;
+}
+
+/** The routed-popover title row: a back chevron auto-appears while `canGoBack`
+ *  (reads `usePopoverNav`), sm-medium title fills, `right` a trailing action.
+ *  Pairs with `PopoverScreen`. Distinct from `Popover`'s own plain
+ *  `PopoverHeader` children container. */
+export function PopoverNavHeader(props: PopoverNavHeaderProps) {
+  const { title, right, backLabel = "Back" } = props;
+  const { goBack, canGoBack } = usePopoverNav();
+
+  return (
+    <View style={navHeaderStyles.container}>
+      {canGoBack && (
+        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
+      )}
+      <Text size="sm" weight="medium" style={{ flex: 1 }}>
+        {title}
+      </Text>
+      {right}
+    </View>
+  );
+}
+
+const navHeaderStyles = StyleSheet.create({
+  container: {
+    paddingLeft: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

package/src/record_summary.tsx

@@ -47,7 +47,9 @@ export function RecordSummary(props: RecordSummaryProps) {
     <View style={styles.identityRow}>
         <View style={styles.identity}>
           <View style={styles.titleRow}>
-            <Text size="xl" weight="semibold" tabular level={level}>
+            {/* xxl — the `#` of the heading ramp (# xxl → ## xl section →
+                ### lg subsection); the identity always tops the outline */}
+            <Text size="xxl" weight="semibold" tabular level={level}>
               {title}
             </Text>
             {status ?? null}

package/src/ring_gauge.tsx

@@ -53,7 +53,7 @@ export function RingGauge(props: RingGaugeProps) {
             transform={`rotate(-90 ${center} ${center})`}
           />
         </svg>
-        <Text size="xxl" weight="semibold">
+        <Text size="xxxl" weight="semibold">
           {Math.round(clamped)}%
         </Text>
       </View>

package/src/section_heading.tsx

@@ -38,13 +38,72 @@ export interface SectionProps {
  */
 export function Section(props: SectionProps) {
   // gap 12 spaces the heading from its body. Space BETWEEN sections belongs to
-  // the page column: flat record/form pages use `gap: 32` on the content column
-  // with a bare `Divider` BETWEEN sections (never under the heading — the
-  // heading belongs to its content; the hairline separates it from the LAST
-  // section).
+  // the page column (`SectionStack`, 56 + hairline); a body of `Subsection`
+  // groups divides via a nested `SubsectionStack` (24 + hairline) —
+  // never a hairline directly under the heading (it belongs to its content).
   return <View style={[{ gap: 12 }, props.style]}>{props.children}</View>;
 }
 
+export interface SubsectionProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * One named group INSIDE a `Section` — the level below `Section` on a long
+ * record surface (`###` in the heading ramp). Compose a `SubsectionHeading`
+ * then the group's rows; sibling subsections stack in a `SubsectionStack`
+ * (24 + hairline between groups — no margins, no hand-rolled dividers). A
+ * headingless `Subsection` is fine for the section's lead group.
+ *
+ *   <Section>
+ *     <SectionHeading><SectionHeadingTitle>Delivery</SectionHeadingTitle></SectionHeading>
+ *     <SubsectionStack>
+ *       <Subsection>{lead rows}</Subsection>
+ *       <Subsection>
+ *         <SubsectionHeading><SubsectionHeadingTitle>Carrier</SubsectionHeadingTitle></SubsectionHeading>
+ *         {rows}
+ *       </Subsection>
+ *     </SubsectionStack>
+ *   </Section>
+ */
+export function Subsection(props: SubsectionProps) {
+  return <View style={[{ gap: 12 }, props.style]}>{props.children}</View>;
+}
+
+export interface SubsectionHeadingProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SubsectionHeading(props: SubsectionHeadingProps) {
+  return (
+    <View style={[{ flexDirection: "row", alignItems: "center", gap: 10 }, props.style]}>
+      {props.children}
+    </View>
+  );
+}
+
+export interface SubsectionHeadingTitleProps {
+  children: React.ReactNode;
+  /** Heading rank. Defaults to 3 — one level under `SectionHeadingTitle`'s 2. */
+  level?: HeadingLevel;
+}
+
+/** The subsection title — ALWAYS `###` (lg semibold), the fixed step under the
+ * xl section title and above the md/sm body. Grows to push siblings (a
+ * `SectionHeadingMeta`, a `Badge`, an action) to the right edge. */
+export function SubsectionHeadingTitle(props: SubsectionHeadingTitleProps) {
+  const { children, level = 3 } = props;
+  return (
+    <View style={{ flex: 1 }}>
+      <Text level={level} size="lg" weight="semibold">
+        {children}
+      </Text>
+    </View>
+  );
+}
+
 export interface SectionHeadingProps {
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
@@ -73,16 +132,18 @@ export interface SectionHeadingTitleProps {
   info?: string;
 }
 
-/** The title block — lg semibold (a section must announce itself; md blends
- * into control labels) + an optional muted `description` line. Grows to push
- * any sibling actions to the right edge. */
+/** The title block — ALWAYS `##` (xl semibold): the heading ramp is the fixed
+ * markdown ladder `#` xxl (`RecordSummary`/`PageHeader`) → `##` xl (section) →
+ * `###` lg (`SubsectionHeadingTitle`) over the sm body — no per-surface size
+ * knobs, one outline everywhere. Optional muted `description` line; grows to
+ * push any sibling actions to the right edge. */
 export function SectionHeadingTitle(props: SectionHeadingTitleProps) {
   const { children, description, icon, level = 2, weight = "semibold", info } = props;
   return (
     <View style={{ flex: 1, gap: 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-        {icon ? <Icon name={icon} size={18} /> : null}
-        <Text level={level} weight={weight} size="lg">
+        {icon ? <Icon name={icon} size={20} /> : null}
+        <Text level={level} weight={weight} size="xl">
           {children}
         </Text>
         {info ? <InfoPopover text={info} accessibilityLabel={useLoticsLocale().sectionHeading.info} /> : null}

package/src/section_stack.tsx

@@ -0,0 +1,67 @@
+import { Children, Fragment } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { Divider } from "./divider";
+
+interface StackProps {
+  children: React.ReactNode;
+  /** Hairline between blocks (default true). Turn off for a short surface
+   *  where the beat alone is enough. */
+  divided?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Interleave a hairline between the non-null blocks of a gap column. */
+function DividedStack({ children, divided = true, gap, style }: StackProps & { gap: number }) {
+  const blocks = Children.toArray(children); // drops null/undefined/false
+  return (
+    <View style={[{ gap }, style]}>
+      {blocks.map((block, i) => (
+        // Children.toArray keys are stable for conditional lists; the fragment
+        // pairs each block with the hairline that separates it from the last.
+        <Fragment key={`sec_${i}`}>
+          {divided && i > 0 ? <Divider /> : null}
+          {block}
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+export type SectionStackProps = StackProps;
+
+/**
+ * The content column of a flat record/form page — it OWNS the between-section
+ * law: a fixed 56px beat with a hairline `Divider` between top-level blocks
+ * (never under a heading; the hairline separates a block from the PREVIOUS
+ * one). Null/false children are skipped, so a conditional section never
+ * leaves a stray hairline. No knobs — every flat page shares one rhythm.
+ *
+ *   <SectionStack>
+ *     {headerBand}
+ *     <Section>…</Section>
+ *     {canTransfer ? <Section>…</Section> : null}
+ *   </SectionStack>
+ */
+export function SectionStack(props: SectionStackProps) {
+  return <DividedStack {...props} gap={56} />;
+}
+
+export type SubsectionStackProps = StackProps;
+
+/**
+ * The divided stack of `Subsection` groups INSIDE a `Section` — the same
+ * hairline law one step tighter: a fixed 24px beat. Compose it as the
+ * section's body (after the `SectionHeading`); a section's groups divide
+ * without hand-rolled gaps or dividers.
+ *
+ *   <Section>
+ *     <SectionHeading><SectionHeadingTitle>Delivery</SectionHeadingTitle></SectionHeading>
+ *     <SubsectionStack>
+ *       <Subsection>{lead rows}</Subsection>
+ *       {carrier ? <Subsection>…</Subsection> : null}
+ *     </SubsectionStack>
+ *   </Section>
+ */
+export function SubsectionStack(props: SubsectionStackProps) {
+  return <DividedStack {...props} gap={24} />;
+}

package/src/text.css

@@ -31,12 +31,19 @@
   line-height: 24px;
   letter-spacing: -0.005em;
 }
+/* Display ramp — the heading ladder: xl = `##` (section), xxl = `#`
+   (page/record title), xxxl = hero numbers. */
 [data-text-size="xl"] {
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+}
+[data-text-size="xxl"] {
   font-size: 28px;
   line-height: 34px;
   letter-spacing: -0.015em;
 }
-[data-text-size="xxl"] {
+[data-text-size="xxxl"] {
   font-size: 32px;
   line-height: 38px;
   letter-spacing: -0.02em;
@@ -61,10 +68,14 @@
     line-height: 28px;
   }
   [data-text-size="xl"] {
+    font-size: 24px;
+    line-height: 32px;
+  }
+  [data-text-size="xxl"] {
     font-size: 32px;
     line-height: 44px;
   }
-  [data-text-size="xxl"] {
+  [data-text-size="xxxl"] {
     font-size: 48px;
     line-height: 52px;
   }

package/src/text.tsx

@@ -50,7 +50,7 @@ export interface TextProps {
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
 type TextAlign = "left" | "right" | "center";
 type TextDecorationLine = "underline" | "lineThrough" | "underline lineThrough";
 type TextWeight = "regular" | "medium" | "semibold";
@@ -146,11 +146,17 @@ const styles = StyleSheet.create({
     fontSize: 18,
     lineHeight: 30,
   },
+  // Display ramp — the heading ladder: xl = `##` (section), xxl = `#`
+  // (page/record title), xxxl = hero numbers.
   xl: {
+    fontSize: 22,
+    lineHeight: 28,
+  },
+  xxl: {
     fontSize: 28,
     lineHeight: 34,
   },
-  xxl: {
+  xxxl: {
     fontSize: 32,
     lineHeight: 38,
   },

package/src/text_utils.ts

@@ -10,7 +10,8 @@ export type TextColor =
   | "success"
   | "zinc-900"
   | "zinc-700"
-  | "zinc-500";
+  | "zinc-500"
+  | "zinc-400";
 
 export function getTextColor(color?: TextColor): string {
   switch (color) {
@@ -24,6 +25,10 @@ export function getTextColor(color?: TextColor): string {
       return colors.zinc["700"];
     case "zinc-500":
       return colors.zinc["500"];
+    // The disabled ink — light enough that a control reads inert at a glance
+    // (muted/600 still reads as body ink on a zinc-50 chip).
+    case "zinc-400":
+      return colors.zinc["400"];
     case "inverted":
       return colors.white;
     // Valence set — the lightest status weight: a state WORD whose meaning is in

package/src/trend_footer.tsx

@@ -1,4 +1,5 @@
 import { TrendingDown, TrendingUp } from "lucide-react";
+import { useLoticsLocale } from "./locale";
 import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
@@ -32,13 +33,14 @@ export function TrendFooter(props: TrendFooterProps) {
   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 labels = useLoticsLocale().trendFooter;
   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 ? "Up" : "Down"} {Math.abs(value)}% {periodLabel}
+          {up ? labels.up : labels.down} {Math.abs(value)}% {periodLabel}
         </Text>
       </View>
       {detail && (

package/src/use_screen_size.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Dimensions, Platform } from "react-native";
+import { Dimensions } from "react-native";
 
 const breakpoints = {
   // small (mobile)

package/src/animation_horizontal_slide.tsx

@@ -1,75 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Animated, StyleProp, ViewStyle } from "react-native";
-
-interface AnimationHorizontalSlideProps {
-  width: number;
-  visible: boolean;
-  children?: React.ReactNode;
-  onSlideAnimationEnd?: () => void;
-  onCollapseAnimationEnd?: () => void;
-  style?: StyleProp<ViewStyle>;
-  contentContainerStyle?: StyleProp<ViewStyle>;
-}
-
-export function AnimationHorizontalSlide(props: AnimationHorizontalSlideProps) {
-  const {
-    width: intrinsicWidth,
-    visible,
-    children,
-    onSlideAnimationEnd,
-    onCollapseAnimationEnd,
-    style,
-    contentContainerStyle,
-  } = props;
-  const widthAnim = useRef(new Animated.Value(visible ? intrinsicWidth : 0)).current;
-  const opacityAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
-
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(widthAnim, {
-        toValue: visible ? intrinsicWidth : 0,
-        bounciness: 0,
-        useNativeDriver: false,
-      }),
-      Animated.spring(opacityAnim, {
-        toValue: visible ? 1 : 0,
-        bounciness: 0,
-        useNativeDriver: false,
-      }),
-    ]).start((animation) => {
-      if (animation.finished) {
-        if (visible) {
-          onSlideAnimationEnd?.();
-        } else {
-          onCollapseAnimationEnd?.();
-        }
-      }
-    });
-  }, [
-    widthAnim,
-    opacityAnim,
-    visible,
-    intrinsicWidth,
-    onSlideAnimationEnd,
-    onCollapseAnimationEnd,
-  ]);
-
-  return (
-    <Animated.View style={[{ width: widthAnim, opacity: opacityAnim }, style]}>
-      <Animated.View
-        style={[
-          {
-            display: visible ? "flex" : "none",
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            width: intrinsicWidth,
-          },
-          contentContainerStyle,
-        ]}
-      >
-        {children}
-      </Animated.View>
-    </Animated.View>
-  );
-}

package/src/form_time_picker.tsx

@@ -1,22 +0,0 @@
-import { FormField, FormFieldProps } from "./form_field";
-import { TimePicker, TimePickerProps } from "./time_picker";
-
-export interface FormTimePickerProps
-  extends Omit<FormFieldProps, "style">,
-    TimePickerProps {}
-
-export function FormTimePicker(props: FormTimePickerProps) {
-  const { label, description, optional, optionalLabel, error, ...timePickerProps } = props;
-
-  return (
-    <FormField
-      label={label}
-      description={description}
-      error={error}
-      optional={optional}
-      optionalLabel={optionalLabel}
-    >
-      <TimePicker {...timePickerProps} />
-    </FormField>
-  );
-}

package/src/highlighted_text.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Text, TextProps } from "./text";
-import { colors } from "./colors";
-import { View, StyleSheet } from "react-native";
-
-interface HighlightedTextProps extends Omit<TextProps, "children"> {
-  text: string;
-  searchTerm: string;
-  singleLine?: boolean;
-}
-
-export function HighlightedText({
-  text,
-  searchTerm,
-  singleLine = false,
-  ...textProps
-}: HighlightedTextProps) {
-  const parts = highlightSearchTerm(text || "", searchTerm || "");
-
-  // Use numberOfLines prop for single line display instead of custom CSS
-  const numberOfLines = singleLine ? 1 : undefined;
-
-  return (
-    <Text {...textProps} numberOfLines={numberOfLines}>
-      {parts.map((part, index) => (
-        <Text key={index} style={part.isHighlighted ? styles.highlightedText : undefined}>
-          {part.text}
-        </Text>
-      ))}
-    </Text>
-  );
-}
-
-interface TextPart {
-  text: string;
-  isHighlighted: boolean;
-}
-
-function highlightSearchTerm(text: string, searchTerm: string): TextPart[] {
-  if (!searchTerm.trim()) {
-    return [{ text, isHighlighted: false }];
-  }
-
-  const searchRegex = new RegExp(`(${escapeRegExp(searchTerm.trim())})`, "gi");
-  const parts: TextPart[] = [];
-  let lastIndex = 0;
-
-  text.replace(searchRegex, (match, ...args) => {
-    const index = args[args.length - 2] as number; // offset index from regex replace
-
-    // Add text before the match
-    if (index > lastIndex) {
-      parts.push({
-        text: text.slice(lastIndex, index),
-        isHighlighted: false,
-      });
-    }
-
-    // Add the highlighted match
-    parts.push({
-      text: match,
-      isHighlighted: true,
-    });
-
-    lastIndex = index + match.length;
-    return match;
-  });
-
-  // Add any remaining text after the last match
-  if (lastIndex < text.length) {
-    parts.push({
-      text: text.slice(lastIndex),
-      isHighlighted: false,
-    });
-  }
-
-  return parts.length > 0 ? parts : [{ text, isHighlighted: false }];
-}
-
-function escapeRegExp(string: string): string {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-const styles = StyleSheet.create({
-  highlightedText: {
-    backgroundColor: colors.yellow[100],
-    color: colors.yellow[900],
-    fontWeight: "bold" as const,
-    paddingHorizontal: 2,
-    borderRadius: 2,
-  },
-});

package/src/menu_title.tsx

@@ -1,15 +0,0 @@
-import { Text } from "./text";
-
-export interface MenuTitleProps {
-  title: string;
-}
-
-export function MenuTitle(props: MenuTitleProps) {
-  const { title } = props;
-
-  return (
-    <Text size="lg" weight="semibold" style={{ paddingLeft: 8, lineHeight: 32, paddingBottom: 16 }}>
-      {title}
-    </Text>
-  );
-}