@lotics/ui 5.7.0 → 5.9.0

package/src/column_filter.tsx

@@ -3,7 +3,7 @@ import { Text } from "./text";
 import { TextInputField } from "./text_input_field";
 import { NumberInput } from "./number_input";
 import { PickerMenu } from "./picker_menu";
-import { FilterPill } from "./filter_pill";
+import { FilterChip } from "./filter_chip";
 import type { PickerOption } from "./picker";
 
 /** A column the picker can filter on. `type` selects the control + operators. */
@@ -97,7 +97,7 @@ export interface ColumnFilterProps {
 }
 
 /**
- * A toolbar-style filter pill: the same `PillButton` the table toolbar uses, so
+ * A toolbar-style filter pill: the same `Chip` the table toolbar uses, so
  * a picker's filters read identically. Inactive → "Label ⌄"; active →
  * "Label: summary" with an X to clear. Pressing the pill opens a type-aware
  * editor (text contains / number range / multi-select). Controlled — the
@@ -109,7 +109,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
   const active = isColumnFilterActive(value);
 
   return (
-    <FilterPill
+    <FilterChip
       label={column.label}
       summary={active ? columnFilterSummary(column, value) : undefined}
       onClear={() => onChange(undefined)}
@@ -150,7 +150,7 @@ export function ColumnFilter(props: ColumnFilterProps) {
             onValueChange={(selected) => onChange({ kind: "select", selected })}
           />
         )}
-    </FilterPill>
+    </FilterChip>
   );
 }
 

package/src/combobox.tsx

@@ -9,7 +9,7 @@ import {
 } from "react-native";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING, inputPillStyle } from "./control_surface";
+import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -70,11 +70,6 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
    *  picker, not a free-text search box. Opt IN to the search-box look explicitly
    *  with `icon="search"` (leading glyph, no chevron). Multi-select shows neither. */
   icon?: IconName;
-  /** Render the input on the white toolbar-pill surface (rounded-full, white
-   *  fill, zinc-300 border) — the same surface SearchInput/ChipGroup/FilterPill
-   *  wear — so a combobox used as a toolbar filter reads as a view-control on the
-   *  zinc-50 canvas, not a form field. Single-select only. */
-  pill?: boolean;
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
@@ -128,7 +123,6 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     loading = false,
     searchDebounceMs = 200,
     icon,
-    pill = false,
     placeholder,
     recentsLabel = "Recent",
     emptyText = "No results",
@@ -346,7 +340,6 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           autoCorrect={false}
           style={[
             multi ? styles.multiInput : showChevron ? styles.selectInput : undefined,
-            !multi && pill ? inputPillStyle : undefined,
             // Single-select wears the open ring on the input (which holds the
             // border); multi wears it on the wrapper above (the input is borderless).
             // Gate on `showList`, not `open`: an empty query with no options has
@@ -471,7 +464,7 @@ const styles = StyleSheet.create({
     minHeight: 40,
     borderWidth: 1,
     borderColor: colors.border,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
   },
   multiInput: {
     flexGrow: 1,

package/src/composer.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode, type Ref, useCallback, useEffect, useState } from "react";
 import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
-import { Button } from "./button";
+import { IconButton } from "./icon_button";
 import { colors } from "./colors";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
@@ -156,10 +156,11 @@ export function Composer(props: ComposerProps) {
 
   const sendButton =
     disabled && onStop ? (
-      <Button onPress={onStop} color="primary" icon="square" tooltip={stopLabel} accessibilityLabel={stopLabel} />
+      <IconButton onPress={onStop} size="lg" color="primary" icon="square" tooltip={stopLabel} accessibilityLabel={stopLabel} />
     ) : (
-      <Button
+      <IconButton
         onPress={handleSend}
+        size="lg"
         color="primary"
         disabled={disabled || effectiveSendDisabled}
         icon="arrow-up"

package/src/control_surface.ts

@@ -1,10 +1,21 @@
-import { type TextStyle, type ViewStyle } from "react-native";
+import { type ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 /** The system control height — every band control (chips, pills, search,
  *  buttons) aligns to it so a toolbar row reads as one band. */
 export const CONTROL_HEIGHT = 40;
 
+/** The system control radius — every interactive control surface (Button, the
+ *  inputs/selects/pickers, SearchInput, MenuButton, Tabs, the SegmentedControl
+ *  track, and ChipGroup/FilterChip/Chip via the surfaces below) wears it,
+ *  so the whole control vocabulary reads as one family. Containers are
+ *  deliberately larger (Card 16, the review card 12); a nested element inside a
+ *  padded control (a segmented thumb, a combobox chip) takes `CONTROL_RADIUS −
+ *  padding` so its corner stays CONCENTRIC with the parent's — set it equal and
+ *  the inner corner bulges past the outer curve. Round-by-function controls
+ *  (avatars, dots, switches, sliders, progress, icon buttons) stay full. */
+export const CONTROL_RADIUS = 10;
+
 /** The active/open edge for an interactive control — a 2px zinc-900 ring flush
  *  against the box (offset 0), MIRRORING the keyboard `:focus-visible` outline
  *  (index.css). A mouse-opened popover trigger (Picker / Combobox / InlineSelect /
@@ -13,17 +24,6 @@ export const CONTROL_HEIGHT = 40;
  *  beside the kit's focus outline and selected-pill ring. */
 export const ACTIVE_RING = `0 0 0 2px ${colors.zinc[900]}`;
 
-/** THE white toolbar-input surface — a rounded-full white pill with a one-step-up
- *  zinc-300 border. A search/select control (SearchInput, and Combobox via `pill`)
- *  wears it so it reads as a view-control beside ChipGroup/FilterPill on the
- *  zinc-50 canvas (where the fill pops), not as a form field that vanishes into a
- *  white card. One definition so the two controls never drift. */
-export const inputPillStyle: TextStyle = {
-  borderRadius: 999,
-  backgroundColor: colors.white,
-  borderColor: colors.zinc[300],
-};
-
 /** THE review-card surface — the bordered white card every "AI proposes, you
  *  decide" surface wears (`ReviewCard`, and the whole-set `ChangeReview`), so the
  *  review family reads as ONE contract instead of look-alikes drifting apart. One
@@ -41,7 +41,7 @@ export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50]
 
 /**
  * THE pill-surface contract — the single definition of the bordered, white,
- * rounded interactive surface shared by `ChipGroup` chips and `PillButton` (and
+ * rounded interactive surface shared by `ChipGroup` chips and `Chip` (and
  * anything composed on them). Returns the style for the CURRENT pressable state,
  * so the hover (white → zinc-100) and press (zinc-200) washes live in ONE place
  * instead of drifting per control — and any control built on it hovers without
@@ -49,7 +49,7 @@ export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50]
  * crisp 2px dark edge, no layout shift). Each control adds its own padding/layout
  * on top.
  */
-export function pillSurfaceStyle(
+export function chipSurfaceStyle(
   state: { hovered?: boolean; pressed?: boolean },
   opts?: { selected?: boolean },
 ): ViewStyle {
@@ -57,7 +57,7 @@ export function pillSurfaceStyle(
   return {
     height: CONTROL_HEIGHT,
     justifyContent: "center",
-    borderRadius: 999,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: selected ? colors.zinc[900] : colors.border,
     backgroundColor: state.pressed ? colors.zinc[200] : state.hovered ? colors.zinc[100] : colors.white,

package/src/date_field.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Text } from "./text";
 import { DateSegments } from "./date_segments_field";
 import { SegmentLabels, dateSegmentsConfig } from "./date_segments";
@@ -144,7 +145,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 8,
     gap: 4,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,

package/src/date_filter.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useRef, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { MenuButton } from "./menu_button";
 import { Calendar, CalendarRangeValue, CalendarRef } from "./date_calendar";
 import { TimeField } from "./time_field";
@@ -336,7 +337,7 @@ export function DateFilter(props: DateFilterProps) {
 const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.white,
-    borderRadius: 8,
+    borderRadius: CONTROL_RADIUS,
     gap: 16,
   },
   presetsSidebar: {

package/src/date_range_filter_field.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
 import { Icon } from "./icon";
 import { Button } from "./button";
 import { PressableHighlight } from "./pressable_highlight";
@@ -130,7 +131,7 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
             paddingHorizontal: 12,
             borderWidth: 1,
             borderColor: colors.zinc[300],
-            borderRadius: 8,
+            borderRadius: CONTROL_RADIUS,
             backgroundColor: colors.white,
           }}
         >

package/src/dialog.tsx

@@ -3,7 +3,7 @@ import { Animated, Modal, StyleSheet, View, ScrollView } from "react-native";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { PortalHost } from "@lotics/ui/portal";
 import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
+import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { BackButton } from "@lotics/ui/back_button";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
@@ -163,7 +163,7 @@ export function Dialog(props: DialogProps) {
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
                       <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
-                        <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
+                        <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
                       </View>
                       <View style={styles.container}>{children}</View>
                     </View>

package/src/discrepancy.tsx

@@ -88,7 +88,7 @@ export function Discrepancy(props: DiscrepancyProps) {
 
           {onFlag ? (
             <View style={styles.footer}>
-              <Button title="Flag for review" color="muted" shape="rounded" onPress={onFlag} />
+              <Button title="Flag for review" color="muted" onPress={onFlag} />
             </View>
           ) : null}
         </>

package/src/drawer.tsx

@@ -3,7 +3,6 @@ import { Modal, Pressable, StyleSheet, View } from "react-native";
 import { useScreenSize } from "@lotics/ui/use_screen_size";
 import { PortalHost } from "@lotics/ui/portal";
 import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
 import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
@@ -112,7 +111,7 @@ export function Drawer(props: DrawerProps) {
                   />
                 </View>
               ) : null}
-              <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
+              <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
             </View>
             <View testID={testID} style={styles.body}>
               {children}