@lotics/ui 8.0.0 → 10.0.0

package/src/inline_select.tsx

@@ -7,7 +7,8 @@ import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
-import { InlineEditView } from "./inline_edit";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
 
 export interface InlineSelectProps<T extends string> {
   value: T | null;
@@ -24,6 +25,8 @@ export interface InlineSelectProps<T extends string> {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
 }
@@ -36,7 +39,8 @@ export interface InlineSelectProps<T extends string> {
  * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
-  const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false } = props;
+  const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, background } = props;
+  const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -52,7 +56,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       try {
         await onSave(next);
       } catch (e) {
-        setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+        setError(e instanceof Error && e.message ? e.message : labels.saveError);
       } finally {
         setSaving(false);
       }
@@ -65,6 +69,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
+            background={background}
             display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}

package/src/inline_tag_select.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { Icon } from "./icon";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { OptionList } from "./option_list";
+import type { PickerOption } from "./picker";
+import { ActivityIndicator } from "./activity_indicator";
+import { Badge } from "./badge";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
+
+export interface InlineTagSelectProps<T extends string> {
+  /** The selected tag values. */
+  value: T[];
+  /** Commits the NEW SET when the picker closes (only if it changed). Throwing
+   *  surfaces the inline error, like every inline editor. */
+  onSave: (next: T[]) => void | Promise<void>;
+  options: PickerOption<T>[];
+  /** The resting render of ONE selected tag (an `OptionBadge` dot, a `Chip`).
+   *  Defaults to a plain zinc `Badge` of the label. */
+  renderTag?: (option: PickerOption<T>) => React.ReactNode;
+  /** Rich row content in the dropdown. Falls back to `renderTag`, then label. */
+  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
+  /** Show an in-menu search box; default false. */
+  searchable?: boolean;
+}
+
+/**
+ * The inline-editable MULTI select — the tag-field member of the `Inline*`
+ * family (`InlineSelect` picks one; this holds a set). At rest the selected
+ * tags render as badges inside the standard inline chip; clicking floats a
+ * multi `OptionList` (checkbox rows) in a popover, toggles edit a local draft,
+ * and CLOSING the popover commits the new set in one `onSave` — the blur-commit
+ * contract of the inline family, applied to a set.
+ */
+export function InlineTagSelect<T extends string>(props: InlineTagSelectProps<T>) {
+  const {
+    value, onSave, options, renderTag, renderOptionContent, placeholder, disabled, accessibilityLabel, background, searchable = false,
+  } = props;
+  const labels = useLoticsLocale().inline;
+  const [open, setOpenState] = useState(false);
+  const [draft, setDraft] = useState<T[]>(value);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const commit = async (next: T[]) => {
+    const changed = next.length !== value.length || next.some((v) => !value.includes(v));
+    if (!changed) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(next);
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const setOpen = (next: boolean) => {
+    if (next) {
+      setDraft(value);
+      setOpenState(true);
+      return;
+    }
+    setOpenState(false);
+    void commit(draft);
+  };
+
+  const selected = options.filter((o) => value.includes(o.value));
+  const tag = (o: PickerOption<T>) => (renderTag ? renderTag(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />);
+
+  return (
+    <View>
+      <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
+        <PopoverTrigger>
+          <InlineEditView
+            background={background}
+            display={
+              selected.length > 0 ? (
+                <View style={styles.tags}>
+                  {selected.map((o) => (
+                    <View key={o.value}>{tag(o)}</View>
+                  ))}
+                </View>
+              ) : (
+                ""
+              )
+            }
+            placeholder={placeholder}
+            disabled={disabled}
+            active={open && !disabled}
+            accessibilityLabel={accessibilityLabel}
+            trailing={
+              saving ? (
+                <ActivityIndicator size={16} color={colors.zinc[400]} />
+              ) : (
+                <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
+              )
+            }
+          />
+        </PopoverTrigger>
+        <PopoverContent disableBodyScroll>
+          <OptionList<T, true>
+            multi
+            search={{ mode: searchable ? "internal" : "none" }}
+            options={options}
+            value={draft}
+            onValueChange={setDraft}
+            onRequestClose={() => setOpen(false)}
+            renderOptionContent={renderOptionContent ?? renderTag}
+          />
+        </PopoverContent>
+      </Popover>
+      {error ? (
+        <Text size="xs" color="danger" style={styles.error}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tags: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    columnGap: 4,
+    rowGap: 2,
+  },
+  error: { marginTop: 4 },
+});

package/src/inline_text_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
 import { TextInputField } from "./text_input_field";
-import { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTextInputProps {
   value: string;
@@ -15,6 +15,8 @@ export interface InlineTextInputProps {
   disabled?: boolean;
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
   accessibilityLabel?: string;
 }
 
@@ -25,7 +27,7 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , background } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -47,6 +49,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/inline_time_picker.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
 import { TimePicker } from "./time_picker";
-import { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
@@ -13,6 +13,8 @@ export interface InlineTimePickerProps {
   controls?: InlineEditControls;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -21,7 +23,7 @@ export interface InlineTimePickerProps {
  * field at the same height, so the form never reflows.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , background } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -39,6 +41,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/ledger.tsx

@@ -0,0 +1,220 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { Divider } from "./divider";
+import { Link } from "./link";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { PressableHighlight } from "./pressable_highlight";
+import { useLoticsLocale } from "./locale";
+import { Text } from "./text";
+
+// The record-level money list — a compact financial STATEMENT for one record's
+// drawer/section: charge/receipt GROUPS with their sums in the group headers,
+// every figure on ONE right-aligned tabular column, closed by a divider-set
+// emphasized total. A row with `peek` is a door: pressing it floats the fee's
+// PARTICULARS (basis, who charged it, the invoice it landed on) in an anchored
+// popover — the list stays flat and scannable, the depth is on demand. A row
+// with `reference` carries a trailing link instead (an issued invoice, a
+// receipt no.). No bars, no charts — the numbers are the interface.
+//
+//   <Ledger formatValue={formatMoney}>
+//     <LedgerGroup label="Charges" total={total}>
+//       <LedgerRow label="Service fee" value={fee} peek={<FeeParticulars … />} />
+//       <LedgerRow label="Levy" value={levy} reference={{ label: "INV-0414", onPress }} />
+//     </LedgerGroup>
+//     <LedgerGroup label="Received" total={-received}>
+//       <LedgerRow label="Deposit" meta="03/06 · Cash" value={-1_550_000} tone="success" />
+//     </LedgerGroup>
+//     <LedgerTotal label="Outstanding" value={due} tone="danger" zeroLabel="Paid in full" />
+//   </Ledger>
+
+interface LedgerContextValue {
+  format: (n: number) => string;
+}
+
+const LedgerContext = createContext<LedgerContextValue | null>(null);
+
+function useLedger(): LedgerContextValue {
+  const ctx = useContext(LedgerContext);
+  if (!ctx) throw new Error("Ledger components must be used within a Ledger");
+  return ctx;
+}
+
+/** Signed display: negatives render as "− <abs>" (a receipt against charges).
+ *  `n + 0` normalizes -0 (a zero receipts sum passed negated) to plain 0. */
+function signed(format: (n: number) => string, n: number) {
+  return n < 0 ? `− ${format(-n)}` : format(n + 0);
+}
+
+export interface LedgerProps {
+  /** Money formatting shared by every row, sum, and total (e.g. `formatMoney`). */
+  formatValue: (n: number) => string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Ledger(props: LedgerProps) {
+  const { formatValue, children, style } = props;
+  return (
+    <LedgerContext.Provider value={{ format: formatValue }}>
+      <View style={[styles.ledger, style]}>{children}</View>
+    </LedgerContext.Provider>
+  );
+}
+
+export interface LedgerGroupProps {
+  /** The group name ("Charges", "Received") — xs muted, with the sum opposite. */
+  label: string;
+  /** The group's sum, shown right-aligned in the header. Sign renders as
+   *  "−" (pass receipts negative). Omit to leave the header sumless. */
+  total?: number;
+  children: ReactNode;
+}
+
+/** One side of the ledger — a labelled run of rows with its sum in the header. */
+export function LedgerGroup(props: LedgerGroupProps) {
+  const { label, total, children } = props;
+  const { format } = useLedger();
+  return (
+    <View style={styles.group}>
+      <View style={styles.row}>
+        <Text size="xs" weight="medium" color="muted" style={styles.grow}>
+          {label}
+        </Text>
+        {total != null ? (
+          <Text size="xs" color="muted" tabular>
+            {signed(format, total)}
+          </Text>
+        ) : null}
+      </View>
+      {children}
+    </View>
+  );
+}
+
+export interface LedgerRowProps {
+  /** The line's name — what was charged / received. */
+  label: string;
+  /** Inline context after the label — a date · method, a basis, a period. */
+  meta?: string;
+  /** The amount. Negative renders "− <abs>" (a receipt). */
+  value: number;
+  /** Valence of the amount (a receipt reads success). */
+  tone?: "default" | "success" | "danger";
+  /** The line's PARTICULARS — set it and the whole row becomes a pressable
+   *  door that floats this node in an anchored popover. Put any links (the
+   *  invoice, the tariff) INSIDE the peek: a row is never a button holding
+   *  another button, so `reference` is ignored while `peek` is set. */
+  peek?: ReactNode;
+  /** Peek popover width. Default 300. */
+  peekWidth?: number;
+  /** A trailing reference link (an issued invoice, a receipt no.) for a row
+   *  WITHOUT `peek`. */
+  reference?: { label: string; onPress: () => void };
+  /** Accessible name for a peekable row. Defaults to "<label> details". */
+  accessibilityLabel?: string;
+}
+
+/** One money line. Static by default; a door to its particulars with `peek`. */
+export function LedgerRow(props: LedgerRowProps) {
+  const { label, meta, value, tone = "default", peek, peekWidth = 300, reference, accessibilityLabel } = props;
+  const rowDetails = useLoticsLocale().ledger.rowDetails;
+  const { format } = useLedger();
+  const content = (
+    <>
+      <Text size="sm" numberOfLines={1} style={styles.shrink}>
+        {label}
+      </Text>
+      {meta ? (
+        <Text size="xs" color="muted" numberOfLines={1}>
+          {meta}
+        </Text>
+      ) : null}
+      <View style={styles.grow} />
+      {!peek && reference ? (
+        <Link size="xs" onPress={reference.onPress} accessibilityLabel={reference.label}>
+          {reference.label}
+        </Link>
+      ) : null}
+      <Text size="sm" tabular color={tone === "default" ? undefined : tone}>
+        {signed(format, value)}
+      </Text>
+    </>
+  );
+  if (!peek) {
+    return <View style={styles.row}>{content}</View>;
+  }
+  return (
+    <Popover side="bottom" align="end">
+      <PopoverTrigger>
+        <PressableHighlight
+          focusRing
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel ?? rowDetails(label)}
+          style={(state) => [styles.row, styles.rowPress, state.hovered ? styles.rowHovered : null]}
+        >
+          {content}
+        </PressableHighlight>
+      </PopoverTrigger>
+      <PopoverContent style={{ width: peekWidth }} disableBodyScroll>
+        {peek}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export interface LedgerTotalProps {
+  /** The closing question the ledger answers ("Outstanding", "Balance"). */
+  label: string;
+  value: number;
+  /** Valence of the closing figure. */
+  tone?: "default" | "success" | "danger";
+  /** Rendered instead of the figure when `value` is 0 ("Paid in full") — in
+   *  success tone, since a settled ledger is the good outcome. */
+  zeroLabel?: string;
+}
+
+/** The divider-set closing line — the ledger's ONE emphasized number. */
+export function LedgerTotal(props: LedgerTotalProps) {
+  const { label, value, tone = "default", zeroLabel } = props;
+  const { format } = useLedger();
+  const settled = value === 0 && zeroLabel != null;
+  return (
+    <View style={styles.total}>
+      <Divider />
+      <View style={styles.row}>
+        <Text size="sm" weight="semibold" style={styles.grow}>
+          {label}
+        </Text>
+        <Text size="lg" weight="semibold" tabular color={settled ? "success" : tone === "default" ? undefined : tone}>
+          {settled ? zeroLabel : signed(format, value)}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Outdent by the rows' 8px inset (the ListItem/Timeline technique) so row text +
+  // the money column align with the section heading and the container edges;
+  // the pressable door's wash bleeds into the gutter instead of squeezing text.
+  ledger: { gap: 12, marginHorizontal: -8 },
+  group: { gap: 4 },
+  // EVERY line (group header, rows, the total) shares the 8px text inset, so
+  // labels and the money column sit on one edge whether a row peeks or not —
+  // the pressable door's wash simply fills the same padded box.
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 28,
+    paddingHorizontal: 8,
+  },
+  rowPress: {
+    borderRadius: 8,
+  },
+  rowHovered: { backgroundColor: colors.zinc[50] },
+  grow: { flexGrow: 1, flexShrink: 1 },
+  shrink: { flexShrink: 1 },
+  total: { gap: 6 },
+});

package/src/locale.tsx

@@ -36,6 +36,19 @@ export interface LoticsLocale {
   formField: { optional: string };
   /** `Drawer`: the record prev/next + close controls (screen-reader names). */
   drawer: { previous: string; next: string; close: string };
+  /** The `Inline*` editor family: the shared save-error line and the
+   *  text-editor Save/Cancel tooltips. */
+  inline: { saveError: string; save: string; cancel: string };
+  /** `Ledger`: the screen-reader name of a peekable row. */
+  ledger: { rowDetails: (label: string) => string };
+  /** `SectionHeadingTitle`: the info-popover trigger's screen-reader name. */
+  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" …). */
   confidence: ConfidenceLabels;
   /** `Finding`: the severity badge word ("Critical" …). */
@@ -90,6 +103,12 @@ export const en: LoticsLocale = {
   filterChip: { clear: "Clear" },
   formField: { optional: "Optional" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
+  inline: { saveError: "Couldn't save. Try again.", save: "Save", cancel: "Cancel" },
+  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: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
@@ -161,6 +180,12 @@ export const vi: LoticsLocale = {
   filterChip: { clear: "Xóa" },
   formField: { optional: "Tùy chọn" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
+  inline: { saveError: "Không lưu được. Thử lại.", save: "Lưu", cancel: "Hủy" },
+  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: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,

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;
 

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/progress_bar.tsx

@@ -16,6 +16,11 @@ export interface ProgressBarProps {
   format?: ProgressBarFormat;
   color?: string;
   completeColor?: string;
+  /** COMPACT: one row — the track (flex) with a plain sm tabular count beside
+   *  it ("4/5", or "80%" under format="percentage"). For cells, headings, and
+   *  peek triggers where the stacked title-over-track anatomy is too tall and
+   *  a floating caption reads misaligned. `title` is ignored. */
+  compact?: boolean;
 }
 
 /**
@@ -32,11 +37,29 @@ export function ProgressBar(props: ProgressBarProps) {
     format = "percentage",
     color = colors.blue["500"],
     completeColor = colors.green["500"],
+    compact = false,
   } = props;
 
-  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+  const percentage = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;
   const isComplete = percentage >= 100;
 
+  if (compact) {
+    const label =
+      format === "percentage" ? `${Math.round(percentage)}%` : `${value.toLocaleString("vi-VN")}/${max.toLocaleString("vi-VN")}`;
+    return (
+      <View style={styles.compactRow}>
+        <View style={[styles.track, styles.compactTrack]}>
+          <View style={[styles.fill, { width: `${percentage}%`, backgroundColor: isComplete ? completeColor : color }]} />
+        </View>
+        {format === "none" ? null : (
+          <Text size="sm" tabular color={isComplete ? "success" : "muted"}>
+            {label}
+          </Text>
+        )}
+      </View>
+    );
+  }
+
   const caption =
     format === "fraction"
       ? `${value.toLocaleString("vi-VN")} / ${max.toLocaleString("vi-VN")} · ${Math.round(percentage)}%`
@@ -80,6 +103,14 @@ const styles = StyleSheet.create({
   container: {
     gap: 6,
   },
+  compactRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  compactTrack: {
+    flex: 1,
+  },
   header: {
     flexDirection: "row",
     alignItems: "baseline",