@lotics/ui 5.8.0 → 5.10.0

package/src/option_list.tsx

@@ -0,0 +1,211 @@
+import { StyleSheet, View, ScrollView, TextInput } from "react-native";
+import { type ReactNode } from "react";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Checkbox } from "./checkbox";
+import { MenuButton } from "./menu_button";
+import { LinkButton } from "./link_button";
+import { ActivityIndicator } from "./activity_indicator";
+import { TextInputField } from "./text_input_field";
+import { useScreenSize } from "./use_screen_size";
+import { useOptionList, type UseOptionListParams } from "./use_option_list";
+import type { PickerOption } from "./picker";
+
+export interface OptionListProps<T extends string = string, MULTI extends boolean = false, D = unknown>
+  extends UseOptionListParams<T, MULTI, D> {
+  testID?: string;
+  /** Rich row content (a colour-dot badge, a member chip). Falls back to the label. */
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  /** A single-line subtitle under the label (e.g. a code or company). */
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
+  loading?: boolean;
+  emptyText?: string;
+  accessibilityLabel?: string;
+  selectAllLabel?: string;
+  deselectAllLabel?: string;
+}
+
+/**
+ * The kit's option listbox body — the popover content every selector opens: a
+ * keyboard-navigable list of `MenuButton` rows with single/multi selection +
+ * select-all, an optional "create" row, and either native-`<select>` typeahead
+ * (`search.mode:"none"`) or its own search field (`"internal"`). Drives off
+ * `useOptionList`. `Select` (incl. its chip-box / tag-field form), the chat composer, and the in-cell
+ * editors render it; `Combobox` consumes `useOptionList` directly (its own input
+ * owns the keyboard). Don't hand-roll a search-list — reach for this.
+ */
+export function OptionList<T extends string, MULTI extends boolean = false, D = unknown>(
+  props: OptionListProps<T, MULTI, D>,
+) {
+  const {
+    testID,
+    renderOptionContent,
+    getOptionDescription,
+    loading = false,
+    emptyText = "No results",
+    accessibilityLabel,
+    selectAllLabel = "Select all",
+    deselectAllLabel = "Deselect all",
+    search,
+  } = props;
+  const list = useOptionList(props);
+  const { small } = useScreenSize();
+
+  const onSearchKeyPress = (e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
+    if (list.handleKey(e.nativeEvent.key)) e.preventDefault();
+  };
+
+  return (
+    <View testID={testID} style={[styles.container, small ? { flex: 1 } : { maxHeight: 480 }]}>
+      {search.mode === "internal" ? (
+        <TextInputField
+          icon="search"
+          value={list.query}
+          onChangeText={list.setQuery}
+          placeholder={search.placeholder ?? "Search…"}
+          autoFocus={!small}
+          autoCapitalize="none"
+          autoCorrect={false}
+          onKeyPress={onSearchKeyPress}
+          accessibilityLabel={accessibilityLabel}
+          role="combobox"
+          aria-expanded
+          aria-controls={list.listboxId}
+          aria-activedescendant={list.activeId}
+          aria-autocomplete="list"
+        />
+      ) : search.mode === "none" ? (
+        // Visually hidden but focusable: captures typeahead + arrow/enter keys
+        // while the popover is open, giving native-<select> behavior.
+        <TextInput
+          autoFocus={!small}
+          value=""
+          onChangeText={() => {}}
+          onKeyPress={onSearchKeyPress}
+          style={styles.typeaheadCapture}
+        />
+      ) : null}
+
+      <ScrollView
+        ref={list.scrollRef}
+        style={styles.optionsList}
+        nativeID={list.listboxId}
+        accessibilityLabel={accessibilityLabel}
+        keyboardShouldPersistTaps="handled"
+        // `listbox` is valid ARIA but absent from RN's Role enum; rn-web forwards it.
+        role={"listbox" as "list"}
+      >
+        {loading ? (
+          <View style={styles.statusRow}>
+            <ActivityIndicator />
+          </View>
+        ) : list.rows.length === 0 ? (
+          <View style={styles.statusRow}>
+            <Text color="zinc-500" size="sm">
+              {emptyText}
+            </Text>
+          </View>
+        ) : (
+          list.rows.map((row) => {
+            const isCustom = row.kind === "custom";
+            const opt = row.option;
+            const desc = row.kind === "option" ? getOptionDescription?.(opt) : undefined;
+            const label = opt.label ?? opt.value;
+            const title =
+              row.kind === "option" && renderOptionContent ? (
+                renderOptionContent(opt)
+              ) : desc ? (
+                <View>
+                  <Text userSelect="none" numberOfLines={1}>
+                    {label}
+                  </Text>
+                  <Text size="xs" color="zinc-500" numberOfLines={1}>
+                    {desc}
+                  </Text>
+                </View>
+              ) : (
+                <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
+                  {label}
+                </Text>
+              );
+            return (
+              <MenuButton
+                key={`${row.kind}-${opt.value}`}
+                nativeID={row.nativeID}
+                testID={
+                  isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`
+                }
+                role="option"
+                accessibilityLabel={isCustom ? label : (opt.label ?? String(opt.value))}
+                icon={
+                  isCustom ? (
+                    <Icon name="plus" size={16} color={colors.zinc["600"]} />
+                  ) : props.multi && row.kind === "option" ? (
+                    <Checkbox checked={row.selected} />
+                  ) : undefined
+                }
+                title={title}
+                right={
+                  !props.multi && row.selected ? (
+                    <Icon name="check" size={18} color={colors.zinc["950"]} />
+                  ) : undefined
+                }
+                focused={row.index === list.activeIndex}
+                disabled={opt.disabled}
+                onPress={() => list.pickRow(row.index)}
+                onHoverIn={() => list.setActiveIndex(row.index, false)}
+                style={styles.option}
+              />
+            );
+          })
+        )}
+      </ScrollView>
+
+      {list.showSelectAll || list.showDeselectAll ? (
+        <View style={styles.selectAllContainer}>
+          {list.showSelectAll ? <LinkButton title={selectAllLabel} onPress={list.selectAll} /> : null}
+          {list.showDeselectAll ? (
+            <LinkButton title={deselectAllLabel} onPress={list.deselectAll} />
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 4,
+  },
+  optionsList: {
+    flex: 1,
+    gap: 4,
+    maxHeight: 320,
+  },
+  selectAllContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    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,
+  },
+  option: {
+    marginHorizontal: 0,
+  },
+  statusRow: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+  },
+  typeaheadCapture: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    opacity: 0,
+  },
+});

package/src/pdfjs_worker.d.ts

@@ -0,0 +1,5 @@
+// The pdf.js worker entry is imported only for its side effect: it assigns
+// `globalThis.pdfjsWorker`, which lets pdf.js run on the main thread (no Web
+// Worker, no worker-URL resolution) — portable across Vite (apps) and Metro
+// (frontend). The file ships no types; declare it as a side-effect module.
+declare module "pdfjs-dist/build/pdf.worker.min.mjs";

package/src/peek.tsx

@@ -33,7 +33,7 @@ export function Peek(props: PeekProps) {
     <Popover side={side} align={align}>
       <PopoverTrigger>
         <PressableHighlight
-          accessibilityRole="button"
+          focusRing          accessibilityRole="button"
           accessibilityLabel={accessibilityLabel}
           style={styles.trigger}
           // 32px visual, 40px touch target (32 + 2×4) — same as IconButton.

package/src/picker.tsx

@@ -1,13 +1,12 @@
 import { Picker as RNPicker } from "@react-native-picker/picker";
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { StyleSheet, View, StyleProp, ViewStyle, TextStyle } from "react-native";
+import { useCallback, useEffect, useRef } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING, CONTROL_RADIUS } from "./control_surface";
-import { Text } from "./text";
+import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
 import { Icon } from "./icon";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { PickerMenu } from "./picker_menu";
 
 export interface PickerOption<T extends string = string, D = unknown> {
   label?: string;
@@ -31,43 +30,30 @@ export type PickerOnClose<T extends string, MULTI extends boolean> = MULTI exten
   ? (value: T[]) => void
   : (value: T) => void;
 
-export interface PickerProps<T extends string = string, MULTI extends boolean = false> {
+export interface PickerProps<T extends string = string> {
   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;
   disabled?: boolean;
   autoFocus?: boolean;
-  enableSelectAll?: boolean;
-  multi?: MULTI;
   includeEmptyOption?: boolean;
-  value?: PickerValue<T, MULTI> | null;
-  onValueChange?: PickerOnValueChange<T, MULTI>;
-  onClose?: PickerOnClose<T, MULTI>;
-  /** Label for the "select all" link in multi-select mode. Default: "Select all" */
-  selectAllLabel?: string;
-  /** Label for the "deselect all" link in multi-select mode. Default: "Deselect all" */
-  deselectAllLabel?: string;
+  value?: T | null;
+  onValueChange?: (value: T) => void;
 }
 
 /**
- * Main Picker component that delegates to the appropriate sub-component based on props.
+ * A plain, label-only single select rendered as the native `<select>` (the OS
+ * dropdown, with native typeahead). The lightest "pick one from a known list"
+ * control. For RICH options (badges, member chips), multi-select, select-all, or
+ * a chip box (`renderSelected` → `Chip`), use `Select`; to SEARCH a large/remote/free
+ * set with the input AS the control use `Combobox`.
  */
-export function Picker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI>,
-) {
-  if (props.multi || props.renderOptionContent) {
-    return <CustomPicker {...props} />;
-  }
-  return <StandardPicker {...(props as PickerProps<T, false>)} />;
-}
-
-function StandardPicker<T extends string>(props: PickerProps<T, false>) {
+export function Picker<T extends string>(props: PickerProps<T>) {
   const {
     testID,
     options = [],
@@ -82,6 +68,9 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
   } = props;
 
   const pickerRef = useRef<RNPicker<string>>(null);
+  // The native <select> is a text-like control — ring on any focus (like the inputs).
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const { hovered, hoverProps } = useHover();
 
   useEffect(() => {
     if (autoFocus && !disabled) {
@@ -89,15 +78,15 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
     }
   }, [autoFocus, disabled]);
 
-  const handleStandardPickerChange = useCallback(
+  const handleChange = useCallback(
     (newValue: string) => {
-      (onValueChange as (value: T) => void)?.(newValue as T);
+      onValueChange?.(newValue as T);
     },
     [onValueChange],
   );
 
   return (
-    <View>
+    <View {...(hoverProps as object)}>
       <View
         style={{
           position: "absolute",
@@ -112,12 +101,14 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
         ref={pickerRef}
         testID={testID}
         accessibilityLabel={accessibilityLabel}
+        onFocus={focusProps.onFocus}
+        onBlur={focusProps.onBlur}
         // 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.
         selectedValue={value?.toString() ?? ""}
-        onValueChange={handleStandardPickerChange}
-        style={[styles.picker, getInputTextStyle(), style as StyleProp<TextStyle>]}
+        onValueChange={handleChange}
+        style={[styles.picker, CONTROL_TRANSITION, getInputTextStyle(), style as StyleProp<TextStyle>, hovered && !disabled ? { borderColor: HOVER_BORDER } : null, focusVisible ? { boxShadow: FOCUS_RING } : null]}
         placeholder={placeholder}
         enabled={!disabled}
       >
@@ -143,168 +134,6 @@ function StandardPicker<T extends string>(props: PickerProps<T, false>) {
   );
 }
 
-function CustomPicker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI>,
-) {
-  const {
-    testID,
-    options = [],
-    value,
-    placeholder,
-    accessibilityLabel,
-    multi = false as MULTI,
-    renderOptionContent,
-    includeEmptyOption,
-    style,
-    disabled = false,
-    autoFocus = false,
-    enableSelectAll = false,
-    onValueChange,
-    onClose,
-    selectAllLabel,
-    deselectAllLabel,
-  } = props;
-
-  const [open, setOpen] = useState(autoFocus);
-
-  const handleToggle = useCallback(() => {
-    if (!disabled) {
-      setOpen((prev) => !prev);
-    }
-  }, [disabled]);
-
-  const selectedItems = useSelectedItems(multi, value, options);
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, []);
-
-  return (
-    <Popover
-      open={open && !disabled}
-      onOpenChange={setOpen}
-      side="bottom"
-      align="start"
-      inheritTriggerWidth={true}
-    >
-      <PopoverTrigger>
-        <PickerTrigger
-          testID={testID}
-          open={open}
-          style={style}
-          onPress={handleToggle}
-          renderOptionContent={renderOptionContent}
-          selectedItems={selectedItems}
-          placeholder={placeholder}
-          accessibilityLabel={accessibilityLabel}
-          disabled={disabled}
-        />
-      </PopoverTrigger>
-      <PopoverContent>
-        <PickerMenu
-          options={options}
-          multi={multi}
-          value={value}
-          onValueChange={onValueChange}
-          onClose={onClose}
-          onRequestClose={handleClose}
-          renderOptionContent={renderOptionContent}
-          enableSelectAll={enableSelectAll}
-          includeEmptyOption={includeEmptyOption}
-          selectAllLabel={selectAllLabel}
-          deselectAllLabel={deselectAllLabel}
-        />
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function useSelectedItems<T extends string>(
-  multi: boolean,
-  value: T | T[] | undefined | null,
-  options: (PickerOption<T> | undefined | false)[],
-): PickerOption<T>[] {
-  return useMemo(() => {
-    if (multi) {
-      const multiValue = Array.isArray(value) ? value : [];
-      const optionsMap = new Map(
-        options.filter((opt): opt is PickerOption<T> => !!opt).map((opt) => [opt.value, opt]),
-      );
-      return multiValue
-        .map((val) => optionsMap.get(val))
-        .filter((opt): opt is PickerOption<T> => !!opt);
-    } else {
-      const singleValue = Array.isArray(value) ? value[0] : value;
-      if (singleValue !== undefined && singleValue !== null) {
-        const selected = options.find((option) => option && option.value === singleValue);
-        return selected ? [selected] : [];
-      }
-    }
-    return [];
-  }, [multi, value, options]);
-}
-
-function PickerTrigger<T extends string>({
-  ref,
-  testID,
-  open,
-  style,
-  onPress,
-  renderOptionContent,
-  selectedItems,
-  placeholder,
-  accessibilityLabel,
-  disabled = false,
-}: {
-  ref?: React.Ref<View>;
-  testID?: string;
-  open: boolean;
-  style?: StyleProp<ViewStyle>;
-  onPress: () => void;
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  selectedItems: PickerOption<T>[];
-  placeholder?: string;
-  accessibilityLabel?: string;
-  disabled?: boolean;
-}) {
-  const hasSelection = selectedItems.length > 0;
-
-  return (
-    <Pressable
-      ref={ref}
-      testID={testID}
-      // Without a role this Pressable renders as an unfocusable <div> on web —
-      // 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 `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}
-      disabled={disabled}
-    >
-      {hasSelection ? (
-        renderOptionContent ? (
-          <View style={{ flexDirection: "row", gap: 4, flexWrap: "wrap" }}>
-            {selectedItems.map((item) => (
-              <View key={item.value}>{renderOptionContent(item)}</View>
-            ))}
-          </View>
-        ) : (
-          <Text userSelect="none">{selectedItems.map((s) => s.label).join(", ")}</Text>
-        )
-      ) : (
-        <Text color="zinc-500" userSelect="none">
-          {placeholder}
-        </Text>
-      )}
-    </Pressable>
-  );
-}
-
 const styles = StyleSheet.create({
   picker: {
     height: 40,
@@ -318,22 +147,4 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
     appearance: "none",
   },
-  pressable: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 6,
-    borderWidth: 1,
-    borderColor: colors.border,
-    borderRadius: CONTROL_RADIUS,
-    cursor: "auto",
-    height: 40,
-  },
-  opened: {
-    // Mouse-opened, so no `:focus-visible` — wear the same 2px zinc ring a
-    // focused input gets, over the unchanged 1px border (not a lone 1px edge).
-    boxShadow: ACTIVE_RING,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
 });

package/src/pressable_highlight.tsx

@@ -2,6 +2,7 @@ import {
   GestureResponderEvent,
   Pressable,
   PressableProps,
+  PressableStateCallbackType,
   View,
   StyleProp,
   ViewStyle,
@@ -9,23 +10,40 @@ import {
 import { Ref, useCallback } from "react";
 import { TooltipSide, useTooltip } from "./tooltip";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { composeHandler, useFocusRing } from "./use_focus_ring";
 
-function composeHandler<E>(
-  a: ((event: E) => void) | undefined,
-  b: ((event: E) => void) | undefined,
-): ((event: E) => void) | undefined {
-  if (!a) return b;
-  if (!b) return a;
-  return (event: E) => {
-    a(event);
-    b(event);
-  };
-}
+/** The pressable state, plus the web-only `hovered` flag react-native-web adds and
+ *  the `focusVisible` flag PressableHighlight injects so a consumer's style-fn /
+ *  children can paint their own focus treatment. */
+export type PressableHighlightState = PressableStateCallbackType & {
+  hovered?: boolean;
+  focusVisible?: boolean;
+};
 
 export interface PressableHighlightProps extends PressableProps {
   ref?: Ref<View>;
   tooltip?: string;
   tooltipSide?: TooltipSide;
+  /**
+   * Opt in to the kit `FOCUS_RING` on keyboard focus. Off by default: the focus
+   * treatment is the component's to OWN, not applied blindly — a compact control
+   * sets `focusRing`, while a control with its own ring (e.g. `CardSelectItem`, which
+   * rings on hover/press/focus) instead reads `state.focusVisible` in its `style` fn.
+   * EVERY interactive PressableHighlight must do one or the other; a focusable control
+   * with no focus treatment is a bug (the per-Pressable focus audit is the coverage
+   * gate). A surface that shouldn't ring is a non-control — give it `tabIndex={-1}`
+   * (like `PressableRow`), not a missing `focusRing`. The ring is a later `boxShadow`
+   * entry, so on a focused control it supersedes any resting box-shadow for the focus
+   * duration — read `state.focusVisible` and compose if both must show at once.
+   */
+  focusRing?: boolean;
+  /**
+   * Narrows the Pressable state-function `style` to `PressableHighlightState`, so a
+   * consumer's `style` fn sees `focusVisible` (and `hovered`) and can paint its own
+   * focus/hover treatment — the `state.focusVisible` contract referenced above.
+   */
+  style?: StyleProp<ViewStyle> | ((state: PressableHighlightState) => StyleProp<ViewStyle>);
   /**
    * Web-only keyboard handler. `react-native-web`'s `Pressable` forwards this
    * to the rendered DOM element; native platforms ignore it. Exposed
@@ -56,12 +74,14 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltipSide = "top",
     onPress,
     userSelect,
+    focusRing,
     ...restPressableProps
   } = props;
   const tooltipProps = useTooltip({
     side: tooltipSide,
     text: tooltip,
   });
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(
     (event: GestureResponderEvent) => {
@@ -74,10 +94,8 @@ export function PressableHighlight(props: PressableHighlightProps) {
     <Pressable
       ref={ref}
       disabled={disabled}
-      // @ts-ignore hovered is a react-native-web extension not in base RN types
-      style={(state) => {
-        const { pressed } = state;
-        const hovered = (state as { hovered?: boolean }).hovered;
+      style={(state: PressableHighlightState) => {
+        const { pressed, hovered } = state;
         return [
           {
             ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
@@ -85,22 +103,23 @@ export function PressableHighlight(props: PressableHighlightProps) {
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,
           },
-          typeof style === "function" ? style(state) : style,
+          typeof style === "function" ? style({ ...state, focusVisible }) : style,
+          focusRing && focusVisible ? { boxShadow: FOCUS_RING } : null,
         ] as StyleProp<ViewStyle>;
       }}
       onPress={handlePress}
       {...restPressableProps}
       // `onFocus` / `onBlur` are part of `PressableProps`, so a trailing
       // `{...tooltipProps}` spread would silently overwrite caller-provided
-      // handlers. Compose instead. Mouse handlers (not in the RN types but
-      // passed through on web) come along with the tooltipProps spread.
+      // handlers. Compose instead — caller + tooltip + the focus-ring tracker.
+      // Mouse handlers (not in the RN types but passed through on web) come along
+      // with the tooltipProps spread.
       {...tooltipProps}
-      onFocus={composeHandler(restPressableProps.onFocus ?? undefined, tooltipProps.onFocus)}
-      onBlur={composeHandler(restPressableProps.onBlur ?? undefined, tooltipProps.onBlur)}
+      onFocus={composeHandler(composeHandler(restPressableProps.onFocus ?? undefined, tooltipProps.onFocus), focusProps.onFocus)}
+      onBlur={composeHandler(composeHandler(restPressableProps.onBlur ?? undefined, tooltipProps.onBlur), focusProps.onBlur)}
     >
-      {(state) => {
-        const hovered = (state as { hovered?: boolean }).hovered;
-        return <>{typeof children === "function" ? children({ ...state, hovered } as typeof state) : children}</>;
+      {(state: PressableHighlightState) => {
+        return <>{typeof children === "function" ? children({ ...state, focusVisible } as PressableStateCallbackType) : children}</>;
       }}
     </Pressable>
   );

package/src/radio_picker.tsx

@@ -115,8 +115,8 @@ function RadioOption<T extends string | number | symbol>(
 
   return (
     <PressableHighlight
-      ref={ref}
-      testID={testID}
+      focusRing
+      ref={ref}      testID={testID}
       style={{
         flexDirection: "row",
         alignItems: "center",