@lotics/ui 2.4.0 → 2.5.0

package/src/line_chart.tsx

@@ -2,7 +2,7 @@ import { View, StyleSheet, LayoutChangeEvent } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { useMemo, useState, useCallback } from "react";
-import Svg, { Polyline, Circle, Line } from "react-native-svg";
+import Svg, { Circle, Defs, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
 
 export interface LineChartPoint {
   x: string | number;
@@ -41,44 +41,49 @@ export function LineChart(props: LineChartProps) {
 
   const paddingTop = 8;
   const paddingBottom = 8;
-  const paddingRight = 8;
+  const paddingLeft = 6;
+  const paddingRight = 10;
 
+  // Nice domain AROUND the data — a 16–18% series must not be drawn against
+  // a 0–20 axis (it flattens into a sliver at the top). The baseline snaps
+  // to 0 only when the data actually lives near 0.
   const yAxisTicks = useMemo(() => {
-    const rawMax = Math.max(...data.map((d) => d.y), 1);
-    const magnitude = Math.pow(10, Math.floor(Math.log10(rawMax)));
-    const normalized = rawMax / magnitude;
-    let niceMax: number;
-    if (normalized <= 1) niceMax = magnitude;
-    else if (normalized <= 2) niceMax = 2 * magnitude;
-    else if (normalized <= 5) niceMax = 5 * magnitude;
-    else niceMax = 10 * magnitude;
-
-    const tickCount = 4;
-    const step = niceMax / tickCount;
+    const ys = data.map((d) => d.y);
+    const lo = Math.min(...ys, 0 === ys.length ? 0 : Infinity);
+    const hi = Math.max(...ys, lo);
+    const span = hi - lo || Math.abs(hi) || 1;
+    let min = lo - span * 0.2;
+    let max = hi + span * 0.2;
+    if (lo >= 0 && lo <= span) min = Math.max(0, min === lo ? 0 : min);
+    if (lo >= 0 && min < 0) min = 0;
+    const rawStep = (max - min) / 4 || 1;
+    const mag = Math.pow(10, Math.floor(Math.log10(rawStep)));
+    const norm = rawStep / mag;
+    const step = (norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 2.5 ? 2.5 : norm <= 5 ? 5 : 10) * mag;
+    min = Math.floor(min / step) * step;
+    max = Math.ceil(max / step) * step;
     const ticks: number[] = [];
-    for (let i = 0; i <= tickCount; i++) {
-      ticks.push(i * step);
-    }
-    return { ticks, max: niceMax };
+    for (let t = min; t <= max + step / 1e6; t += step) ticks.push(Number(t.toFixed(10)));
+    return { ticks, min, max };
   }, [data]);
 
-  const maxValue = yAxisTicks.max;
+  const { min: minValue, max: maxValue } = yAxisTicks;
 
   const drawnPoints = useMemo(() => {
     if (data.length === 0 || chartWidth === 0) return [];
 
-    const availableWidth = chartWidth - paddingRight;
+    const availableWidth = chartWidth - paddingLeft - paddingRight;
     const availableHeight = chartHeight - paddingTop - paddingBottom;
+    const range = maxValue - minValue || 1;
 
     return data.map((point, index) => {
       const x =
-        data.length > 1
-          ? (index / (data.length - 1)) * availableWidth
-          : availableWidth / 2;
-      const y = paddingTop + availableHeight - (point.y / maxValue) * availableHeight;
+        paddingLeft +
+        (data.length > 1 ? (index / (data.length - 1)) * availableWidth : availableWidth / 2);
+      const y = paddingTop + availableHeight - ((point.y - minValue) / range) * availableHeight;
       return { x, y, raw: point };
     });
-  }, [data, chartWidth, maxValue, chartHeight]);
+  }, [data, chartWidth, minValue, maxValue, chartHeight]);
 
   const polylinePoints = drawnPoints.map((p) => `${p.x},${p.y}`).join(" ");
 
@@ -126,34 +131,55 @@ export function LineChart(props: LineChartProps) {
           <View style={[styles.svgContainer, { height: chartHeight }]} onLayout={handleLayout}>
             {chartWidth > 0 && (
               <Svg width={chartWidth} height={chartHeight}>
+                <Defs>
+                  {/* soft area wash under the line — depth without decoration */}
+                  <LinearGradient id="lineChartArea" x1="0" y1="0" x2="0" y2="1">
+                    <Stop offset="0" stopColor={lineColor} stopOpacity={0.16} />
+                    <Stop offset="1" stopColor={lineColor} stopOpacity={0.01} />
+                  </LinearGradient>
+                </Defs>
                 {yAxisTicks.ticks.map((tick, i) => {
                   const availableHeight = chartHeight - paddingTop - paddingBottom;
-                  const y = paddingTop + availableHeight - (tick / maxValue) * availableHeight;
+                  const range = maxValue - minValue || 1;
+                  const y = paddingTop + availableHeight - ((tick - minValue) / range) * availableHeight;
                   return (
                     <Line
                       key={i}
-                      x1={0}
+                      x1={paddingLeft}
                       y1={y}
                       x2={chartWidth - paddingRight}
                       y2={y}
-                      stroke={colors.zinc[200]}
+                      stroke={i === 0 ? colors.zinc[200] : colors.zinc[100]}
                       strokeWidth={1}
                     />
                   );
                 })}
+                {drawnPoints.length > 1 && (
+                  <Polygon
+                    points={`${polylinePoints} ${drawnPoints[drawnPoints.length - 1].x},${chartHeight - paddingBottom} ${drawnPoints[0].x},${chartHeight - paddingBottom}`}
+                    fill="url(#lineChartArea)"
+                    stroke="none"
+                  />
+                )}
                 {drawnPoints.length > 1 && (
                   <Polyline
                     points={polylinePoints}
                     fill="none"
                     stroke={lineColor}
-                    strokeWidth={2}
+                    strokeWidth={2.5}
                     strokeLinejoin="round"
                     strokeLinecap="round"
                   />
                 )}
-                {drawnPoints.map((point, index) => (
-                  <Circle key={index} cx={point.x} cy={point.y} r={3} fill={lineColor} />
-                ))}
+                {drawnPoints.map((point, index) => {
+                  const isLast = index === drawnPoints.length - 1;
+                  return isLast ? (
+                    // the latest value is the story — emphasize its point
+                    <Circle key={index} cx={point.x} cy={point.y} r={4.5} fill={lineColor} stroke={colors.white} strokeWidth={2} />
+                  ) : (
+                    <Circle key={index} cx={point.x} cy={point.y} r={3} fill={colors.white} stroke={lineColor} strokeWidth={1.5} />
+                  );
+                })}
               </Svg>
             )}
           </View>
@@ -198,13 +224,14 @@ const styles = StyleSheet.create({
     gap: 4,
   },
   yAxis: {
-    width: 56,
+    width: 48,
     justifyContent: "space-between",
-    alignItems: "flex-start",
+    alignItems: "flex-end",
     paddingVertical: 4,
+    paddingRight: 4,
   },
   yAxisLabel: {
-    textAlign: "left",
+    textAlign: "right",
   },
   svgContainer: {
     flex: 1,

package/src/link_button.tsx

@@ -0,0 +1,50 @@
+import { StyleSheet } from "react-native";
+import { Text } from "./text";
+import { PressableHighlight } from "./pressable_highlight";
+
+export interface LinkButtonProps {
+  title: string;
+  onPress: () => void;
+  /** Defaults to `title`. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/**
+ * A quiet inline action — "Clear", "Select all", "Show more" — styled as a GHOST
+ * button: dark medium text with no chrome at rest and a soft rounded hover wash,
+ * compact (not the 40px `Button`). The low-emphasis sibling of `Button` for
+ * utility actions in a popover footer or a list's select-all row; it never
+ * competes with a real/commit button, and reads more premium than an underlined
+ * link or a filled/muted Button.
+ */
+export function LinkButton(props: LinkButtonProps) {
+  const { title, onPress, accessibilityLabel, testID } = props;
+  return (
+    <PressableHighlight
+      testID={testID}
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      userSelect="none"
+      style={styles.btn}
+    >
+      <Text size="sm" weight="medium">
+        {title}
+      </Text>
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  // The hover wash needs horizontal padding, but the negative margin cancels it
+  // for POSITIONING — so the text sits flush with the surrounding content's left
+  // edge (the option rows above, the editor body) while the wash bleeds outward.
+  btn: {
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+    borderRadius: 8,
+    alignSelf: "flex-start",
+  },
+});

package/src/metric.tsx

@@ -1,6 +1,7 @@
 import { View, StyleSheet, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { formatCompactNumber, formatMoney } from "./format_money";
 import { useMemo } from "react";
 
 export type MetricFormat = "currency" | "number" | "percentage" | "none";
@@ -19,6 +20,11 @@ export type MetricSize = "sm" | "md" | "lg" | "hero";
 
 export interface MetricProps {
   value: number | string | null | undefined;
+  /** Abbreviate large numeric values for display density: ≥1 tỷ → "1,28 tỷ",
+   *  ≥1 triệu → "486 tr" (vi convention; other locales fall back to compact
+   *  notation). For stat strips/cards where the full figure lives in the
+   *  table below — never for the table itself. */
+  compact?: boolean;
   previousValue?: number | string | null | undefined;
   format?: MetricFormat;
   currency?: string;
@@ -59,26 +65,27 @@ export function Metric(props: MetricProps) {
     value,
     previousValue,
     format,
-    currency = "USD",
+    currency = "VND",
     locale,
     emptyLabel = "-",
     tone = "default",
     size = "md",
+    compact = false,
   } = props;
 
   const displayValue = useMemo(() => {
+    // vi-VN by default on every branch — "18,4%", not "18.4%". A system
+    // locale fallback makes the same dashboard render differently per
+    // machine.
+    const resolvedLocale = locale ?? "vi-VN";
     if (value === null || value === undefined) return emptyLabel;
-    if (format === "currency" && typeof value === "number") {
-      return value.toLocaleString(locale, { style: "currency", currency });
-    }
-    if (format === "number" && typeof value === "number") {
-      return value.toLocaleString(locale);
-    }
-    if (format === "percentage" && typeof value === "number") {
-      return `${value.toLocaleString(locale)}%`;
-    }
+    if (typeof value !== "number") return String(value);
+    if (format === "currency") return formatMoney(value, { locale: resolvedLocale, currency, compact });
+    if (compact && Math.abs(value) >= 1_000_000) return formatCompactNumber(value, resolvedLocale);
+    if (format === "number") return value.toLocaleString(resolvedLocale);
+    if (format === "percentage") return `${value.toLocaleString(resolvedLocale)}%`;
     return String(value);
-  }, [value, format, currency, locale, emptyLabel]);
+  }, [value, format, currency, locale, emptyLabel, compact]);
 
   const trend = useMemo(() => {
     if (previousValue === undefined || previousValue === null) return null;
@@ -139,8 +146,10 @@ export function Metric(props: MetricProps) {
 }
 
 const styles = StyleSheet.create({
+  // No flex grow/shrink: the value keeps its intrinsic width so that in a
+  // wrap-row (KPICard's value + trend chip) the CHIP drops to the next line
+  // when space runs out — never the number breaking mid-value.
   container: {
-    flex: 1,
     justifyContent: "center",
     alignItems: "flex-start",
     gap: 4,

package/src/pagination.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { IconButton } from "./icon_button";
 import { Text } from "./text";
-import { colors } from "./colors";
 
 export interface PaginationProps {
   /** 0-indexed. */
@@ -22,9 +21,11 @@ export interface PaginationProps {
 }
 
 /**
- * Pagination footer: summary on the left, page indicator + arrows on the
- * right. Self-contained — has its own border-top so it composes as a footer
- * inside DataGrid OR as a standalone control elsewhere.
+ * Pagination control: range summary on the left, page indicator + arrows on the
+ * right. A pure control — it owns no border, background, or padding. The
+ * container that frames it (a `CardFooter`, a grid footer, a bordered band)
+ * supplies the divider and insets, so the same control composes anywhere without
+ * doubling up a border.
  */
 export function Pagination(props: PaginationProps): React.ReactNode {
   const { page, pageSize, rowCount, hasMore, total, loading, onPageChange } = props;
@@ -78,11 +79,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderTopWidth: 1,
-    borderTopColor: colors.border,
-    backgroundColor: colors.background,
   },
   summary: { flex: 1 },
   controls: {

package/src/peek.tsx

@@ -0,0 +1,68 @@
+import { type ReactNode } from "react";
+import { StyleSheet } from "react-native";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import type { PopoverSide, PopoverAlign } from "./popover";
+import { PressableHighlight } from "./pressable_highlight";
+
+export interface PeekProps {
+  /** The inline reference that becomes the trigger — a customer name, a
+   * record id, a member chip. Rendered inside a PressableHighlight (hover
+   * wash signals pressability without restyling the text). */
+  children: ReactNode;
+  /** The instant detail revealed on press — compose Text/Divider/Button
+   * rows. Keep it a summary with ONE action to the full record; a peek
+   * that needs scrolling wanted to be a screen. */
+  content: ReactNode;
+  /** Announced name for the trigger ("Hồ sơ KOMASPEC VIỆT NAM"). */
+  accessibilityLabel: string;
+  side?: PopoverSide;
+  align?: PopoverAlign;
+}
+
+/**
+ * Drill-down for inline references — press a name/id where it appears and
+ * get its details in a popover, without leaving the screen. The companion
+ * to the count drill-downs (KPIStrip `onPress`, Accordion rows): counts
+ * open the records behind a number, Peek opens the record behind a
+ * reference. Use it on every entity mention that has more to say —
+ * customer names, order ids, member names, linked records.
+ */
+export function Peek(props: PeekProps) {
+  const { children, content, accessibilityLabel, side = "bottom", align = "start" } = props;
+  return (
+    <Popover side={side} align={align}>
+      <PopoverTrigger>
+        <PressableHighlight
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          style={styles.trigger}
+          // 32px visual, 40px touch target (32 + 2×4) — same as IconButton.
+          hitSlop={4}
+        >
+          {children}
+        </PressableHighlight>
+      </PopoverTrigger>
+      <PopoverContent style={styles.content} disableBodyScroll>
+        {content}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Inline bleed at the 32px chip register (matches Badge scale, fits inside
+  // text rows without inflating them); negative margins absorb the extra
+  // height so the line's layout never shifts. hitSlop keeps the 40px target.
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 32,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+    marginVertical: -4,
+  },
+  content: {
+    width: 320,
+  },
+});

package/src/picker.tsx

@@ -33,6 +33,10 @@ export type PickerOnClose<T extends string, MULTI extends boolean> = MULTI exten
 export interface PickerProps<T extends string = string, MULTI extends boolean = false> {
   options?: (PickerOption<T> | undefined | false)[];
   placeholder?: string;
+  /** Accessible name for the control. Required in spirit whenever the picker
+   *  has no visible label next to it (e.g. an unlabeled toolbar filter) — the
+   *  selected option's text describes the value, not the control. */
+  accessibilityLabel?: string;
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -70,6 +74,7 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
     includeEmptyOption,
     onValueChange,
     placeholder,
+    accessibilityLabel,
     style,
     disabled = false,
     autoFocus = false,
@@ -105,6 +110,7 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
       <RNPicker
         ref={pickerRef}
         testID={testID}
+        accessibilityLabel={accessibilityLabel}
         // Empty selection maps to "" (the placeholder option's value), never
         // undefined — otherwise the native <select> goes uncontrolled and a
         // programmatic reset to null leaves the prior DOM selection in place.
@@ -144,6 +150,7 @@ function CustomPicker<T extends string, MULTI extends boolean = false>(
     options = [],
     value,
     placeholder,
+    accessibilityLabel,
     multi = false as MULTI,
     renderOptionContent,
     includeEmptyOption,
@@ -188,6 +195,7 @@ function CustomPicker<T extends string, MULTI extends boolean = false>(
           renderOptionContent={renderOptionContent}
           selectedItems={selectedItems}
           placeholder={placeholder}
+          accessibilityLabel={accessibilityLabel}
           disabled={disabled}
         />
       </PopoverTrigger>
@@ -244,6 +252,7 @@ function PickerTrigger<T extends string>({
   renderOptionContent,
   selectedItems,
   placeholder,
+  accessibilityLabel,
   disabled = false,
 }: {
   ref?: React.Ref<View>;
@@ -254,6 +263,7 @@ function PickerTrigger<T extends string>({
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   selectedItems: PickerOption<T>[];
   placeholder?: string;
+  accessibilityLabel?: string;
   disabled?: boolean;
 }) {
   const hasSelection = selectedItems.length > 0;
@@ -266,8 +276,10 @@ function PickerTrigger<T extends string>({
       // the trigger drops out of the tab order and Enter/Space can't open it.
       // `button` makes it tab-focusable and maps keyboard activation to onPress;
       // `expanded` announces open/closed to assistive tech. The accessible name
-      // comes from the visible selection/placeholder text below.
+      // comes from `accessibilityLabel` when given (an unlabeled control), else
+      // the visible selection/placeholder text below.
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityState={{ expanded: open, disabled }}
       style={[styles.pressable, open && styles.opened, disabled && styles.disabled, style]}
       onPress={!disabled ? onPress : undefined}

package/src/picker_menu.tsx

@@ -1,11 +1,11 @@
-import { StyleSheet, View, ScrollView, Pressable, TextInput } from "react-native";
+import { StyleSheet, View, ScrollView, TextInput } from "react-native";
 import { useState, useCallback, useMemo, useRef } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Checkbox } from "./checkbox";
-import { Spacer } from "./spacer";
 import { MenuButton } from "./menu_button";
+import { LinkButton } from "./link_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 import { useScreenSize } from "./use_screen_size";
@@ -311,17 +311,8 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       </ScrollView>
       {showLinks && (
         <View style={styles.selectAllContainer}>
-          {showSelectAllLink && (
-            <Pressable onPress={handleSelectAll}>
-              <Text color="zinc-500">{selectAllLabel}</Text>
-            </Pressable>
-          )}
-          <Spacer horizontal size={16} />
-          {showDeselectAllLink && (
-            <Pressable onPress={handleDeselectAll}>
-              <Text color="zinc-500">{deselectAllLabel}</Text>
-            </Pressable>
-          )}
+          {showSelectAllLink && <LinkButton title={selectAllLabel} onPress={handleSelectAll} />}
+          {showDeselectAllLink && <LinkButton title={deselectAllLabel} onPress={handleDeselectAll} />}
         </View>
       )}
     </View>
@@ -339,9 +330,10 @@ const styles = StyleSheet.create({
   selectAllContainer: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: 4,
-    paddingVertical: 8,
+    gap: 16,
+    paddingVertical: 4,
+    // Matches a MenuButton option's 8px text inset, so the bleeding-wash
+    // LinkButtons line up under the option labels above.
     paddingHorizontal: 8,
     borderTopWidth: 1,
     borderTopColor: colors.border,

package/src/pie_chart.tsx

@@ -35,6 +35,8 @@ export interface PieChartProps {
   showLegend?: boolean;
   formatNumber?: (n: number) => string;
   emptyLabel?: string;
+  /** Caption under the center total. Pass `null` to hide the center. */
+  centerLabel?: string | null;
 }
 
 export function PieChart(props: PieChartProps) {
@@ -44,6 +46,7 @@ export function PieChart(props: PieChartProps) {
     showLegend = true,
     formatNumber = defaultFormatNumber,
     emptyLabel = "No data",
+    centerLabel = "Total",
   } = props;
 
   const [isVerticalLayout, setIsVerticalLayout] = useState(false);
@@ -66,7 +69,7 @@ export function PieChart(props: PieChartProps) {
 
     const center = size / 2;
     const outerRadius = size / 2 - 4;
-    const innerRadius = outerRadius * 0.6;
+    const innerRadius = outerRadius * 0.66;
     const drawn: { path: string; color: string }[] = [];
     let currentAngle = -Math.PI / 2;
 
@@ -113,14 +116,25 @@ export function PieChart(props: PieChartProps) {
   return (
     <View style={styles.chartContainer} onLayout={handleLayout}>
       <View style={[styles.chartWrapper, isVerticalLayout && styles.chartWrapperVertical]}>
-        <View style={styles.pieContainer}>
+        <View style={[styles.pieContainer, { width: size, height: size }]}>
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
               {pieSlices.map((slice, index) => (
-                <Path key={index} d={slice.path} fill={slice.color} />
+                // white seams separate the slices — segments, not a color wheel
+                <Path key={index} d={slice.path} fill={slice.color} stroke={colors.white} strokeWidth={2} />
               ))}
             </G>
           </Svg>
+          {centerLabel !== null ? (
+            <View style={styles.center} pointerEvents="none">
+              <Text size="lg" weight="semibold" tabular>
+                {formatNumber(total)}
+              </Text>
+              <Text size="xs" color="muted">
+                {centerLabel}
+              </Text>
+            </View>
+          ) : null}
         </View>
         {showLegend && (
           <View style={[styles.legend, isVerticalLayout && styles.legendVertical]}>
@@ -132,9 +146,9 @@ export function PieChart(props: PieChartProps) {
                   <Text size="sm" numberOfLines={1} weight="medium" style={styles.legendLabel}>
                     {item.label}
                   </Text>
-                  <Text style={styles.legendValue}>{formatNumber(item.value)}</Text>
-                  <Text color="zinc-500" style={styles.legendPercentage}>
-                    ({percentage.toFixed(1)}%)
+                  <Text size="sm" tabular style={styles.legendValue}>{formatNumber(item.value)}</Text>
+                  <Text size="sm" color="zinc-500" tabular style={styles.legendPercentage}>
+                    {percentage.toFixed(0)}%
                   </Text>
                 </View>
               );
@@ -163,6 +177,13 @@ const styles = StyleSheet.create({
   },
   pieContainer: {
     flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  center: {
+    position: "absolute",
+    alignItems: "center",
+    gap: 0,
   },
   legend: {
     flex: 1,
@@ -187,10 +208,10 @@ const styles = StyleSheet.create({
   },
   legendValue: {
     minWidth: 40,
-    textAlign: "left",
+    textAlign: "right",
   },
   legendPercentage: {
-    minWidth: 48,
+    minWidth: 40,
     textAlign: "right",
   },
 });

package/src/pill_button.tsx

@@ -1,7 +1,7 @@
 import { Ref } from "react";
-import { colors } from "./colors";
 import { IconButton } from "./icon_button";
 import { PressableHighlight } from "./pressable_highlight";
+import { pillSurfaceStyle } from "./control_surface";
 import { StyleSheet, View } from "react-native";
 
 interface PillButtonProps {
@@ -19,11 +19,15 @@ export function PillButton(props: PillButtonProps) {
   return (
     <View ref={ref}>
       {onPress ? (
-        <PressableHighlight testID={testID} onPress={onPress} style={[styles.pill, onDismiss && styles.pillWithDismiss]}>
+        <PressableHighlight
+          testID={testID}
+          onPress={onPress}
+          style={(state) => [pillSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
+        >
           {children}
         </PressableHighlight>
       ) : (
-        <View style={[styles.pill, onDismiss && styles.pillWithDismiss]}>{children}</View>
+        <View style={[pillSurfaceStyle({}), styles.pillLayout, onDismiss && styles.pillWithDismiss]}>{children}</View>
       )}
       {onDismiss && (
         <View style={styles.dismissButton}>
@@ -41,15 +45,13 @@ export function PillButton(props: PillButtonProps) {
 }
 
 const styles = StyleSheet.create({
-  pill: {
+  // Surface (height/border/radius/white + hover) comes from pillSurfaceStyle;
+  // PillButton owns only its row layout.
+  pillLayout: {
     flexDirection: "row",
     alignItems: "center",
     gap: 4,
-    height: 40,
     paddingHorizontal: 12,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: colors.border,
   },
   pillWithDismiss: {
     paddingRight: 38,