@lotics/ui 5.9.0 → 5.10.0

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>

package/src/table.tsx

@@ -12,6 +12,8 @@ import { Text } from "./text";
 import { Divider } from "./divider";
 import { PressableRow } from "./pressable_row";
 import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 /**
  * One column of a register — its width/flex/align/label/sortability defined ONCE,
@@ -132,6 +134,7 @@ export function TableRow(props: TableRowProps) {
   const cells = (Children.toArray(children).filter(isValidElement) as ReactElement<TableCellProps>[]).map(
     (cell, i) => cloneElement(cell, { _column: ctx.columns[i] }),
   );
+  const { focusVisible, focusProps } = useFocusRing();
 
   return (
     <PressableRow onPress={onPress ?? noop} selected={selected} style={styles.row}>
@@ -140,7 +143,8 @@ export function TableRow(props: TableRowProps) {
         accessibilityRole={onPress ? "button" : undefined}
         accessibilityLabel={accessibilityLabel}
         onPress={onPress}
-        style={[styles.door, { minHeight }]}
+        {...focusProps}
+        style={[styles.door, { minHeight }, focusVisible && { boxShadow: FOCUS_RING }]}
       >
         {cells}
       </Pressable>

package/src/tabs.tsx

@@ -110,8 +110,8 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
 
   return (
     <PressableHighlight
-      ref={ref}
-      style={{
+      focusRing
+      ref={ref}      style={{
         borderBottomWidth: 3,
         borderBottomColor: selected ? colors.zinc["700"] : "transparent",
         backgroundColor: "transparent",

package/src/text_input_field.tsx

@@ -5,7 +5,9 @@ import {
   View,
 } from "react-native";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
+import { useFocusRing, composeHandler } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 import { Ref, useCallback } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
@@ -68,6 +70,12 @@ export function TextInputField(props: TextInputFieldProps) {
   const { small } = useScreenSize();
   const lineHeight = getInputLineHeight(small);
   const binding = useFormField();
+  // Text-like input: ring on ANY focus (browsers treat typing-capable fields as
+  // focus-visible even on pointer focus), so a clicked field shows its ring.
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  // Premium hover affordance: the resting border darkens, signalling interactivity.
+  // Tracked on the wrapping View (RN-Web forwards mouse events there reliably).
+  const { hovered, hoverProps } = useHover();
 
   // Describedby chains description and error so both are read. We join them
   // explicitly here because React Native Web does not flatten array attrs.
@@ -108,7 +116,7 @@ export function TextInputField(props: TextInputFieldProps) {
   );
 
   return (
-    <View>
+    <View {...(hoverProps as object)}>
       {icon && (
         <View style={styles.icon}>
           <Icon name={icon} size={20} color={colors.zinc[400]} />
@@ -120,20 +128,23 @@ export function TextInputField(props: TextInputFieldProps) {
         ref={mergedRef}
         value={value}
         onChangeText={handleChangeText}
-        onFocus={inputProps.onFocus}
-        onBlur={inputProps.onBlur}
+        onFocus={composeHandler(inputProps.onFocus, focusProps.onFocus)}
+        onBlur={composeHandler(inputProps.onBlur, focusProps.onBlur)}
         nativeID={binding?.inputId ?? inputProps.nativeID}
         accessibilityLabelledBy={binding?.labelId ?? inputProps.accessibilityLabelledBy}
         aria-describedby={describedBy}
         aria-invalid={binding?.invalid || undefined}
         style={[
           styles.input,
+          CONTROL_TRANSITION,
           getInputTextStyle(),
           height ? { height } : undefined,
           autoGrow && !autoGrowResult.scrollEnabled && { overflow: "hidden" as const },
           !editable && styles.disabled,
           icon && styles.withIcon,
+          hovered && editable && { borderColor: HOVER_BORDER },
           style,
+          focusVisible && { boxShadow: FOCUS_RING },
         ]}
         multiline={(numberOfLines && numberOfLines > 1) || multiline}
         focusable={editable}

package/src/time_picker.tsx

@@ -1,7 +1,9 @@
 import type { KeyboardEvent } from "react";
 import { colors } from "@lotics/ui/colors";
 import { fontFamilyRegular, inputTextStyleWeb } from "@lotics/ui/text_utils";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
+import { useHover } from "./use_hover";
 export interface TimePickerProps {
   value?: string;
   onValueChange: (value: string) => void;
@@ -15,6 +17,8 @@ export interface TimePickerProps {
 
 export function TimePicker(props: TimePickerProps) {
   const { value, onValueChange, onBlur, onKeyDown, autoFocus, disabled, accessibilityLabel } = props;
+  const { focusVisible, focusProps } = useFocusRing({ always: true });
+  const { hovered, hoverProps } = useHover();
 
   return (
     <input
@@ -23,7 +27,9 @@ export function TimePicker(props: TimePickerProps) {
         onValueChange(e.target.value);
       }}
       type="time"
-      onBlur={onBlur}
+      {...hoverProps}
+      onFocus={focusProps.onFocus}
+      onBlur={() => { focusProps.onBlur(); onBlur?.(); }}
       onKeyDown={onKeyDown}
       autoFocus={autoFocus}
       disabled={disabled}
@@ -35,14 +41,15 @@ export function TimePicker(props: TimePickerProps) {
         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",
       }}
     />
   );