@lotics/ui 1.11.1 → 1.13.0

package/src/date_segments_field.tsx

@@ -0,0 +1,418 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  NativeSyntheticEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput as RNTextInput,
+  TextInputKeyPressEventData,
+  View,
+  ViewStyle,
+} from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import {
+  SegmentBuffer,
+  SegmentLabels,
+  SegmentType,
+  SegmentsConfig,
+  displayValue,
+  fieldOrder,
+  incrementSegment,
+  placeholderFor,
+  setHourField,
+  to12h,
+  typeDigit,
+  withDayPeriod,
+} from "./date_segments";
+
+export interface DateSegmentsProps {
+  /** Canonical value (`YYYY-MM-DD` / `YYYY-MM-DDTHH:mm`), `""` when empty. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Layout + value↔buffer mapping; see `dateSegmentsConfig`. */
+  config: SegmentsConfig;
+  /** Accessible names per segment. */
+  segmentLabels: SegmentLabels;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  testID?: string;
+  /** Accessible name for the segment group (e.g. "Start date"). */
+  accessibilityLabel?: string;
+  /** Fires when a segment in this group gains focus. */
+  onFocus?: () => void;
+  /** Fires when a segment in this group loses focus. */
+  onBlur?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// --- buffer transforms (pure) -----------------------------------------------
+
+function applyField(
+  buffer: SegmentBuffer,
+  type: SegmentType,
+  value: number,
+  hour12: boolean,
+): SegmentBuffer {
+  switch (type) {
+    case "year":
+      return { ...buffer, year: value };
+    case "month":
+      return { ...buffer, month: value };
+    case "day":
+      return { ...buffer, day: value };
+    case "minute":
+      return { ...buffer, minute: value };
+    case "hour":
+      return { ...buffer, hour: setHourField(buffer, value, hour12) };
+    case "dayPeriod":
+      return buffer;
+  }
+}
+
+function clearField(buffer: SegmentBuffer, type: SegmentType): SegmentBuffer {
+  switch (type) {
+    case "year":
+      return { ...buffer, year: null };
+    case "month":
+      return { ...buffer, month: null };
+    case "day":
+      return { ...buffer, day: null };
+    case "minute":
+      return { ...buffer, minute: null };
+    case "hour":
+      return { ...buffer, hour: null };
+    case "dayPeriod":
+      return buffer;
+  }
+}
+
+function fieldNumeric(type: SegmentType, buffer: SegmentBuffer, hour12: boolean): number | null {
+  switch (type) {
+    case "year":
+      return buffer.year;
+    case "month":
+      return buffer.month;
+    case "day":
+      return buffer.day;
+    case "minute":
+      return buffer.minute;
+    case "hour":
+      return buffer.hour == null ? null : hour12 ? to12h(buffer.hour).h12 : buffer.hour;
+    case "dayPeriod":
+      return null;
+  }
+}
+
+/**
+ * Borderless segmented date / datetime editor — one editable segment per locale
+ * field (in locale order, 12/24h derived) plus literal separators. Emits a canonical
+ * ISO value only once the segments form a complete, valid date. The bordered frame,
+ * focus ring, and calendar button live in {@link DateField}, which composes one (or
+ * two, for a range) of these.
+ *
+ * Segment editing (digits, arrows, AM/PM) is keyboard-driven on web. On native the
+ * segments are plain numeric inputs — the calendar/sheet is the primary path there.
+ */
+export function DateSegments(props: DateSegmentsProps) {
+  const {
+    value,
+    onChange,
+    config,
+    segmentLabels,
+    disabled,
+    autoFocus,
+    testID,
+    accessibilityLabel,
+    onFocus,
+    onBlur,
+    style,
+  } = props;
+
+  const layout = config.layout;
+  const order = useMemo(() => fieldOrder(layout), [layout]);
+  const firstFieldIndex = useMemo(
+    () => layout.segments.findIndex((s) => s.kind === "field"),
+    [layout],
+  );
+
+  // The field owns an editing buffer (the resolved value is its output). It is
+  // resynced when `value` changes from outside (calendar pick, parent reset) but
+  // not while the user types a still-incomplete value — same controlled-with-buffer
+  // shape as TimePicker's draft.
+  const [buffer, setBuffer] = useState<SegmentBuffer>(() => config.toBuffer(value));
+  const [activeType, setActiveType] = useState<SegmentType | null>(null);
+  const [activeText, setActiveText] = useState("");
+
+  const lastEmitted = useRef<string>(value);
+  const fieldRefs = useRef<Partial<Record<SegmentType, RNTextInput | null>>>({});
+
+  useEffect(() => {
+    if (value !== lastEmitted.current) {
+      lastEmitted.current = value;
+      setBuffer(config.toBuffer(value));
+      setActiveText("");
+    }
+  }, [value, config]);
+
+  const commit = useCallback(
+    (next: SegmentBuffer) => {
+      const out = config.toValue(next);
+      if (out !== null) {
+        lastEmitted.current = out;
+        onChange(out);
+      } else if (config.isEmpty(next)) {
+        lastEmitted.current = "";
+        onChange("");
+      }
+    },
+    [config, onChange],
+  );
+
+  const focusField = useCallback((type: SegmentType | undefined) => {
+    if (type) fieldRefs.current[type]?.focus();
+  }, []);
+
+  const focusNext = useCallback(
+    (type: SegmentType) => focusField(order[order.indexOf(type) + 1]),
+    [order, focusField],
+  );
+
+  const focusPrev = useCallback(
+    (type: SegmentType) => {
+      const i = order.indexOf(type);
+      if (i > 0) focusField(order[i - 1]);
+    },
+    [order, focusField],
+  );
+
+  const handleDigit = useCallback(
+    (type: SegmentType, digit: string) => {
+      if (type === "dayPeriod") return;
+      const currentText = activeType === type ? activeText : "";
+      const { text, value: v, complete } = typeDigit(type, currentText, digit, layout.hour12);
+      const next = applyField(buffer, type, v, layout.hour12);
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      if (complete) {
+        setActiveText("");
+        focusNext(type);
+      } else {
+        setActiveText(text);
+      }
+    },
+    [activeType, activeText, buffer, layout.hour12, commit, focusNext],
+  );
+
+  const handleStep = useCallback(
+    (type: SegmentType, delta: number) => {
+      let next: SegmentBuffer;
+      if (type === "dayPeriod") {
+        const pm = buffer.hour == null ? false : to12h(buffer.hour).pm;
+        next = { ...buffer, hour: withDayPeriod(buffer, !pm) };
+      } else {
+        const value = incrementSegment(
+          type,
+          fieldNumeric(type, buffer, layout.hour12),
+          delta,
+          layout.hour12,
+        );
+        next = applyField(buffer, type, value, layout.hour12);
+      }
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      setActiveText("");
+    },
+    [buffer, layout.hour12, commit],
+  );
+
+  const handleBackspace = useCallback(
+    (type: SegmentType) => {
+      if (activeType === type && activeText !== "") {
+        const text = activeText.slice(0, -1);
+        setActiveText(text);
+        const next =
+          text === ""
+            ? clearField(buffer, type)
+            : applyField(buffer, type, Number(text), layout.hour12);
+        setBuffer(next);
+        commit(next);
+        return;
+      }
+      if (fieldNumeric(type, buffer, layout.hour12) == null) {
+        focusPrev(type);
+        return;
+      }
+      const next = clearField(buffer, type);
+      setBuffer(next);
+      commit(next);
+      setActiveType(type);
+      setActiveText("");
+    },
+    [activeType, activeText, buffer, layout.hour12, commit, focusPrev],
+  );
+
+  const setHalfDay = useCallback(
+    (pm: boolean) => {
+      const next = { ...buffer, hour: withDayPeriod(buffer, pm) };
+      setBuffer(next);
+      commit(next);
+      setActiveText("");
+    },
+    [buffer, commit],
+  );
+
+  const handleKeyPress = useCallback(
+    (type: SegmentType, e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      const key = e.nativeEvent.key;
+      if (/^[0-9]$/.test(key)) {
+        e.preventDefault();
+        handleDigit(type, key);
+        return;
+      }
+      switch (key) {
+        case "ArrowUp":
+          e.preventDefault();
+          handleStep(type, 1);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          handleStep(type, -1);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          focusPrev(type);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          focusNext(type);
+          break;
+        case "Backspace":
+          e.preventDefault();
+          handleBackspace(type);
+          break;
+        default:
+          if (type === "dayPeriod") {
+            const k = key.toLowerCase();
+            if (k === "a") {
+              e.preventDefault();
+              setHalfDay(false);
+            } else if (k === "p") {
+              e.preventDefault();
+              setHalfDay(true);
+            }
+          }
+      }
+    },
+    [handleDigit, handleStep, handleBackspace, focusPrev, focusNext, setHalfDay],
+  );
+
+  const handleChangeText = useCallback(
+    (type: SegmentType, txt: string) => {
+      // Web digit/arrow keys are handled (and prevented) in onKeyPress, so this fires
+      // only for a paste or for native typing.
+      if (txt.length > 1 || /[^0-9]/.test(txt)) {
+        const parsed = config.parse(txt);
+        if (parsed) {
+          const next = config.toBuffer(parsed);
+          setBuffer(next);
+          commit(next);
+          setActiveText("");
+        }
+        return;
+      }
+      if (Platform.OS !== "web" && txt) handleDigit(type, txt);
+    },
+    [config, commit, handleDigit],
+  );
+
+  const handleFocus = useCallback(
+    (type: SegmentType) => {
+      setActiveType(type);
+      setActiveText("");
+      onFocus?.();
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(() => {
+    setActiveType(null);
+    setActiveText("");
+    onBlur?.();
+  }, [onBlur]);
+
+  return (
+    <View style={[styles.segments, style]} testID={testID} accessibilityLabel={accessibilityLabel}>
+      {layout.segments.map((seg, i) => {
+        if (seg.kind === "literal") {
+          return (
+            <Text key={i} size="sm" color="muted">
+              {seg.value}
+            </Text>
+          );
+        }
+        const type = seg.type;
+        const committed = displayValue(type, buffer, layout);
+        const isActive = activeType === type && activeText !== "";
+        const text = isActive ? activeText : (committed ?? "");
+        return (
+          <RNTextInput
+            key={i}
+            ref={(node) => {
+              fieldRefs.current[type] = node;
+            }}
+            value={text}
+            placeholder={placeholderFor(type)}
+            placeholderTextColor={colors.zinc["400"]}
+            editable={!disabled}
+            inputMode={type === "dayPeriod" ? "text" : "numeric"}
+            autoFocus={autoFocus && i === firstFieldIndex}
+            role={Platform.OS === "web" ? "spinbutton" : undefined}
+            aria-label={segmentLabels[type]}
+            onKeyPress={(e) => handleKeyPress(type, e)}
+            onChangeText={(t) => handleChangeText(type, t)}
+            onFocus={() => handleFocus(type)}
+            onBlur={handleBlur}
+            style={[
+              styles.segment,
+              type === "year" ? styles.year : type === "dayPeriod" ? styles.ampm : styles.twoDigit,
+              disabled && styles.segmentDisabled,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  segments: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  segment: {
+    ...getInputTextStyle(),
+    fontFamily: fontFamilyRegular,
+    letterSpacing: -0.4,
+    color: colors.zinc["900"],
+    textAlign: "center",
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    outlineStyle: "none" as unknown as "solid",
+  },
+  segmentDisabled: {
+    color: colors.zinc["400"],
+  },
+  twoDigit: {
+    width: 26,
+  },
+  year: {
+    width: 38,
+  },
+  ampm: {
+    width: 28,
+  },
+});

package/src/gantt/gantt_view.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { View, ScrollView, Pressable, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
-import { dayDiff } from "../calendar/dates";
+import { addDays, dayDiff } from "../calendar/dates";
+import { usePointerDrag } from "../use_pointer_drag";
 import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
 import { DEFAULT_GANTT_LABELS } from "./types";
 import type { GanttLabels, GanttScale, GanttTask } from "./types";
@@ -11,6 +12,8 @@ const LABEL_W = 188;
 const HEADER_H = 38;
 const ROW_H = 40;
 const BAR_H = 22;
+const HANDLE_W = 8;
+const MIN_BAR = 8;
 const SCALES: GanttScale[] = ["day", "week", "month"];
 
 export interface GanttViewProps<T = unknown> {
@@ -23,6 +26,9 @@ export interface GanttViewProps<T = unknown> {
   /** User-facing chrome strings; defaults to English. */
   labels?: Partial<GanttLabels>;
   onTaskPress?: (task: GanttTask<T>) => void;
+  /** When set, each bar gets a right-edge resize handle; dragging it adjusts the
+   *  task's end. Receives the task + the new inclusive end day (clamped ≥ start). */
+  onTaskResize?: (task: GanttTask<T>, newEnd: Date) => void;
 }
 
 /**
@@ -33,10 +39,20 @@ export interface GanttViewProps<T = unknown> {
  * — wrap in a ScrollView for very long task lists.
  */
 export function GanttView<T = unknown>(props: GanttViewProps<T>) {
-  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress } = props;
+  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress, onTaskResize } = props;
   const L = { ...DEFAULT_GANTT_LABELS, ...props.labels };
   const [scale, setScale] = useState<GanttScale>(defaultScale);
 
+  const taskById = useMemo(() => new Map(tasks.map((t) => [t.id, t])), [tasks]);
+  const { live, bind } = usePointerDrag((id, _pointer, delta) => {
+    const t = taskById.get(id);
+    if (!t || !onTaskResize) return;
+    const days = Math.round(delta.dx / pxPerDay(scale));
+    if (days === 0) return;
+    const newEnd = addDays(t.end ?? t.start, days);
+    onTaskResize(t, newEnd < t.start ? t.start : newEnd);
+  });
+
   const { start: axisStart, end: axisEnd } = useMemo(() => axisRange(tasks, today), [tasks, today]);
   const ticks = useMemo(() => buildTicks(axisStart, axisEnd, scale, locale), [axisStart, axisEnd, scale, locale]);
   const axisWidth = useMemo(() => (dayDiff(axisStart, axisEnd) + 1) * pxPerDay(scale), [axisStart, axisEnd, scale]);
@@ -100,7 +116,9 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
 
             {/* Task rows */}
             {tasks.map((t) => {
-              const bar = barGeometry(t, axisStart, scale);
+              const base = barGeometry(t, axisStart, scale);
+              const dragging = live && live.id === t.id ? live : null;
+              const width = dragging ? Math.max(MIN_BAR, base.width + dragging.dx) : base.width;
               const accent = t.color || colors.teal[600];
               return (
                 <View key={t.id} style={{ height: ROW_H, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] }}>
@@ -113,12 +131,20 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
                     onPress={onTaskPress ? () => onTaskPress(t) : undefined}
                     accessibilityRole={onTaskPress ? "button" : undefined}
                     accessibilityLabel={t.label}
-                    style={{ position: "absolute", left: bar.left, width: bar.width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
+                    style={{ position: "absolute", left: base.left, width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
                   >
-                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8, opacity: dragging ? 0.85 : 1 }}>
                       <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
                     </View>
                   </Pressable>
+                  {onTaskResize ? (
+                    <View
+                      ref={bind(t.id, "ew-resize")}
+                      style={{ position: "absolute", left: base.left + width - HANDLE_W, width: HANDLE_W + 6, top: (ROW_H - BAR_H) / 2, height: BAR_H, alignItems: "center", justifyContent: "center", zIndex: 2 }}
+                    >
+                      <View style={{ width: 3, height: 11, borderRadius: 2, backgroundColor: "rgba(255,255,255,0.75)" }} />
+                    </View>
+                  ) : null}
                 </View>
               );
             })}

package/src/icon.tsx

@@ -31,6 +31,7 @@ import Ban from "lucide-react-native/dist/esm/icons/ban";
 import Bell from "lucide-react-native/dist/esm/icons/bell";
 import Bolt from "lucide-react-native/dist/esm/icons/bolt";
 import Brain from "lucide-react-native/dist/esm/icons/brain";
+import Building2 from "lucide-react-native/dist/esm/icons/building-2";
 import BookMarked from "lucide-react-native/dist/esm/icons/book-marked";
 import BookOpen from "lucide-react-native/dist/esm/icons/book-open";
 import BookText from "lucide-react-native/dist/esm/icons/book-text";
@@ -218,6 +219,7 @@ const iconComponents = {
   bell: Bell,
   bold: Bold,
   bolt: Bolt,
+  "building-2": Building2,
   "book-marked": BookMarked,
   "book-open": BookOpen,
   "book-text": BookText,

package/src/menu_button.tsx

@@ -105,7 +105,7 @@ export function MenuButton(props: MenuButtonProps) {
         style={containerStyle}
         role={role}
         accessibilityLabel={resolvedLabel}
-        accessibilityState={{ selected: !!selected, disabled: !!disabled }}
+        aria-selected={!!selected} aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>

package/src/menu_list_item.tsx

@@ -51,7 +51,7 @@ export function MenuListItem(props: MenuListItemProps) {
         style={containerStyle}
         accessibilityRole="button"
         accessibilityLabel={description ? `${title}, ${description}` : title}
-        accessibilityState={{ disabled: !!disabled }}
+        aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>

package/src/popover.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -203,12 +204,29 @@ export function PopoverContent(props: PopoverContentProps) {
   const [triggerWidth, setTriggerWidth] = useState<number>(0);
   const [isBottomSheetShown, setIsBottomSheetShown] = useState(false);
   const returnFocusRef = useRef<HTMLElement | null>(null);
+  // Last known trigger geometry. The trigger can unmount while the popover is
+  // open — a hover-revealed menu button stops being rendered the moment our
+  // overlay covers its row and the hover ends — so positioning cannot rely on
+  // `triggerRef.current` still being live when it runs.
+  const triggerRectRef = useRef<DOMRect | null>(null);
 
   const handleClose = useCallback(() => {
     if (!open) return;
     onOpenChange(false);
   }, [onOpenChange, open]);
 
+  // Snapshot the trigger geometry synchronously the moment we open, while it is
+  // guaranteed to still be mounted. `calculatePosition` runs later in a rAF, by
+  // which point a hover-revealed trigger may already be gone (our overlay covers
+  // its row, hover ends, the button unmounts). Capturing here keeps the popover
+  // anchored to where the trigger was instead of stranding it off-screen.
+  useLayoutEffect(() => {
+    if (!open || small) return;
+    if (triggerRef.current) {
+      triggerRectRef.current = triggerRef.current.getBoundingClientRect();
+    }
+  }, [open, small, triggerRef]);
+
   // Focus management: when the popover opens, remember what had focus and move
   // focus into the popover (the content div is tab-able via `tabIndex=-1`).
   // When it closes, restore focus to the prior element so keyboard users don't
@@ -280,10 +298,17 @@ export function PopoverContent(props: PopoverContentProps) {
   }, [open, small, onOpenChange]);
 
   const calculatePosition = useCallback(() => {
-    if (!triggerRef.current || !popoverRef.current) return;
+    if (!popoverRef.current) return;
     if (small) return;
 
-    const triggerRect = triggerRef.current.getBoundingClientRect();
+    // Prefer the live trigger when it is still mounted (so the popover tracks
+    // scroll/layout); fall back to the rect captured at open time when the
+    // trigger has since unmounted, instead of stranding the popover off-screen.
+    const liveTriggerRect = triggerRef.current?.getBoundingClientRect();
+    if (liveTriggerRect) triggerRectRef.current = liveTriggerRect;
+    const triggerRect = triggerRectRef.current;
+    if (!triggerRect) return;
+
     const popoverRect = popoverRef.current.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
@@ -403,6 +428,7 @@ export function PopoverContent(props: PopoverContentProps) {
     if (!open) {
       setPosition((previous) => (previous === null ? previous : null));
       setIsBottomSheetShown((previous) => (previous ? false : previous));
+      triggerRectRef.current = null;
       return;
     }
 

package/src/radio_picker.tsx

@@ -115,7 +115,7 @@ function RadioOption<T extends string | number | symbol>(
       onPress={handlePress}
       accessibilityRole="radio"
       accessibilityLabel={description ? `${label}, ${description}` : label}
-      accessibilityState={{ checked: selected }}
+      aria-checked={selected}
       // Roving tabindex: exactly one radio is the tab-stop. Arrow keys cycle.
       focusable={isTabStop}
       onKeyDown={onKeyDown}

package/src/stepper.tsx

@@ -0,0 +1,83 @@
+import { View } from "react-native";
+import { colors } from "./colors";
+import { Icon } from "./icon";
+import { Text } from "./text";
+
+export type StepStatus = "done" | "current" | "upcoming";
+
+export interface StepperProps {
+  /** Ordered step labels, left → right. */
+  steps: string[];
+  /** Index of the in-progress step; lower indices render complete. */
+  current: number;
+  /** Accent for the completed track, current ring, and current label.
+   *  Defaults to the neutral ink — pass a brand color to theme it. */
+  color?: string;
+  accessibilityLabel?: string;
+}
+
+function statusOf(index: number, current: number): StepStatus {
+  if (index < current) return "done";
+  if (index === current) return "current";
+  return "upcoming";
+}
+
+/**
+ * Horizontal step / status tracker — a row of milestones with completed,
+ * current, and upcoming states and a connecting track. For a vertical event
+ * log use `Timeline` instead.
+ */
+export function Stepper(props: StepperProps) {
+  const { steps, current, color = colors.zinc[900], accessibilityLabel } = props;
+  const last = steps.length - 1;
+  const safe = Math.max(0, Math.min(current, last));
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel ?? `Step ${safe + 1} of ${steps.length}: ${steps[safe] ?? ""}`}
+      style={{ flexDirection: "row" }}
+    >
+      {steps.map((label, i) => {
+        const status = statusOf(i, current);
+        const leftFilled = i <= current && i > 0;
+        const rightFilled = i < current && i < last;
+        const isCurrent = status === "current";
+        return (
+          <View key={label} style={{ flex: 1, alignItems: "center", gap: 8 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+              <View style={{ flex: 1, height: 2, backgroundColor: leftFilled ? color : colors.zinc[200] }} />
+              <StepDot status={status} color={color} />
+              <View style={{ flex: 1, height: 2, backgroundColor: rightFilled ? color : colors.zinc[200] }} />
+            </View>
+            <Text
+              size="xs"
+              color={isCurrent ? "default" : "muted"}
+              weight={isCurrent ? "semibold" : "regular"}
+              style={isCurrent ? { color } : undefined}
+            >
+              {label}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function StepDot({ status, color }: { status: StepStatus; color: string }) {
+  if (status === "done") {
+    return <Icon name="circle-check" size={16} color={color} />;
+  }
+  return (
+    <View
+      style={{
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        backgroundColor: colors.white,
+        borderWidth: status === "current" ? 3 : 1.5,
+        borderColor: status === "current" ? color : colors.zinc[300],
+      }}
+    />
+  );
+}