@lotics/ui 7.0.0 → 7.1.0

package/AGENTS.md

@@ -171,7 +171,7 @@ This is the most common thing to get right. Match the JOB to the pattern:
 ### Inline edit — the preferred way to edit an existing record
 When the whole record is editable (a detail/record screen, dense settings), don't wrap it in a
 form mode or a preview↔edit card — make each VALUE inline-editable: it reads as plain text,
-hover tints it (no pencil — that shifts), click swaps the input in **at the same height** (zero
+hover reveals its border (it's a field — no grey tint, no pencil that shifts), click swaps the input in **at the same height** (zero
 reflow, the whole point), and it commits on blur (Enter saves, Escape reverts) or via
 `controls="buttons"` (✓ primary / ✕). One per type — `InlineTextInput` · `InlineNumberInput`
 (`format` for currency/units) · `InlineSelect` (plain options OR `renderOptionContent`; floats an
@@ -547,9 +547,10 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   resets the native outline. Every interactive control paints its OWN ring; nothing rings unless it
   opts in. Three ways, pick by base:
   - **`FocusRingPressable`** (`@lotics/ui/focus_ring_pressable`) — a `Pressable` that rings on keyboard
-    focus; the default for a raw interactive element (cell, tile, nav button, menu option). Forwards
-    all `PressableProps` (onPress, accessibilityRole/Label/State, ref, style). Reach for this before
-    hand-rolling a Pressable + the hook.
+    focus, WITHOUT the hover wash; the base for any control whose hover affordance is its BORDER not a wash
+    (inputs/selects, the inline editors, cells, tiles, nav buttons, menu options). Forwards all
+    `PressableProps`; its state-fn `style` exposes `hovered`/`focusVisible` so the control paints its own
+    border-hover. Reach for this before hand-rolling a Pressable + the hook.
   - **`PressableHighlight`** — set the opt-in **`focusRing`** prop (or read `state.focusVisible` from
     its style-fn / children for a bespoke treatment, e.g. `CardSelectItem` which rings on hover/press/focus).
   - **`useFocusRing`** (`@lotics/ui/use_focus_ring`) — the underlying hook for inputs / custom surfaces.
@@ -562,14 +563,26 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   its open state so it reads identically to a keyboard-focused control. **Coverage is a contract:** EVERY
   interactive control must ring (a focusable control with no focus treatment is a bug — the per-Pressable
   audit is the gate); a surface that shouldn't ring is a non-control → `tabIndex={-1}`, not a missing ring.
-- **A trigger's hover/focus is a contract too — build it on `PressableHighlight`, never a raw `Pressable`.**
-  Every popover/menu/select anchor (`Select`, `FilterChip`, `Switcher`, the inline editors, a custom
-  `PopoverTrigger`) rides `PressableHighlight` (or `FocusRingPressable`): it paints the hover **wash** +
-  focus ring AROUND the caller's `style`, so a borderless in-cell override (`style={{ borderColor:
-  "transparent" }}` on a `Select`) keeps the wash and reads like its inline neighbours. A raw `Pressable`
-  that hand-rolls its own hover is the bug — a caller's `borderColor` then erases the affordance. Layer the
-  hover-border BEFORE `style` (a transparent edge suppresses it → wash only) and the open ring (`FOCUS_RING`)
-  on the open state.
+- **Hover intensifies a control's OWN resting signature — never a foreign affordance. Pick the base by WHAT THE SURFACE IS; never a raw `Pressable`.** The one rule behind every interactive control:
+  - **Fields** (type into / pick from) — `TextInputField`, `Picker`, `Select`, `Combobox`'s input,
+    `NumberInput`, `DateField`/`TimePicker`, `DateRangeFilterField`, the inline editors
+    (`InlineSelect`/`InlineDatePicker` via `InlineEditView`) — signature is a BORDER → hover DARKENS it to
+    `HOVER_BORDER` (a borderless in-cell field REVEALS one). Build on **`FocusRingPressable`** (ring + a11y
+    + a `state.hovered`/`focusVisible` style-fn, NO wash); layer the hover-border AFTER `style` so it wins
+    over the caller's resting edge; put the open ring (`FOCUS_RING`) on the open state. **A field NEVER
+    greys its content.**
+  - **Actions** — `Button`, `IconButton` — signature is a FILL → hover DARKENS the fill (own colour logic).
+    Never a border, never a wash.
+  - **Pills / toggles** — `Chip`/`ChipGroup`/`FilterChip` (via `chipSurfaceStyle`), `SegmentedControl`,
+    `Tabs`, `Switcher`, `RadioPicker` — signature is a pill SURFACE → hover WASHES it (white→zinc-100);
+    selected adds a ring/fill.
+  - **Surfaces** — `PressableRow`, `MenuButton`, list/menu items, `CardSelectItem`, `Card`, `Accordion` —
+    signature is a row/card SURFACE → hover WASHES it. Build on **`PressableHighlight`** — the grey wash IS
+    the affordance (its whole job; it's in the name).
+  - The bug this prevents: a FIELD built on `PressableHighlight` inherits the wash AND its own border →
+    it greys *and* animates its edge while its siblings only border-hover (`Select`/`DateRangeFilterField`/
+    the inline editors did exactly this pre-7.x). Reach for `PressableHighlight` on a bordered/input control
+    and you've made it.
 - **Cards are banded — and composable** (all from `@lotics/ui/card`):
   ```tsx
   <Card style={{ padding: 0 }}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/date_range_filter_field.tsx

@@ -5,7 +5,7 @@ import { colors } from "./colors";
 import { CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { Icon } from "./icon";
 import { Button } from "./button";
-import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import { DateFilter, DateFilterValue, DateFilterLabels } from "./date_filter";
 import { formatDate } from "./format_date";
@@ -120,8 +120,7 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
   return (
     <Popover open={open} onOpenChange={setOpen} side="bottom" align="start">
       <PopoverTrigger>
-        <PressableHighlight
-          focusRing
+        <FocusRingPressable
           testID={testID}
           accessibilityRole="button"
           accessibilityLabel={labels.selectDateRange}
@@ -143,7 +142,7 @@ export function DateRangeFilterField(props: DateRangeFilterFieldProps) {
             {display}
           </Text>
           <Icon name="chevron-down" size={14} color={colors.zinc[400]} />
-        </PressableHighlight>
+        </FocusRingPressable>
       </PopoverTrigger>
       <PopoverContent disableBodyScroll>
         <DateFilter

package/src/focus_ring_pressable.tsx

@@ -2,20 +2,37 @@ import { Pressable, type PressableProps, type StyleProp, type View, type ViewSty
 import { type Ref } from "react";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing, composeHandler } from "./use_focus_ring";
+import { type PressableHighlightState } from "./pressable_highlight";
 
-export interface FocusRingPressableProps extends PressableProps {
+export interface FocusRingPressableProps extends Omit<PressableProps, "style"> {
   ref?: Ref<View>;
+  /**
+   * Narrows the state-function `style` to `PressableHighlightState`, so a control can
+   * read the web-only `hovered` (to paint its OWN border-hover) and `focusVisible`,
+   * exactly like `PressableHighlight` — the wash-free base still hands controls the
+   * flags they need to drive their edge.
+   */
+  style?: StyleProp<ViewStyle> | ((state: PressableHighlightState) => StyleProp<ViewStyle>);
+  /**
+   * `"none"` on a value/text surface (an inline-edit box) — a pressable is a button,
+   * not a selection surface, so a drag-click edits instead of starting a text
+   * selection. Exposed because RN types only carry `userSelect` on `TextStyle` while
+   * react-native-web applies it to any element.
+   */
+  userSelect?: "auto" | "none";
 }
 
 /**
  * A `Pressable` that paints the kit `FOCUS_RING` on keyboard focus — the raw-control
  * counterpart to `PressableHighlight`'s `focusRing` prop, for interactive elements
- * that DON'T want the hover wash (cells, tiles, nav buttons, menu options). Forwards
- * every `PressableProps` (onPress, accessibilityRole/Label/State, ref, …) and merges
- * the ring with the caller's `style` (object or state-function) + onFocus/onBlur.
- * Reach for this before hand-rolling a one-off Pressable + `useFocusRing`.
+ * that DON'T want the hover wash (the inputs/selects, cells, tiles, nav buttons, menu
+ * options). Forwards every `PressableProps` (onPress, accessibilityRole/Label/State,
+ * ref, …); its state-function `style` exposes `hovered`/`focusVisible` so a control
+ * paints its own border-hover, and it merges the focus ring + onFocus/onBlur. Reach
+ * for this for ANY interactive control whose hover affordance is its border (never a
+ * wash) — `PressableHighlight` is only for rows/menus/cards.
  */
-export function FocusRingPressable({ ref, style, onFocus, onBlur, ...rest }: FocusRingPressableProps) {
+export function FocusRingPressable({ ref, style, onFocus, onBlur, userSelect, ...rest }: FocusRingPressableProps) {
   const { focusVisible, focusProps } = useFocusRing();
   return (
     <Pressable
@@ -25,7 +42,8 @@ export function FocusRingPressable({ ref, style, onFocus, onBlur, ...rest }: Foc
       onBlur={composeHandler(onBlur ?? undefined, focusProps.onBlur)}
       style={(state) =>
         [
-          typeof style === "function" ? style(state) : style,
+          userSelect ? ({ userSelect } as ViewStyle) : null,
+          typeof style === "function" ? style({ ...state, focusVisible }) : style,
           focusVisible ? { boxShadow: FOCUS_RING } : null,
         ] as StyleProp<ViewStyle>
       }

package/src/inline_edit.tsx

@@ -3,9 +3,9 @@ import { View, StyleSheet, type GestureResponderEvent } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
 import { ActivityIndicator } from "./activity_indicator";
-import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
-import { FOCUS_RING, CONTROL_RADIUS } from "./control_surface";
+import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
@@ -124,7 +124,8 @@ interface InlineEditViewProps {
 
 /**
  * The view-mode box of an inline-editable field: the value as plain text in a
- * `PressableHighlight` (hover tints it; the pointer cursor signals it's
+ * `FocusRingPressable` (an input, so it hovers via its BORDER — the transparent
+ * edge reveals on hover, never a grey wash; the pointer cursor signals it's
  * editable), at the kit's control height with a transparent border — so
  * swapping to an input, or floating a dropdown above it, never shifts the
  * layout. Used by `InlineEditFrame`, and as the overlay trigger for the
@@ -141,15 +142,17 @@ export function InlineEditView(props: InlineEditViewProps) {
       }
     : undefined;
   return (
-    <PressableHighlight
-      focusRing
+    <FocusRingPressable
       ref={ref}
       disabled={disabled}
       onPress={handlePress}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
-      style={[styles.view, active && styles.viewActive]}
+      // An inline-edit field is an input — it hovers via its BORDER, not a grey
+      // wash: the transparent edge reveals on hover (the kit's hover-border),
+      // then fills + rings when open. Suppressed while open (the ring leads).
+      style={(state) => [styles.view, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
     >
       {typeof display === "string" ? (
         <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
@@ -159,7 +162,7 @@ export function InlineEditView(props: InlineEditViewProps) {
         <View style={styles.viewNode}>{display}</View>
       )}
       {trailing != null ? trailing : null}
-    </PressableHighlight>
+    </FocusRingPressable>
   );
 }
 
@@ -250,6 +253,11 @@ const styles = StyleSheet.create({
     borderColor: colors.border,
     boxShadow: FOCUS_RING,
   },
+  // Hover (not open): reveal the kit hover-border on the transparent edge — the
+  // input-family affordance, no grey wash.
+  viewHovered: {
+    borderColor: HOVER_BORDER,
+  },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },

package/src/select.tsx

@@ -2,7 +2,7 @@ import { StyleSheet, View, type GestureResponderEvent, type StyleProp, type View
 import { useState, useCallback, useMemo, type ReactNode, type Ref } from "react";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
-import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Text } from "./text";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
@@ -217,13 +217,13 @@ function SelectTrigger<T extends string>({
   const hasSelection = selectedItems.length > 0;
 
   return (
-    // PressableHighlight owns the hover wash + keyboard focus ring (layered AROUND
-    // the caller's `style`, so a borderless override — `borderColor:"transparent"`
-    // for an in-cell Select — keeps the wash and reads like its inline neighbours).
-    // The hover-border sits BEFORE `style` so a transparent border suppresses it
-    // (wash only), while a bordered Select darkens its edge.
-    <PressableHighlight
-      focusRing
+    // The wash-free control base (FOCUS_RING + a11y, NO grey wash) — a Select is an
+    // input, so its hover affordance is its BORDER, never a content wash. The
+    // hover-border sits AFTER `style` so it wins over the caller's resting border:
+    // a bordered Select darkens its edge, and a borderless in-cell Select
+    // (`borderColor:"transparent"`) REVEALS one — both reading as "interactive",
+    // neither greying its content.
+    <FocusRingPressable
       ref={ref}
       testID={testID}
       // Without a role this Pressable renders as an unfocusable <div> on web — the
@@ -233,7 +233,7 @@ function SelectTrigger<T extends string>({
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       accessibilityState={{ expanded: open, disabled }}
-      style={(state) => [styles.pressable, CONTROL_TRANSITION, open && styles.opened, disabled && styles.disabled, state.hovered && !disabled && { borderColor: HOVER_BORDER }, style]}
+      style={(state) => [styles.pressable, CONTROL_TRANSITION, open && styles.opened, disabled && styles.disabled, style, state.hovered && !disabled && { borderColor: HOVER_BORDER }]}
       onPress={!disabled ? onPress : undefined}
       disabled={disabled}
     >
@@ -267,7 +267,7 @@ function SelectTrigger<T extends string>({
           {placeholder}
         </Text>
       )}
-    </PressableHighlight>
+    </FocusRingPressable>
   );
 }