@lotics/ui 5.8.0 → 5.10.0

package/src/range_slider.tsx

@@ -2,6 +2,8 @@ import { useRef, useState } from "react";
 import { StyleSheet, View, type GestureResponderEvent, type LayoutChangeEvent, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 const THUMB = 20;
 const R = THUMB / 2;
@@ -23,6 +25,30 @@ export interface RangeSliderProps {
 
 type Thumb = "low" | "high";
 
+function SliderThumb(props: {
+  label: string;
+  min: number;
+  max: number;
+  now: number;
+  left: number;
+  color: string;
+  active: boolean;
+  keyProps: object;
+}) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <View
+      accessibilityRole="adjustable"
+      accessibilityLabel={props.label}
+      accessibilityValue={{ min: props.min, max: props.max, now: props.now }}
+      focusable
+      {...focusProps}
+      style={[styles.thumb, { left: props.left, borderColor: props.color }, props.active && styles.thumbActive, focusVisible && { boxShadow: FOCUS_RING }]}
+      {...props.keyProps}
+    />
+  );
+}
+
 /**
  * A short human summary of a range selection for a `FilterChip` preview —
  * "5tr–10tr", or "≥ 5tr" / "≤ 10tr" when one end sits at its bound, and
@@ -129,14 +155,16 @@ export function RangeSlider(props: RangeSliderProps) {
         {(["low", "high"] as const).map((thumb) => {
           const v = thumb === "low" ? low : high;
           return (
-            <View
+            <SliderThumb
               key={thumb}
-              accessibilityRole="adjustable"
-              accessibilityLabel={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
-              accessibilityValue={{ min, max, now: v }}
-              focusable
-              style={[styles.thumb, { left: x(v), borderColor: color }, dragging === thumb && styles.thumbActive]}
-              {...keyProps(thumb)}
+              label={`${accessibilityLabel} ${thumb === "low" ? "minimum" : "maximum"}`}
+              min={min}
+              max={max}
+              now={v}
+              left={x(v)}
+              color={color}
+              active={dragging === thumb}
+              keyProps={keyProps(thumb)}
             />
           );
         })}

package/src/react_native.d.ts

@@ -32,11 +32,14 @@ declare module "react-native" {
   }
 
   interface TextStyle {
+    boxShadow?: string;
     outline?: string;
     outlineColor?: string;
     outlineStyle?: string;
     outlineWidth?: number;
     outlineOffset?: number;
+    transitionDuration?: string;
+    transitionProperty?: string;
     appearance?: string;
   }
 }

package/src/scroll_to_bottom.tsx

@@ -14,7 +14,7 @@ export function ScrollToBottom(props: ScrollToBottomProps) {
 
   return (
     <PressableHighlight
-      testID="scroll-to-bottom-button"
+      focusRing      testID="scroll-to-bottom-button"
       tooltip={tooltip}
       onPress={onPress}
       style={styles.button}

package/src/section.tsx

@@ -1,8 +1,10 @@
-import { Pressable, StyleProp, View, ViewStyle } from "react-native";
+import { Pressable, View } from "react-native";
 import { Text } from "./text";
 import { useState, useImperativeHandle } from "react";
 import { Icon, IconName } from "./icon";
 import { Spacer } from "./spacer";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface SectionHandlers {
   expand: () => void;
@@ -46,9 +48,12 @@ export function Section(props: SectionProps) {
     },
   }));
 
+  const { focusVisible, focusProps } = useFocusRing();
+
   const titleComponent = collapsible ? (
     <Pressable
-      style={{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }}
+      {...focusProps}
+      style={[{ flexDirection: "row", alignItems: "center", gap: 8, flex: 1 }, focusVisible && { boxShadow: FOCUS_RING, borderRadius: 4 }]}
       onPress={() => setCollapsed(!collapsed)}
     >
       <Icon name={collapsed ? "chevron-right" : "chevron-down"} size={20} />

package/src/segmented_control.tsx

@@ -126,8 +126,8 @@ function Segment<T extends string>(props: SegmentProps<T>) {
 
   return (
     <PressableHighlight
-      ref={ref}
-      // Own the per-state background: the track is zinc-100, so an unselected
+      focusRing
+      ref={ref}      // Own the per-state background: the track is zinc-100, so an unselected
       // segment hovering must lift TOWARD the selected white (a half-white wash),
       // not to PressableHighlight's default zinc-100 (invisible on the track).
       style={(state) => {

package/src/select.tsx

@@ -0,0 +1,299 @@
+import { StyleSheet, View, type GestureResponderEvent, type StyleProp, type ViewStyle } from "react-native";
+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 { Text } from "./text";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { OptionList } from "./option_list";
+import type { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
+
+export interface SelectProps<T extends string = string, MULTI extends boolean = false> {
+  options?: (PickerOption<T> | undefined | false)[];
+  placeholder?: string;
+  /** Accessible name for the control. Required in spirit whenever there's no
+   *  visible label beside it — the selected text describes the value, not the control. */
+  accessibilityLabel?: string;
+  /** How each OPTION renders in the menu (a colour-dot badge, a member chip).
+   *  Also the default for the trigger's selection display when `renderSelected`
+   *  is omitted. */
+  renderOptionContent?: (option: PickerOption<T>) => ReactNode;
+  /** How each SELECTED item renders in the anchor — a render FUNCTION, not a preset.
+   *  Use `controls.remove` to detach it in place: render `<Chip onDismiss={remove}>`
+   *  for a removable chip box, an `OptionBadge`, or any custom display. Omit it for
+   *  a comma summary (single: the one value, `remove` clears it). The single seam
+   *  for "how the selection looks" — there's no `display` mode. */
+  renderSelected?: (item: PickerOption<T>, controls: { remove: () => void }) => ReactNode;
+  /** A single-line subtitle under each option's label in the menu. */
+  getOptionDescription?: (option: PickerOption<T>) => string | undefined;
+  /** Show a search field in the menu to filter the options. */
+  searchable?: boolean;
+  /** Offer a "create" row when the query matches no option — picking it adds the
+   *  typed value. Implies `searchable` (there has to be a query to create from). */
+  allowCustom?: boolean;
+  /** Label for the create row (default: `Add "<query>"`). */
+  customOptionLabel?: (query: string) => string | null;
+  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;
+}
+
+/**
+ * Choose from a known set with RICH options. The trigger shows the current
+ * selection — a comma summary by default, or your own `renderSelected` (render
+ * removable chips via `controls.remove` for a chip box, an `OptionBadge`, any
+ * custom look) — and opens an `OptionList` popover. Single or multi, with an
+ * optional in-menu search (`searchable`), create-new (`allowCustom`), select-all,
+ * and a leading clear row (`includeEmptyOption`). For a plain label-only single
+ * select use the native `Picker`; to SEARCH a large/remote set with the input AS
+ * the control (type-in-place, free text reflected in the field) use `Combobox`.
+ */
+export function Select<T extends string, MULTI extends boolean = false>(props: SelectProps<T, MULTI>) {
+  const {
+    testID,
+    options = [],
+    value,
+    placeholder,
+    accessibilityLabel,
+    multi = false as MULTI,
+    renderOptionContent,
+    renderSelected,
+    getOptionDescription,
+    searchable = false,
+    allowCustom = false,
+    customOptionLabel,
+    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), []);
+
+  const multiValue = useMemo(() => (multi && Array.isArray(value) ? value : []) as T[], [multi, value]);
+
+  // Detach a selected item — multi removes it from the array, single clears.
+  const handleRemove = useCallback(
+    (v: T) => {
+      if (!onValueChange) return;
+      if (multi) (onValueChange as (x: T[]) => void)(multiValue.filter((x) => x !== v));
+      else (onValueChange as (x: T) => void)("" as T);
+    },
+    [multi, multiValue, onValueChange],
+  );
+
+  // The create row was picked — add the typed value (multi appends; single sets + closes).
+  const handleCustomCommit = useCallback(
+    (raw: string) => {
+      const created = raw.trim() as T;
+      if (!created || !onValueChange) return;
+      if (multi) {
+        if (!multiValue.includes(created)) (onValueChange as (x: T[]) => void)([...multiValue, created]);
+      } else {
+        (onValueChange as (x: T) => void)(created);
+        setOpen(false);
+      }
+    },
+    [multi, multiValue, onValueChange],
+  );
+
+  return (
+    <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
+      <PopoverTrigger>
+        <SelectTrigger
+          testID={testID}
+          open={open}
+          style={style}
+          onPress={handleToggle}
+          renderOptionContent={renderOptionContent}
+          renderSelected={renderSelected}
+          onRemove={handleRemove}
+          selectedItems={selectedItems}
+          placeholder={placeholder}
+          accessibilityLabel={accessibilityLabel}
+          disabled={disabled}
+        />
+      </PopoverTrigger>
+      {/* disableBodyScroll: OptionList owns its own row scroll + keeps the search
+          field/footer OUTSIDE it. The default body ScrollView would be a redundant
+          second scroll that also clips the autofocused search field's outset ring. */}
+      <PopoverContent disableBodyScroll>
+        <OptionList<T, MULTI>
+          search={{ mode: searchable || allowCustom ? "internal" : "none" }}
+          options={options}
+          multi={multi}
+          value={value}
+          onValueChange={onValueChange}
+          onClose={onClose}
+          onRequestClose={handleClose}
+          allowCustom={allowCustom}
+          customOptionLabel={customOptionLabel}
+          onCustomCommit={handleCustomCommit}
+          renderOptionContent={renderOptionContent}
+          getOptionDescription={getOptionDescription}
+          enableSelectAll={enableSelectAll}
+          includeEmptyOption={includeEmptyOption}
+          accessibilityLabel={accessibilityLabel}
+          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(() => {
+    const optionsMap = new Map(
+      options.filter((opt): opt is PickerOption<T> => !!opt).map((opt) => [opt.value, opt]),
+    );
+    // A value not in `options` (e.g. an `allowCustom` creation) still shows —
+    // fall back to a {value, label} so it renders.
+    const resolve = (val: T): PickerOption<T> => optionsMap.get(val) ?? { value: val, label: val };
+    if (multi) {
+      const multiValue = Array.isArray(value) ? value : [];
+      return multiValue.map(resolve);
+    }
+    const singleValue = Array.isArray(value) ? value[0] : value;
+    if (singleValue !== undefined && singleValue !== null && singleValue !== "") {
+      return [resolve(singleValue)];
+    }
+    return [];
+  }, [multi, value, options]);
+}
+
+function SelectTrigger<T extends string>({
+  ref,
+  testID,
+  open,
+  style,
+  onPress,
+  renderOptionContent,
+  renderSelected,
+  onRemove,
+  selectedItems,
+  placeholder,
+  accessibilityLabel,
+  disabled = false,
+}: {
+  ref?: Ref<View>;
+  testID?: string;
+  open: boolean;
+  style?: StyleProp<ViewStyle>;
+  onPress: () => void;
+  renderOptionContent?: (option: PickerOption<T>) => ReactNode;
+  renderSelected?: (item: PickerOption<T>, controls: { remove: () => void }) => ReactNode;
+  onRemove?: (value: T) => void;
+  selectedItems: PickerOption<T>[];
+  placeholder?: string;
+  accessibilityLabel?: string;
+  disabled?: boolean;
+}) {
+  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
+      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.
+      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]}
+      onPress={!disabled ? onPress : undefined}
+      disabled={disabled}
+    >
+      {hasSelection ? (
+        renderSelected ? (
+          <View style={styles.selectionRow}>
+            {selectedItems.map((item) => (
+              <View key={item.value}>
+                {renderSelected(item, {
+                  // The chip's ✕ press reaches here via IconButton's forwarded event;
+                  // stop it so detaching doesn't ALSO open the menu.
+                  remove: (e?: GestureResponderEvent) => {
+                    e?.stopPropagation?.();
+                    onRemove?.(item.value);
+                  },
+                })}
+              </View>
+            ))}
+          </View>
+        ) : renderOptionContent ? (
+          <View style={styles.selectionRow}>
+            {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>
+      )}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  pressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: CONTROL_RADIUS,
+    minHeight: 40,
+  },
+  opened: {
+    // Mouse-opened, so the trigger never takes keyboard focus — wear the same 2px
+    // zinc ring a focused input gets, over the unchanged 1px border (not a lone 1px edge).
+    boxShadow: FOCUS_RING,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  selectionRow: {
+    flexDirection: "row",
+    gap: 4,
+    flexWrap: "wrap",
+    flex: 1,
+  },
+});

package/src/sort_header.tsx

@@ -85,7 +85,7 @@ export function SortHeader(props: SortHeaderProps) {
 
   return (
     <PressableHighlight
-      accessibilityRole="button"
+      focusRing      accessibilityRole="button"
       accessibilityLabel={`${sortByLabel}${dirText}`}
       onPress={() => onSort(sortKey)}
       style={[styles.header, align === "right" ? styles.right : null, style]}

package/src/sources.tsx

@@ -51,7 +51,7 @@ export function Sources(props: SourcesProps) {
       <View style={styles.row}>
         {props.sources.map((s) =>
           props.onOpen ? (
-            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={`Open ${s.label}`} style={styles.chip}>
+            <PressableHighlight focusRing key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={`Open ${s.label}`} style={styles.chip}>
               <SourceChip source={s} openable />
             </PressableHighlight>
           ) : (

package/src/spreadsheet_view.tsx

@@ -1,8 +1,24 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { View, StyleSheet, Pressable } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { Button } from "./button";
 import { colors } from "./colors";
+import { FocusRingPressable } from "./focus_ring_pressable";
+
+function SheetTab(props: { selected: boolean; onPress: () => void; name: string }) {
+  return (
+    <FocusRingPressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: props.selected }}
+      onPress={props.onPress}
+      style={[styles.tab, props.selected ? styles.tabActive : null]}
+    >
+      <Text size="xs" color={props.selected ? "default" : "muted"} numberOfLines={1}>
+        {props.name}
+      </Text>
+    </FocusRingPressable>
+  );
+}
 import { isExcelMimeType } from "./mime";
 import { downloadFileFromUrl } from "./download";
 import { type PreviewLabels } from "./file_preview_types";
@@ -48,8 +64,12 @@ async function loadXlsx(): Promise<XlsxApi> {
   };
 }
 
-async function fetchArrayBuffer(url: string, signal: AbortSignal): Promise<ArrayBuffer> {
-  const response = await fetch(url, { signal });
+async function fetchArrayBuffer(
+  url: string,
+  signal: AbortSignal,
+  credentials: RequestCredentials | undefined,
+): Promise<ArrayBuffer> {
+  const response = await fetch(url, { signal, credentials });
   if (!response.ok) throw new Error(`Spreadsheet fetch failed (${response.status})`);
   return response.arrayBuffer();
 }
@@ -58,6 +78,9 @@ interface SpreadsheetViewProps {
   file: DisplayFile;
   labels: PreviewLabels;
   onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
+  /** Forwarded to the byte fetch — `"include"` for the host's auth-gated proxy
+   *  URLs, omitted for an app's presigned URLs. See `FilePreviewProps`. */
+  credentials?: RequestCredentials;
 }
 
 interface ParseState {
@@ -72,7 +95,7 @@ interface ParseState {
  * transparent scroll layer (sized to the sheet) sits over a viewport-sized
  * canvas that redraws on scroll. No editing, ribbon, or selection.
  */
-export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps) {
+export function SpreadsheetView({ file, labels, onError, credentials }: SpreadsheetViewProps) {
   const apiRef = useRef<XlsxApi | null>(null);
   const [state, setState] = useState<ParseState>({ loading: true, workbook: undefined, error: undefined });
   const [sheetIndex, setSheetIndex] = useState(0);
@@ -91,8 +114,8 @@ export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps)
     const run = async () => {
       const api = apiRef.current ?? (apiRef.current = await loadXlsx());
       const parsed = isExcelMimeType(file.mimeType)
-        ? api.parseExcelBuffer(await fetchArrayBuffer(file.url, controller.signal))
-        : await api.parseCsvFile(file.url, controller.signal);
+        ? api.parseExcelBuffer(await fetchArrayBuffer(file.url, controller.signal, credentials))
+        : await api.parseCsvFile(file.url, controller.signal, credentials);
       if (controller.signal.aborted) return;
       const wb = api.loadWorkbookFromSnapshot(parsed);
       api.recomputeIfStale(wb);
@@ -112,7 +135,15 @@ export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps)
       });
     });
     return () => controller.abort();
-  }, [file.url, file.id, file.mimeType, labels.loadFailed, labels.passwordProtected, onError]);
+  }, [
+    file.url,
+    file.id,
+    file.mimeType,
+    labels.loadFailed,
+    labels.passwordProtected,
+    onError,
+    credentials,
+  ]);
 
   // Track the viewport size.
   useEffect(() => {
@@ -242,7 +273,7 @@ export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps)
             icon="download"
             title={labels.download}
             color="secondary"
-            onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+            onPress={() => void downloadFileFromUrl(file.url, file.filename, { credentials })}
           />
         </View>
       </View>
@@ -264,21 +295,16 @@ export function SpreadsheetView({ file, labels, onError }: SpreadsheetViewProps)
       {sheets.length > 1 ? (
         <View style={styles.tabs}>
           {sheets.map((s, i) => (
-            <Pressable
+            <SheetTab
               key={i}
-              accessibilityRole="tab"
-              accessibilityState={{ selected: i === sheetIndex }}
+              selected={i === sheetIndex}
+              name={s.name}
               onPress={() => {
                 setSheetIndex(i);
                 setScroll({ x: 0, y: 0 });
                 if (scrollRef.current) scrollRef.current.scrollTo({ left: 0, top: 0 });
               }}
-              style={[styles.tab, i === sheetIndex ? styles.tabActive : null]}
-            >
-              <Text size="xs" color={i === sheetIndex ? "default" : "muted"} numberOfLines={1}>
-                {s.name}
-              </Text>
-            </Pressable>
+            />
           ))}
         </View>
       ) : null}

package/src/status_grid.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { colors, solid, tint, type ColorName } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 import { Text } from "./text";
 
 export interface StatusGridState {
@@ -84,7 +85,7 @@ function Cell(props: CellProps) {
   };
   if (!onPress) return <View style={[styles.cell, base]} />;
   return (
-    <Pressable
+    <FocusRingPressable
       accessibilityRole="button"
       accessibilityLabel={label}
       onPress={onPress}
@@ -130,7 +131,7 @@ export function StatusLegend(props: StatusLegendProps) {
         );
         return onSelect ? (
           <PressableHighlight
-            key={state.key}
+            focusRing            key={state.key}
             accessibilityRole="button"
             accessibilityState={{ selected }}
             accessibilityLabel={`${state.label}: ${count}`}

package/src/stepper.tsx

@@ -141,7 +141,7 @@ export function Step(props: StepProps) {
         </View>
         <View style={[styles.vContent, !_last ? styles.vGap : null]}>
           {onPress ? (
-            <PressableHighlight onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={styles.vPress}>
+            <PressableHighlight focusRing onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={styles.vPress}>
               {body}
             </PressableHighlight>
           ) : (

package/src/switch.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { Animated, StyleSheet, Pressable, View } from "react-native";
 import { colors } from "./colors";
 import { Icon } from "./icon";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 export interface SwitchProps {
   testID?: string;
   /**
@@ -17,6 +19,7 @@ export interface SwitchProps {
 export function Switch(props: SwitchProps) {
   const { testID, accessibilityLabel, value, disabled, onChange } = props;
   const checked = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(() => {
     if (onChange !== undefined) {
@@ -72,7 +75,8 @@ export function Switch(props: SwitchProps) {
     <Pressable
       testID={testID}
       onPress={handlePress}
-      style={styles.root}
+      {...focusProps}
+      style={[styles.root, focusVisible && { boxShadow: FOCUS_RING }]}
       disabled={disabled}
       accessibilityRole="switch"
       accessibilityLabel={accessibilityLabel}

package/src/switch_button.tsx

@@ -16,7 +16,7 @@ export function SwitchButton(props: SwitchButtonProps) {
 
   return (
     <PressableHighlight
-      style={{
+      focusRing      style={{
         flexDirection: "row",
         gap: 16,
         alignItems: "center",

package/src/switcher.tsx

@@ -69,7 +69,7 @@ export function Switcher(props: SwitcherProps) {
   return (
     <Popover open={open} onOpenChange={setOpen} side={side} align={align}>
       <PopoverTrigger>
-        <PressableHighlight style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
+        <PressableHighlight focusRing style={[styles.trigger, { maxWidth: maxTriggerWidth }]}>
           <Text size="sm" weight="medium" color="zinc-700" numberOfLines={1}>
             {label}
           </Text>