@lotics/ui 2.4.1 → 2.6.0

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,

package/src/popover.tsx

@@ -519,7 +519,7 @@ export function PopoverContent(props: PopoverContentProps) {
         tabIndex={small ? undefined : -1}
         style={{
           position: "fixed",
-          padding: 8,
+          padding: 12,
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
           borderBottomLeftRadius: small ? 0 : 16,
@@ -595,15 +595,25 @@ export function PopoverContent(props: PopoverContentProps) {
 export interface PopoverFooterProps {
   children: React.ReactNode;
   showDivider?: boolean;
+  /** Action Layout rules: the closure/commit action sits RIGHT (`end`,
+   * the default); utility-left + commit-right → `space-between`;
+   * informational/custom-width footers → `start`. */
+  align?: "start" | "end" | "space-between";
 }
 
 export function PopoverFooter(props: PopoverFooterProps) {
-  const { children, showDivider = true } = props;
+  const { children, showDivider = true, align = "end" } = props;
+  const justifyContent =
+    align === "end" ? "flex-end" : align === "space-between" ? "space-between" : "flex-start";
 
   return (
-    <View>
+    // Pull out to the popover's edges (counteract its 12px inset) so the divider
+    // spans full width; the action row then re-insets to align with the body.
+    <View style={{ marginHorizontal: -12, marginTop: 12 }}>
       {showDivider && <Divider />}
-      <View style={{ padding: 8 }}>{children}</View>
+      <View style={{ paddingHorizontal: 12, paddingTop: 12, flexDirection: "row", alignItems: "center", gap: 8, justifyContent }}>
+        {children}
+      </View>
     </View>
   );
 }

package/src/pressable_highlight.tsx

@@ -32,6 +32,14 @@ export interface PressableHighlightProps extends PressableProps {
    * explicitly because the base React Native `PressableProps` type omits it.
    */
   onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
+  /**
+   * Pass "none" on row/card surfaces: a pressable surface is a button, not a
+   * text-selection surface — drag jitter on selectable text starts a
+   * selection and can swallow the click. Exposed as a prop because RN types
+   * only carry `userSelect` on TextStyle, while react-native-web applies it
+   * to any element.
+   */
+  userSelect?: "auto" | "none";
 }
 
 /**
@@ -47,6 +55,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltip,
     tooltipSide = "top",
     onPress,
+    userSelect,
     ...restPressableProps
   } = props;
   const tooltipProps = useTooltip({
@@ -71,7 +80,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
         const hovered = (state as { hovered?: boolean }).hovered;
         return [
           {
-            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
           },
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,

package/src/pressable_row.tsx

@@ -0,0 +1,91 @@
+import { ReactNode, useState } from "react";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { colors } from "./colors";
+
+export interface PressableRowProps {
+  onPress: () => void;
+  /** The open/selected record — paints the persistent highlight. */
+  selected?: boolean;
+  /** Part of a multi-select set — paints a persistent blue tint, distinct from
+   *  `selected` (the open record). The hover / open / press wash overrides it, so
+   *  it's the resting state of a ticked row in a bulk-select register. */
+  marked?: boolean;
+  /**
+   * - "bleed" (default): the standalone REGISTER row — px-20, square wash to
+   *   the card edges, separated by full-bleed `Divider`s. The one pattern for
+   *   top-level record lists.
+   * - "inset": a rounded, contained row — the wash is a rounded pill pulled in
+   *   from the edge (radius 8, marginH -8). Lives inside a padded container (an
+   *   `Accordion`'s drill-down rows, or a gap-separated selectable list) so the
+   *   wash insets from the card edge instead of bleeding to it. Use when rows are
+   *   GAP-separated rather than `Divider`-separated.
+   */
+  variant?: "bleed" | "inset";
+  /** Cells + trailing controls. Nested pressables (CTAs, checkboxes, ⋯)
+   * claim their own presses; put the accessible door inside — a plain
+   * `Pressable` with role="button" + "Open …" label around the row body. */
+  children: ReactNode;
+  /** Layout only (gap, minHeight overrides). The surface owns its press
+   * states — never pass backgroundColor for hover/selected. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * THE pressable-row surface for record lists: a role-less, non-focusable press
+ * target whose hover wash spans the ENTIRE row — including over nested controls
+ * (CTAs, ⋯, checkboxes) — because it tracks hover via DOM mouseenter/mouseleave
+ * rather than Pressability hover (react-native-web releases a parent
+ * pressable's hover to the innermost nested pressable, which would stop the
+ * wash short of trailing controls, and is why this can't be hand-rolled from
+ * `PressableHighlight`). The surface carries no button role (a button must not
+ * contain interactive descendants); the row body inside is the accessible door.
+ * `variant` picks bleed (registers) or inset (Accordion drill-down rows).
+ */
+export function PressableRow(props: PressableRowProps) {
+  const { onPress, selected = false, marked = false, variant = "bleed", children, style } = props;
+  const [hovered, setHovered] = useState(false);
+
+  // RN's types don't declare mouse handlers; react-native-web forwards them
+  // to the DOM element (same boundary cast PressableHighlight uses).
+  const mouseProps = {
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+  } as object;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      focusable={false}
+      {...mouseProps}
+      style={({ pressed }) => [
+        styles.row,
+        variant === "inset" ? styles.inset : styles.bleed,
+        {
+          backgroundColor: pressed ? colors.zinc[200] : selected ? colors.zinc[100] : hovered ? colors.zinc[100] : marked ? colors.blue[50] : undefined,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    ...({ cursor: "pointer", userSelect: "none", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+  },
+  // Square, full-bleed — lines up with the Dividers between register rows.
+  bleed: {
+    paddingHorizontal: 20,
+  },
+  // Rounded, pulled in from the edge — matches the Accordion's inset rows.
+  inset: {
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+  },
+});