@lotics/ui 5.8.0 → 5.10.0

package/src/gantt/gantt_view.tsx

@@ -1,7 +1,26 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { View, ScrollView, Pressable, StyleSheet } from "react-native";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { View, ScrollView, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
+import { FocusRingPressable } from "../focus_ring_pressable";
+
+function GanttButton(props: {
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  style: StyleProp<ViewStyle>;
+  children: ReactNode;
+}) {
+  return (
+    <FocusRingPressable
+      onPress={props.onPress}
+      accessibilityRole={props.onPress ? "button" : undefined}
+      accessibilityLabel={props.accessibilityLabel}
+      style={props.style}
+    >
+      {props.children}
+    </FocusRingPressable>
+  );
+}
 import { addDays, dayDiff } from "../calendar/dates";
 import { usePointerDrag } from "../use_pointer_drag";
 import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
@@ -74,11 +93,11 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
         {title ? <Text size="sm" color="muted">{title}</Text> : <View />}
         <View style={styles.zoomSwitch}>
           {SCALES.map((s) => (
-            <Pressable key={s} onPress={() => setScale(s)} accessibilityRole="button" style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
+            <GanttButton key={s} onPress={() => setScale(s)} style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
               <Text size="sm" weight={scale === s ? "medium" : "regular"} color={scale === s ? "default" : "muted"}>
                 {L[s]}
               </Text>
-            </Pressable>
+            </GanttButton>
           ))}
         </View>
       </View>
@@ -127,16 +146,15 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
                       <View key={tk.date.toISOString()} style={{ position: "absolute", left: tk.left, top: 0, bottom: 0, borderLeftWidth: 1, borderLeftColor: colors.zinc[200] }} />
                     ) : null,
                   )}
-                  <Pressable
+                  <GanttButton
                     onPress={onTaskPress ? () => onTaskPress(t) : undefined}
-                    accessibilityRole={onTaskPress ? "button" : undefined}
                     accessibilityLabel={t.label}
                     style={{ position: "absolute", left: base.left, width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
                   >
                     <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8, opacity: dragging ? 0.85 : 1 }}>
                       <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
                     </View>
-                  </Pressable>
+                  </GanttButton>
                   {onTaskResize ? (
                     <View
                       ref={bind(t.id, "ew-resize")}

package/src/heatmap.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { colors, withAlpha } from "./colors";
 import { Text } from "./text";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface HeatmapAxisItem {
   key: string;
@@ -97,6 +99,7 @@ interface CellProps {
 function Cell(props: CellProps) {
   const { label, background, selected, onPress } = props;
   const [hovered, setHovered] = useState(false);
+  const { focusVisible, focusProps } = useFocusRing();
   const base = {
     backgroundColor: background,
     borderColor: selected ? colors.zinc[900] : hovered && onPress ? colors.zinc[400] : "transparent",
@@ -108,9 +111,10 @@ function Cell(props: CellProps) {
       accessibilityState={{ selected }}
       accessibilityLabel={label}
       onPress={onPress}
+      {...focusProps}
       onHoverIn={() => setHovered(true)}
       onHoverOut={() => setHovered(false)}
-      style={[styles.cell, base]}
+      style={[styles.cell, base, focusVisible && { boxShadow: FOCUS_RING }]}
     />
   );
 }

package/src/icon_button.tsx

@@ -21,6 +21,10 @@ interface IconButtonBase {
    * hitSlop; `lg` is already 40. */
   size?: "lg" | "md" | "sm";
   iconColor?: string;
+  /** Floating variant: a white fill + hairline border + soft shadow, so the
+   *  button reads as a distinct, tappable target sitting ON TOP of imagery or a
+   *  colored surface (a tile's remove ✕, an overlay's retry). */
+  elevated?: boolean;
   tooltipSide?: TooltipSide;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
@@ -48,6 +52,7 @@ export function IconButton(props: IconButtonProps) {
     onPress,
     color = "none",
     size = "md",
+    elevated,
     tooltip,
     tooltipSide,
     accessibilityLabel,
@@ -70,13 +75,13 @@ export function IconButton(props: IconButtonProps) {
 
   return (
     <PressableHighlight
-      ref={ref}
-      testID={testID}
+      focusRing
+      ref={ref}      testID={testID}
       tooltip={tooltip}
       tooltipSide={tooltipSide}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? tooltip}
-      style={[styles.button, styles[size], styles[color], disabledOrLoading && styles.disabled, style]}
+      style={[styles.button, styles[size], styles[color], elevated && styles.elevated, disabledOrLoading && styles.disabled, style]}
       onPress={handlePress}
       disabled={disabledOrLoading}
       // 40px touch target regardless of visual size (28 + 2×6 / 24 + 2×8)
@@ -128,4 +133,10 @@ const styles = StyleSheet.create({
   muted: {},
   "danger-secondary": {},
   white: {},
+  elevated: {
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.zinc[200],
+    ...({ boxShadow: "0 1px 3px rgba(0, 0, 0, 0.18)" } as object),
+  },
 });

package/src/image_gallery.tsx

@@ -8,8 +8,9 @@
 // relying on percentage/flex-basis resolution (which collapses inside an
 // auto-width parent).
 import { useState } from "react";
-import { View, Pressable, type ViewStyle } from "react-native";
+import { View, type ViewStyle } from "react-native";
 import { Text } from "./text";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { ActivityIndicator } from "./activity_indicator";
@@ -36,8 +37,6 @@ export interface ImageGalleryProps {
   emptyText?: string;
   /** Optional max width. Omit to fill the container. */
   maxWidth?: number;
-  /** Hint shown in the full-screen zoom modal. Pass a translated string. */
-  captionHint?: string;
   /** "bottom" stacks thumbnails under the main image; "right" puts the main
    *  image (~60% of the width) and the thumbnail grid side by side. */
   thumbnailPosition?: "bottom" | "right";
@@ -55,7 +54,6 @@ export function ImageGallery({
   loading = false,
   emptyText = "No images.",
   maxWidth,
-  captionHint = "ESC to close · ←/→ to navigate",
   thumbnailPosition = "bottom",
   mainAspectRatio = 4 / 3,
   mainFraction = 0.6,
@@ -79,9 +77,8 @@ export function ImageGallery({
     // The rotate controls sit OUTSIDE the zoom Pressable (an absolute sibling on
     // top) so pressing them turns the image instead of opening the modal.
     <View style={{ width: "100%" }}>
-      <Pressable
+      <FocusRingPressable accessibilityRole="button"
         onPress={() => setZoomIdx(idx)}
-        accessibilityRole="button"
         accessibilityLabel="Zoom image"
         style={{
           width: "100%",
@@ -95,25 +92,23 @@ export function ImageGallery({
         }}
       >
         <RotatableImage uri={main.url} alt={main.filename} rotation={rotation.rotationFor(main.id)} />
-      </Pressable>
+      </FocusRingPressable>
       {rotatable ? (
         <View style={{ position: "absolute", top: 8, right: 8, flexDirection: "row", gap: 6 }}>
-          <Pressable
+          <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, -1)}
-            accessibilityRole="button"
             accessibilityLabel="Rotate left"
             style={rotateButtonStyle}
           >
             <Icon name="rotate-ccw" size={16} color={colors.white} />
-          </Pressable>
-          <Pressable
+          </FocusRingPressable>
+          <FocusRingPressable accessibilityRole="button"
             onPress={() => rotation.rotate(main.id, 1)}
-            accessibilityRole="button"
             accessibilityLabel="Rotate right"
             style={rotateButtonStyle}
           >
             <Icon name="rotate-cw" size={16} color={colors.white} />
-          </Pressable>
+          </FocusRingPressable>
         </View>
       ) : null}
     </View>
@@ -157,7 +152,6 @@ export function ImageGallery({
         files={images}
         activeIndex={zoomIdx}
         onIndexChange={setZoomIdx}
-        captionHint={captionHint}
         rotation={rotation}
         rotatable={rotatable}
       />

package/src/index.css

@@ -336,18 +336,14 @@ html {
   color: var(--color-zinc-900);
 }
 
-/* Focus ring — keyboard-driven only (`:focus-visible`), so pointer/touch
-   interactions stay clutter-free (no stray ring stacked on a clicked button,
-   tab, or segment that already shows its own state). A SELECT shows its own
-   active edge on a mouse-open via `ACTIVE_RING` (control_surface.ts) — that, not
-   this rule, is what rings the combobox/picker on a pointer open. The ring sits
-   flush against the border (offset 0, no gap) and, being an outline, never
-   reflows layout. */
-:focus-visible {
-  outline: 2px solid var(--color-zinc-900);
-  outline-offset: 0;
-}
-:focus:not(:focus-visible) {
+/* Native UA focus-outline reset — purely subtractive. The kit has NO global focus
+   ring: each interactive control paints its OWN ring inline (a `FOCUS_RING`
+   box-shadow, applied on keyboard focus via `useFocusRing`; control_surface.ts).
+   That keeps rings surgical (only where a control opts in) instead of blanketing
+   every focusable container the browser would otherwise outline. This line only
+   removes the browser default so an un-opted element shows nothing — it never adds
+   a ring. App authors opt their own raw focusable elements in with `useFocusRing`. */
+:focus {
   outline: none;
 }
 

package/src/inline_date_picker.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useRef, useState } from "react";
 import { View } from "react-native";
-import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { DatePickerPanel } from "./date_picker";
+import { isoHasTime } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
 import { InlineEditView } from "./inline_edit";
@@ -15,6 +15,9 @@ export interface InlineDatePickerProps {
   onSave: (next: string) => void | Promise<void>;
   /** "date" (default) or "datetime". */
   format?: "date" | "datetime";
+  /** Let the user OPTIONALLY add a time to a date (the value's shape decides — date
+   *  until a time is added). Ignored when `format` is "datetime" (time always on). */
+  optionalTime?: boolean;
   placeholder?: string;
   /** BCP-47 locale for the calendar and the displayed date. */
   locale?: string;
@@ -30,7 +33,7 @@ export interface InlineDatePickerProps {
  * dismissing without a change reverts.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
-  const { value, onSave, format = "date", placeholder, locale, disabled, accessibilityLabel } = props;
+  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel } = props;
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
   const [saving, setSaving] = useState(false);
@@ -68,8 +71,10 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
   );
 
   // `format` here is the field config (date vs datetime); the display formatter only needs
-  // whether to show a time → map it to the orthogonal `time` flag.
-  const display = formatDate(value, { time: format === "datetime", locale, emptyLabel: "" });
+  // whether to show a time → map it to the orthogonal `time` flag. In optionalTime mode the
+  // value's own shape decides.
+  const showTime = optionalTime ? isoHasTime(value) : format === "datetime";
+  const display = formatDate(value, { time: showTime, locale, emptyLabel: "" });
 
   return (
     <View>
@@ -81,13 +86,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
             disabled={disabled}
             active={open && !disabled}
             accessibilityLabel={accessibilityLabel}
-            trailing={
-              saving ? (
-                <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : (
-                <Icon name="calendar" size={18} color={colors.zinc[400]} />
-              )
-            }
+            trailing={saving ? <ActivityIndicator size={16} color={colors.zinc[400]} /> : undefined}
           />
         </PopoverTrigger>
         <PopoverContent>
@@ -98,6 +97,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
               setDraft(v);
             }}
             format={format}
+            optionalTime={optionalTime}
             locale={locale}
             onRequestClose={() => setOpen(false)}
           />

package/src/inline_edit.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
-import { View, StyleSheet } from "react-native";
+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 { colors } from "./colors";
-import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
+import { FOCUS_RING, CONTROL_RADIUS } from "./control_surface";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
@@ -99,6 +99,8 @@ interface InlineEditFrameProps {
   disabled?: boolean;
   /** Accessible name for the view button when there's no enclosing FormField. */
   accessibilityLabel?: string;
+  /** Strike + mute the resting value (a completed item that stays editable). */
+  struck?: boolean;
 }
 
 interface InlineEditViewProps {
@@ -115,6 +117,8 @@ interface InlineEditViewProps {
   /** True while the field's popover (select/date) is open: wears the 2px active
    *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
   active?: boolean;
+  /** Strike + mute the resting value (a completed/superseded item that stays editable). */
+  struck?: boolean;
   ref?: Ref<View>;
 }
 
@@ -127,19 +131,28 @@ interface InlineEditViewProps {
  * select/date inline editors (it forwards ref + onPress to a `PopoverTrigger`).
  */
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, ref } = props;
+  // Stop the press here so an inline editor nested in a pressable row (a task
+  // row that expands on press) edits the field instead of triggering the row.
+  const handlePress = onPress
+    ? (e: GestureResponderEvent) => {
+        e?.stopPropagation?.();
+        onPress();
+      }
+    : undefined;
   return (
     <PressableHighlight
+      focusRing
       ref={ref}
       disabled={disabled}
-      onPress={onPress}
+      onPress={handlePress}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       style={[styles.view, active && styles.viewActive]}
     >
       {typeof display === "string" ? (
-        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder]}>
+        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
           {display || placeholder || "—"}
         </Text>
       ) : (
@@ -171,6 +184,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     error,
     disabled,
     accessibilityLabel,
+    struck,
   } = props;
 
   if (!editing) {
@@ -181,6 +195,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         onPress={onBegin}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel}
+        struck={struck}
       />
     );
   }
@@ -233,9 +248,10 @@ const styles = StyleSheet.create({
   // under the 2px active ring — identical to a focused input.
   viewActive: {
     borderColor: colors.border,
-    boxShadow: ACTIVE_RING,
+    boxShadow: FOCUS_RING,
   },
   placeholder: { color: colors.zinc[400] },
+  struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },
   editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
   editControl: { flex: 1, position: "relative" },

package/src/inline_member_select.tsx

@@ -55,7 +55,7 @@ export function InlineMemberSelect(props: InlineMemberSelectProps) {
     <InlineSelect<string>
       options={options}
       renderOptionContent={renderMember}
-      renderValue={renderMember}
+      renderSelected={renderMember}
       {...inline}
     />
   );

package/src/inline_select.tsx

@@ -4,7 +4,7 @@ import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { PickerMenu } from "./picker_menu";
+import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
 import { InlineEditView } from "./inline_edit";
@@ -14,12 +14,12 @@ export interface InlineSelectProps<T extends string> {
   onSave: (next: T) => void | Promise<void>;
   options: PickerOption<T>[];
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
-   *  Omit for a plain label list — both render through the same `PickerMenu`. */
+   *  Omit for a plain label list — both render through the same `OptionList`. */
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   /** Render the SELECTED value in the resting view as a node (an avatar chip, a
    *  colored badge) instead of its plain label. Falls back to the label when
    *  omitted; the empty state always shows the placeholder. */
-  renderValue?: (selected: PickerOption<T>) => React.ReactNode;
+  renderSelected?: (selected: PickerOption<T>) => React.ReactNode;
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -27,13 +27,13 @@ export interface InlineSelectProps<T extends string> {
 
 /**
  * An inline-editable single-select. The value reads as plain text; clicking it
- * floats the option list (a `PickerMenu`) in a popover anchored to the view, so
+ * floats the option list (an `OptionList`) in a popover anchored to the view, so
  * the row never changes height. Picking commits; dismissing reverts. Pass
  * `renderOptionContent` for rich options, or omit it for a plain list — the
  * standard and custom-rendered pickers are both supported here.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
-  const { value, onSave, options, renderOptionContent, renderValue, placeholder, disabled, accessibilityLabel } = props;
+  const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel } = props;
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -62,7 +62,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            display={selected ? (renderValue ? renderValue(selected) : (selected.label ?? "")) : ""}
+            display={selected ? (renderSelected ? renderSelected(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}
             active={open && !disabled}
@@ -76,8 +76,9 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
             }
           />
         </PopoverTrigger>
-        <PopoverContent>
-          <PickerMenu
+        <PopoverContent disableBodyScroll>
+          <OptionList
+            search={{ mode: "none" }}
             options={options}
             value={value}
             onValueChange={(next) => void pick(next)}

package/src/inline_text_input.tsx

@@ -13,6 +13,8 @@ export interface InlineTextInputProps {
    *  an explicit ✓ saves and ✕ reverts. */
   controls?: InlineEditControls;
   disabled?: boolean;
+  /** Strike + mute the resting value (a completed item that stays editable). */
+  struck?: boolean;
   accessibilityLabel?: string;
 }
 
@@ -23,7 +25,7 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -55,6 +57,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
       saving={edit.saving}
       error={edit.error}
       disabled={disabled}
+      struck={struck}
       accessibilityLabel={accessibilityLabel}
     >
       <TextInputField

package/src/link.tsx

@@ -2,6 +2,8 @@ import { type ReactNode } from "react";
 import { Pressable } from "react-native";
 import { Text, type TextSize } from "./text";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface LinkProps {
   children: ReactNode;
@@ -22,8 +24,16 @@ export interface LinkProps {
  * `onPress` to its opener.
  */
 export function Link({ children, onPress, size = "sm", accessibilityLabel, testID }: LinkProps) {
+  const { focusVisible, focusProps } = useFocusRing();
   return (
-    <Pressable onPress={onPress} accessibilityRole="link" accessibilityLabel={accessibilityLabel} testID={testID}>
+    <Pressable
+      onPress={onPress}
+      {...focusProps}
+      accessibilityRole="link"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 2 } : undefined}
+    >
       <Text size={size} decoration="underline" style={{ color: colors.blue[600] }}>
         {children}
       </Text>

package/src/link_button.tsx

@@ -23,7 +23,7 @@ export function LinkButton(props: LinkButtonProps) {
   const { title, onPress, accessibilityLabel, testID } = props;
   return (
     <PressableHighlight
-      testID={testID}
+      focusRing      testID={testID}
       onPress={onPress}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? title}

package/src/list_item.tsx

@@ -57,8 +57,8 @@ export function ListItem(props: ListItemProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         onPress={handlePress}
         disabled={disabled}
         style={containerStyle}

package/src/member_select.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { StyleProp, ViewStyle } from "react-native";
+import { Select } from "./select";
 import {
-  Picker,
   type PickerOption,
   type PickerValue,
   type PickerOnValueChange,
@@ -33,15 +33,20 @@ interface MemberSelectProps<MULTI extends boolean = false> {
   disabled?: boolean;
   autoFocus?: boolean;
   includeEmptyOption?: boolean;
+  enableSelectAll?: boolean;
+  /** Label for the "select all" link in multi-select mode. Pass a translated string. */
+  selectAllLabel?: string;
+  /** Label for the "deselect all" link in multi-select mode. Pass a translated string. */
+  deselectAllLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
   accessibilityLabel?: string;
 }
 
 /**
- * Choose member(s) — a {@link Picker} whose every option renders as a
+ * Choose member(s) — a {@link Select} whose every option renders as a
  * {@link MemberChip} (avatar + name). The one member-picker shape, so an app
- * never re-wires `Picker` + `renderOptionContent` + a directory by hand. PURE:
+ * never re-wires `Select` + `renderOptionContent` + a directory by hand. PURE:
  * pass the candidate `members` (an app feeds `useMembers`, the product any
  * roster); this fetches nothing. Single or multi via `multi`. Options are
  * single-line by design — a picker row identifies a person by name + avatar;
@@ -72,7 +77,7 @@ export function MemberSelect<MULTI extends boolean = false>(props: MemberSelectP
   );
 
   return (
-    <Picker<string, MULTI>
+    <Select<string, MULTI>
       options={options}
       renderOptionContent={renderOptionContent}
       {...picker}

package/src/menu_button.tsx

@@ -94,8 +94,8 @@ export function MenuButton(props: MenuButtonProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         nativeID={nativeID}
         onPress={() => {
           onPress?.();

package/src/menu_list_item.tsx

@@ -81,8 +81,8 @@ export function MenuListItem(props: MenuListItemProps) {
   if (onPress) {
     return (
       <PressableHighlight
-        ref={ref}
-        testID={testID}
+        focusRing
+        ref={ref}        testID={testID}
         nativeID={nativeID}
         onPress={onPress}
         onHoverIn={onHoverIn}

package/src/number_input.tsx

@@ -1,8 +1,10 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER } from "./control_surface";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
 import { useFormField } from "./form_field";
+import { useFocusRing } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 
 export interface NumberInputProps {
   value: number | null;
@@ -27,6 +29,8 @@ export function NumberInput(props: NumberInputProps) {
   const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel } = props;
   const binding = useFormField();
   const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const { hovered, hoverProps } = useHover();
 
   return (
     <input
@@ -44,7 +48,9 @@ export function NumberInput(props: NumberInputProps) {
       max={max}
       type="number"
       disabled={disabled}
-      onBlur={onBlur}
+      {...hoverProps}
+      onFocus={focusProps.onFocus}
+      onBlur={() => { focusProps.onBlur(); onBlur?.(); }}
       onKeyDown={onKeyDown}
       autoFocus={autoFocus}
       style={{
@@ -54,14 +60,15 @@ export function NumberInput(props: NumberInputProps) {
         borderRadius: CONTROL_RADIUS,
         borderWidth: 1,
         borderStyle: "solid",
-        borderColor: colors.border,
+        borderColor: hovered && !disabled ? HOVER_BORDER : colors.border,
         backgroundColor: colors.background,
         fontFamily: fontFamilyRegular,
         ...inputTextStyleWeb,
         letterSpacing: -0.4,
-        boxShadow: "none",
+        boxShadow: focusVisible ? FOCUS_RING : "none",
         outline: "none",
         boxSizing: "border-box",
+        transition: "border-color 0.12s, box-shadow 0.12s",
       }}
     />
   );