@lotics/ui 5.7.0 → 5.8.0

package/src/number_input.tsx

@@ -1,5 +1,6 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
 import { useFormField } from "./form_field";
 
@@ -50,7 +51,7 @@ export function NumberInput(props: NumberInputProps) {
         height: 40,
         paddingLeft: 8,
         paddingRight: 8,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: colors.border,

package/src/picker.tsx

@@ -2,7 +2,7 @@ import { Picker as RNPicker } from "@react-native-picker/picker";
 import { StyleSheet, View, Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
@@ -310,7 +310,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 6,
     paddingRight: 28,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     fontFamily: fontFamilyRegular,
@@ -324,7 +324,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 6,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     cursor: "auto",
     height: 40,
   },

package/src/popover_header.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { Text } from "./text";
 import { usePopoverNav } from "./popover_nav";
 
@@ -18,7 +18,7 @@ export function PopoverHeader(props: PopoverHeaderProps) {
   return (
     <View style={styles.container}>
       {canGoBack && (
-        <Button icon="chevron-left" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
+        <IconButton icon="chevron-left" size="lg" color="secondary" accessibilityLabel={backLabel} onPress={goBack} />
       )}
       <Text size="sm" weight="medium" style={{ flex: 1 }}>
         {title}

package/src/radio_picker.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import { View } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon } from "./icon";
@@ -120,7 +121,7 @@ function RadioOption<T extends string | number | symbol>(
         flexDirection: "row",
         alignItems: "center",
         padding: compact ? 8 : 12,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         gap: compact ? 8 : 16,
       }}
       onPress={handlePress}

package/src/range_slider.tsx

@@ -24,7 +24,7 @@ export interface RangeSliderProps {
 type Thumb = "low" | "high";
 
 /**
- * A short human summary of a range selection for a `FilterPill` preview —
+ * A short human summary of a range selection for a `FilterChip` preview —
  * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
  * `undefined` at the full range (no active filter). Mirrors `columnFilterSummary`.
  */

package/src/review_card.tsx

@@ -79,7 +79,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <Text size="sm" weight="medium" color="muted" numberOfLines={1}>
           {accepted ? props.acceptedLabel ?? "Accepted" : props.dismissedLabel ?? "Dismissed"}
         </Text>
-        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+        {props.onUndo ? <Button title="Undo" color="muted" onPress={props.onUndo} /> : null}
       </View>
     );
   }
@@ -132,7 +132,7 @@ export function ReviewCard(props: ReviewCardProps) {
         <View style={styles.footer}>
           {actions.map((a, i) => {
             const kind = a.kind ?? (i === actions.length - 1 ? "primary" : "muted");
-            return <Button key={a.label} title={a.label} color={kind} shape="rounded" onPress={a.onPress} />;
+            return <Button key={a.label} title={a.label} color={kind} onPress={a.onPress} />;
           })}
         </View>
       ) : null}

package/src/scan_field.tsx

@@ -1,5 +1,6 @@
 import { StyleSheet, View } from "react-native";
 import { colors, solid } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 
@@ -52,7 +53,7 @@ export function ScanField(props: ScanFieldProps) {
 
 const styles = StyleSheet.create({
   field: {
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
   },
 });

package/src/scored_option.tsx

@@ -94,7 +94,6 @@ export function ScoredOption(props: ScoredOptionProps) {
             title={selected ? "Selected" : selectLabel ?? "Choose"}
             icon={selected ? "check" : undefined}
             color={selected ? "secondary" : "primary"}
-            shape="rounded"
             onPress={onSelect}
           />
         </View>

package/src/search_input.tsx

@@ -9,6 +9,7 @@ import {
   type ViewStyle,
 } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { TextInputField } from "./text_input_field";
 
 type SearchInputProps = Omit<
@@ -57,7 +58,7 @@ export function SearchInput(props: SearchInputProps) {
 
 const styles = StyleSheet.create({
   // Search reads as a view-control by its leading search glyph + white fill —
-  // NOT by a distinct shape. It shares the rounded-8 radius of every other
+  // NOT by a distinct shape. It shares the kit-wide `CONTROL_RADIUS` of every other
   // input/picker (TextInputField, Combobox, the date filter), so a toolbar of
   // controls reads as one consistent band. The white fill still pops against
   // the zinc-50 canvas where most toolbars live; a zinc-300 border (one step up
@@ -65,7 +66,7 @@ const styles = StyleSheet.create({
   // the fill alone would vanish. 40px (TextInputField default) — the system
   // control height every band aligns to.
   search: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.white,
     // A thin 1px resting border (TextInputField's default width) — interaction
     // emphasis comes from the input's own focus outline, so it stays quiet at

package/src/segmented_control.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors, withAlpha } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SegmentOption<T extends string> {
   label: string;
@@ -183,7 +184,7 @@ const styles = StyleSheet.create({
     height: 40,
     gap: 2,
     padding: 3,
-    borderRadius: 10,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.zinc["100"],
   },
   trackDisabled: {

package/src/status_badge.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import { View, StyleSheet, Animated, Easing } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 interface StatusBadgeProps {
   enabled: boolean;
@@ -69,7 +70,7 @@ const styles = StyleSheet.create({
     gap: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   dotWrapper: {
     width: 10,

package/src/stepper.tsx

@@ -155,8 +155,9 @@ export function Step(props: StepProps) {
 
 // The node — status drives fill, never size. Monochrome: reached fills with ink,
 // the current step is a ring around white (pulsing when live), what's ahead is a
-// faint grey ring, the terminal is a checked fill.
-function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
+// faint grey ring, the terminal is a checked fill. Exported so `AgentRun` reuses
+// the exact same dot in its flat activity rows.
+export function Marker({ status, color, live }: { status: StepStatus; color: string; live: boolean }) {
   if (status === "done") {
     // A passed step: filled in the accent ink with a white check.
     return (

package/src/switch_button.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Switch, type SwitchProps } from "./switch";
 import { PressableHighlight } from "./pressable_highlight";
 import { Icon, type IconName } from "./icon";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitchButtonProps extends SwitchProps {
   icon?: IconName;
@@ -22,7 +23,7 @@ export function SwitchButton(props: SwitchButtonProps) {
         paddingVertical: 4,
         paddingLeft: 8,
         paddingRight: 6,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
       }}
       onPress={() => onChange?.(!value)}
       tooltip={tooltip}

package/src/switcher.tsx

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 import { Stack } from "./stack";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_HEIGHT, CONTROL_RADIUS } from "./control_surface";
 
 export interface SwitcherItem {
   id: string;
@@ -100,9 +101,9 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
+    height: CONTROL_HEIGHT,
     paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   popoverBody: {
     minWidth: 220,

package/src/tabs.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { PressableHighlight } from "./pressable_highlight";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 
 export interface TabOption<T extends string> {
   label: string;
@@ -138,7 +139,7 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
             style={{
               paddingVertical: 8,
               paddingHorizontal: 16,
-              borderRadius: 8,
+              borderRadius: CONTROL_RADIUS,
               backgroundColor: pressed
                 ? colors.zinc["100"]
                 : hovered

package/src/tag_input.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -161,7 +162,7 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     backgroundColor: colors.background,
   },
   chip: {

package/src/text_input_field.tsx

@@ -5,6 +5,7 @@ import {
   View,
 } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Ref, useCallback } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
@@ -163,7 +164,7 @@ export function TextInputField(props: TextInputFieldProps) {
 
 const styles = StyleSheet.create({
   input: {
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     height: 40,

package/src/time_field.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Popover, PopoverContent } from "./popover";
@@ -266,7 +267,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 8,
     gap: 2,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,

package/src/time_picker.tsx

@@ -1,6 +1,7 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "@lotics/ui/colors";
 import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
+import { CONTROL_RADIUS } from "./control_surface";
 export interface TimePickerProps {
   value?: string;
   onValueChange: (value: string) => void;
@@ -31,7 +32,7 @@ export function TimePicker(props: TimePickerProps) {
         height: 40,
         paddingLeft: 8,
         paddingRight: 8,
-        borderRadius: 8,
+        borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
         borderColor: colors.border,

package/src/triage_row.tsx

@@ -74,9 +74,9 @@ export function TriageRow(props: TriageRowProps) {
         </Text>
       ) : (
         <View style={styles.footer}>
-          {props.onOverride ? <Button title="Reclassify" color="muted" shape="rounded" onPress={props.onOverride} /> : null}
-          {props.onDismiss ? <Button title="Dismiss" color="muted" shape="rounded" onPress={props.onDismiss} /> : null}
-          {props.onAccept ? <Button title="Accept" color="primary" shape="rounded" onPress={props.onAccept} /> : null}
+          {props.onOverride ? <Button title="Reclassify" color="muted" onPress={props.onOverride} /> : null}
+          {props.onDismiss ? <Button title="Dismiss" color="muted" onPress={props.onDismiss} /> : null}
+          {props.onAccept ? <Button title="Accept" color="primary" onPress={props.onAccept} /> : null}
         </View>
       )}
     </View>