@lotics/ui 42.4.0 → 43.0.0

package/src/inline_time_picker.tsx

@@ -1,18 +1,23 @@
-import { useCallback, useRef, type ReactNode } from "react";
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { View } from "react-native";
+import { ActivityIndicator } from "./activity_indicator";
 import { Icon } from "./icon";
+import { Text } from "./text";
 import { colors } from "./colors";
-import { TimePicker } from "./time_picker";
-import { useLoticsLocale } from "./locale";
-import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { TimeColumns } from "./time_columns";
+import { formatTimeOfDay } from "./time_options";
+import { type InlineEditVariant, InlineEditView } from "./inline_edit";
+import { useLoticsLocale, useLocaleTag } from "./locale";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
   value: string;
   onSave: (next: string) => void | Promise<void>;
   placeholder?: string;
-  /** "blur" (default): clicking away or Enter saves; Escape reverts. "buttons":
-   *  an explicit ✓ saves and ✕ reverts. */
-  controls?: InlineEditControls;
+  /** BCP-47 locale deciding 12- vs 24-hour display and whether a period column
+   *  shows. Defaults to the active `LoticsLocaleProvider` locale. */
+  locale?: string;
   disabled?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
@@ -25,51 +30,95 @@ export interface InlineTimePickerProps {
 }
 
 /**
- * An inline-editable time of day — the `InlineTextInput` pattern over
- * `TimePicker`. The value reads as plain text; clicking swaps in the native time
- * field at the same height, so the form never reflows.
+ * An inline-editable time of day: the value at rest, the hour / minute / period
+ * columns in a popover anchored to the field. The pick commits when the popover
+ * closes; dismissing without changing anything writes nothing.
+ *
+ * On the POPOVER inline shell, beside `InlineDatePicker` — not the typed one it
+ * used to sit on. `useInlineEdit` commits when the field BLURS, and a picker
+ * cannot live there: opening one moves focus into it, which reads as a blur,
+ * commits and unmounts the editor before the picker can paint. A pick is not a
+ * keystroke, and the kit keeps two shells precisely to hold that line.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel, variant, actions } = props;
-  const edit = useInlineEdit<string>({ value, onSave });
-  const dateLabels = useLoticsLocale().datePicker;
-  // Segments emit ONLY on a complete "HH:mm", so a half-typed entry (an hour and
-  // no minute) reaches the draft as "" and would otherwise commit as a silent
-  // clear. Blocking on it keeps the entry fixable instead of wiping the value.
-  const incomplete = useRef(false);
+  const { value, onSave, placeholder, locale, disabled, accessibilityLabel, variant, actions } = props;
+  const localeTag = useLocaleTag(locale);
+  const loc = useLoticsLocale().datePicker;
+  const anchorRef = useRef<View>(null);
 
-  const onBlur = useCallback(() => {
-    if (controls === "buttons") return;
-    if (incomplete.current) return;
-    void edit.commit();
-  }, [controls, edit]);
+  const [open, setOpen] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Closing IS the commit — every column emits a COMPLETE time, so there is
+  // never a half-picked draft to reject and no "incomplete" state to guard. An
+  // unchanged draft writes nothing rather than sending a no-op update.
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        setDraft(value);
+        setError(null);
+        setOpen(true);
+        return;
+      }
+      setOpen(false);
+      if (draft === value) return;
+      setSaving(true);
+      void (async () => {
+        try {
+          await onSave(draft);
+          setError(null);
+        } catch (err) {
+          setError(err instanceof Error ? err.message : String(err));
+          setDraft(value);
+        } finally {
+          setSaving(false);
+        }
+      })();
+    },
+    [draft, value, onSave],
+  );
+
+  const trailing = saving ? (
+    <ActivityIndicator size={16} color={colors.zinc[400]} />
+  ) : (
+    <Icon name="clock" size={18} color={colors.zinc[400]} />
+  );
 
   return (
-    <InlineEditFrame
-      variant={variant}
-      actions={actions}
-      editing={edit.editing}
-      display={value}
-      placeholder={placeholder}
-      onBegin={edit.begin}
-      controls={controls}
-      onCommit={() => void edit.commit()}
-      onCancel={edit.cancel}
-      saving={edit.saving}
-      error={edit.error ?? (incomplete.current ? dateLabels.invalidTime : null)}
-      disabled={disabled}
-      accessibilityLabel={accessibilityLabel}
-      affordance={<Icon name="clock" size={18} color={colors.zinc[400]} />}
-    >
-      <TimePicker
-        value={edit.draft}
-        onValueChange={edit.setDraft}
-        onBlur={onBlur}
-        onEscape={edit.cancel}
-        onIncompleteChange={(next) => { incomplete.current = next; }}
-        autoFocus
-        accessibilityLabel={accessibilityLabel}
-      />
-    </InlineEditFrame>
+    <View>
+      <Popover
+        open={open && !disabled}
+        onOpenChange={handleOpenChange}
+        triggerRef={anchorRef}
+        side="bottom"
+        align="start"
+      >
+        <PopoverTrigger>
+          <InlineEditView
+            variant={variant}
+            actions={actions}
+            anchorRef={anchorRef}
+            display={value ? formatTimeOfDay(value, localeTag) : ""}
+            placeholder={placeholder ?? loc.chooseTime}
+            disabled={disabled}
+            active={open && !disabled}
+            accessibilityLabel={accessibilityLabel ?? loc.chooseTime}
+            // The resting clock glyph marks an empty field as a TIME control —
+            // the same promise the standalone picker's trigger makes.
+            trailing={trailing}
+          />
+        </PopoverTrigger>
+        <PopoverContent disableBodyScroll>
+          <TimeColumns value={draft} onValueChange={setDraft} locale={locale} />
+        </PopoverContent>
+      </Popover>
+      {error ? (
+        <Text size="xs" color="danger" style={{ marginTop: 4 }}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
   );
 }

package/src/list_item.tsx

@@ -1,8 +1,8 @@
-import { Ref, useCallback } from "react";
+import { Ref, useCallback, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { PressableHighlight } from "./pressable_highlight";
+import { FocusRingPressable } from "./focus_ring_pressable";
 
 export interface ListItemProps {
   ref?: Ref<View>;
@@ -21,6 +21,29 @@ export interface ListItemProps {
  * A settings / detail ROW — optional `left` (icon/avatar), `title` + `description`, a `right`
  * control, optional `onPress`/`selected`. For settings lists and detail rows; NOT a data register
  * row (`PressableRow` / `Table`) and NOT a menu/listbox row (`MenuListItem`).
+ *
+ * **A pressable row always presses BESIDE its `right` slot, never around it.** The slot is
+ * documented as holding a control, and a button may not contain one: `<button>` inside
+ * `<button>` is invalid HTML that React warns about, and it puts a second tab stop and a
+ * second name inside a control that is supposed to be one thing. So the surface is a wrapper,
+ * the press target is the region holding `left` and the text, and the slot sits outside it —
+ * the anatomy `InlineEditView` uses for its `actions`.
+ *
+ * It does NOT fix a double press: react-native-web's press responder calls
+ * `stopPropagation`, so a nested control's press never reached the row in the first place.
+ * The nesting alone is the defect.
+ *
+ * ALWAYS, not only when a slot is passed. `right` is routinely conditional
+ * (`updateAvailable ? <Badge/> : undefined`), and an anatomy that flipped on that would make
+ * two rows in one list press differently — the badge row's right edge dead, its neighbour's
+ * live — for a reason a reader cannot see. One shape, whatever the data does. With no slot
+ * the region takes the whole row, so the press target is unchanged.
+ *
+ * That the anatomy carries this rather than a prop opting into safety is the point: every
+ * call site already passing a control here is fixed without being touched, and a caller
+ * cannot reintroduce the nesting by forgetting a flag. The cost is that a decorative `right`
+ * (a badge, a chevron) is not part of the press target — uniformly, which is what makes it
+ * readable rather than surprising.
  */
 export function ListItem(props: ListItemProps) {
   const { ref, left, title, description, right, onPress, selected, disabled, style, testID } =
@@ -30,7 +53,8 @@ export function ListItem(props: ListItemProps) {
     onPress?.();
   }, [title, testID, onPress]);
 
-  const inner = (
+  // Everything the row is ABOUT — never the `right` slot, which may hold a control.
+  const body = (
     <>
       {left}
       <View style={styles.textContainer}>
@@ -48,7 +72,6 @@ export function ListItem(props: ListItemProps) {
             description
           ))}
       </View>
-      {right}
     </>
   );
 
@@ -56,21 +79,79 @@ export function ListItem(props: ListItemProps) {
 
   if (onPress) {
     return (
-      <PressableHighlight
-        focusRing
-        ref={ref}        testID={testID}
+      <PressRow
+        ref={ref}
+        testID={testID}
+        containerStyle={containerStyle}
         onPress={handlePress}
         disabled={disabled}
-        style={containerStyle}
+        right={right}
       >
-        {inner}
-      </PressableHighlight>
+        {body}
+      </PressRow>
     );
   }
 
   return (
     <View ref={ref} testID={testID} style={containerStyle}>
-      {inner}
+      {body}
+      {right}
+    </View>
+  );
+}
+
+/**
+ * The pressable anatomy: a non-pressable surface, the press target inside it, the
+ * slot beside that.
+ *
+ * The wash lives on the WRAPPER and is driven by the press region's own hover and
+ * press, so the whole row lights up as one thing — the region alone would light up
+ * to the edge of the slot and stop, which reads as two rows. It uses
+ * `FocusRingPressable` for exactly that reason: the wash-free base, for a control
+ * that paints its own surface.
+ *
+ * `ref` and `testID` go on the REGION, not the wrapper, because they identify the
+ * thing that presses: a test that clicks the row by `testID` must land on the
+ * press target rather than on a box that happens to contain it. The region also
+ * keeps the focus ring and the accessible name, since the text it wraps is what
+ * names the row.
+ */
+function PressRow(props: {
+  ref?: Ref<View>;
+  testID?: string;
+  containerStyle: StyleProp<ViewStyle>;
+  onPress: () => void;
+  disabled?: boolean;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  const { ref, testID, containerStyle, onPress, disabled, right, children } = props;
+  const [hovered, setHovered] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        !disabled && pressed && styles.pressed,
+        !disabled && !pressed && hovered && styles.hovered,
+      ]}
+    >
+      <FocusRingPressable
+        ref={ref}
+        testID={testID}
+        style={styles.pressRegion}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+      >
+        {children}
+      </FocusRingPressable>
+      {right}
     </View>
   );
 }
@@ -93,4 +174,21 @@ const styles = StyleSheet.create({
   selected: {
     backgroundColor: colors.zinc["100"],
   },
+  // The wash `PressableHighlight` would have painted, moved to the wrapper so it
+  // covers the row rather than stopping at the slot.
+  hovered: {
+    backgroundColor: colors.zinc["100"],
+  },
+  pressed: {
+    backgroundColor: colors.zinc["200"],
+  },
+  // Takes the slack, so the press target reaches the slot and the row presses
+  // everywhere the row is ABOUT.
+  pressRegion: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    alignSelf: "stretch",
+  },
 });

package/src/locale.tsx

@@ -272,7 +272,7 @@ export const en: LoticsLocale = {
   referenceField: { open: "Open", change: "Change", clear: "Clear", edit: "Edit", save: "Save", saving: "Saving…", cancel: "Cancel" },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
   picker: { emptyOption: "None" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", chooseTime: "Choose a time", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -444,7 +444,7 @@ export const vi: LoticsLocale = {
   referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Huỷ" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
   picker: { emptyOption: "Không có" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", chooseTime: "Chọn giờ", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },

package/src/menu_button.tsx

@@ -47,6 +47,21 @@ export interface MenuButtonProps {
    * the common popover-menu usage.
    */
   role?: "menuitem" | "button" | "option";
+  /**
+   * Roving tabindex for a listbox this row belongs to: the selected row passes
+   * `0` and every other row `-1`, so Tab reaches the list ONCE and arrows move
+   * within it (the composite-widget rule — sixty rows must not be sixty stops).
+   *
+   * Here rather than hand-rolled beside it because this component already claims
+   * to BE the listbox row — it owns `selected` and the `aria-selected` that
+   * carries the state — and a row that cannot take the tab stop or the keys is
+   * only half of one. `OptionList` does not need it: that body drives keys from
+   * a hidden input, the combobox pattern, where the rows are never focused.
+   */
+  tabIndex?: 0 | -1;
+  /** Web-only key handler, forwarded to the DOM by react-native-web. Pairs with
+   *  {@link MenuButtonProps.tabIndex} to move the roving focus. */
+  onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
 }
 
 export function MenuButton(props: MenuButtonProps) {
@@ -68,6 +83,8 @@ export function MenuButton(props: MenuButtonProps) {
     accessibilityLabel,
     role = "menuitem",
     nativeID,
+    tabIndex,
+    onKeyDown,
   } = props;
 
   const resolvedLabel = accessibilityLabel ?? (typeof title === "string" ? title : undefined) ?? tooltip;
@@ -126,6 +143,8 @@ export function MenuButton(props: MenuButtonProps) {
           onPress?.();
         }}
         onHoverIn={onHoverIn}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
         disabled={disabled}
         tooltip={tooltip}
         style={containerStyle}

package/src/option_list.tsx

@@ -139,6 +139,14 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
                 !props.multi && row.selected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined,
+              // A chosen row is `selected`, which is what puts `aria-selected` on
+              // it — the property an `option` carries its state in. Until now the
+              // only signal was the check GLYPH beside it (and a checkbox in
+              // multi), so which option was chosen was information available to
+              // whoever could see the row and to nobody else. It also brings the
+              // resting `zinc.100` highlight, one weight above the `zinc.50` the
+              // keyboard/hover row takes, so the two states stay distinguishable.
+              selected: row.selected,
               focused: row.index === list.activeIndex,
               disabled: opt.disabled,
               onPress: () => list.pickRow(row.index),

package/src/pressable_highlight.tsx

@@ -10,7 +10,7 @@ import {
 import { Ref, useCallback } from "react";
 import { TooltipSide, useTooltip } from "./tooltip";
 import { colors } from "./colors";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { composeHandler, useFocusRing } from "./use_focus_ring";
 
 /** The pressable state, plus the web-only `hovered` flag react-native-web adds and
@@ -58,11 +58,19 @@ export interface PressableHighlightProps extends PressableProps {
    */
   "aria-current"?: "true" | "page" | "step" | "location";
   /**
-   * Pass "none" on row/card surfaces: a pressable surface is a button, not a
-   * text-selection surface — drag jitter on selectable text starts a
-   * selection and can swallow the click. Exposed as a prop because RN types
-   * only carry `userSelect` on TextStyle, while react-native-web applies it
-   * to any element.
+   * Defaults to `"none"`, because this component IS a button (see the role note
+   * below) and a button's label is not a text-selection surface — drag jitter on
+   * selectable text starts a selection and can swallow the click.
+   *
+   * It was opt-in, and the result was what an opt-in rule always produces:
+   * `Switcher`, `Chip`, `CardSelectItem` and `Stepper` had simply never been
+   * told, so their labels dragged into a selection. Pass `"auto"` where the
+   * content genuinely is text to read and copy — nothing in the kit does, and the
+   * register row that DOES want selectable text is `PressableRow`, which is a
+   * role-less bare `Pressable` and unaffected by this.
+   *
+   * Exposed as a prop at all because RN types only carry `userSelect` on
+   * TextStyle, while react-native-web applies it to any element.
    */
   userSelect?: "auto" | "none";
 }
@@ -89,7 +97,7 @@ export function PressableHighlight(props: PressableHighlightProps) {
     tooltip,
     tooltipSide = "top",
     onPress,
-    userSelect,
+    userSelect = "none",
     focusRing,
     ...restPressableProps
   } = props;
@@ -114,7 +122,11 @@ export function PressableHighlight(props: PressableHighlightProps) {
         const { pressed, hovered } = state;
         return [
           {
-            ...({ touchAction: "manipulation", cursor: disabled ? "auto" : "pointer", transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
+            // The ARROW by default — see `CURSOR_DEFAULT`. Rows, menu options and
+            // cards are what this base is for, and none of them act on their own;
+            // the handful that do set `CURSOR_ACTION` in their own style, which
+            // lands after this one.
+            ...({ touchAction: "manipulation", cursor: CURSOR_DEFAULT, transitionDuration: "0.1s", transitionProperty: "background-color", userSelect } as ViewStyle),
           },
           {
             backgroundColor: pressed ? colors.zinc["200"] : hovered ? colors.zinc["100"] : null,

package/src/pressable_row.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, Ref, useCallback, useState } from "react";
-import { ROW_WASH_BLEED } from "./control_surface";
+import { CURSOR_DEFAULT, ROW_WASH_BLEED } from "./control_surface";
 import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { pressSelectedText } from "./press_selection";
@@ -107,7 +107,7 @@ const styles = StyleSheet.create({
     // furniture that must not be dragged over already opts out for itself
     // (`Badge`, `Avatar`, `Button` each set none), so the blanket only ever cost
     // the text it had no business covering.
-    ...({ cursor: "pointer", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
+    ...({ cursor: CURSOR_DEFAULT, transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },
   // THE register row — FULL-WIDTH rounded highlight that BLEEDS past the content
   // (`ROW_WASH_BLEED`, net-zero margin+padding), so the row's content sits on the

package/src/scroll_to_bottom.tsx

@@ -1,5 +1,6 @@
 import { colors } from "./colors";
 import { StyleSheet } from "react-native";
+import { CURSOR_ACTION } from "./control_surface";
 import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
@@ -30,6 +31,8 @@ export function ScrollToBottom(props: ScrollToBottomProps) {
 
 const styles = StyleSheet.create({
   button: {
+    // Jumping to the bottom ACTS — see `CURSOR_ACTION`.
+    cursor: CURSOR_ACTION,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.background,

package/src/slider.tsx

@@ -263,7 +263,7 @@ const styles = StyleSheet.create({
   trackArea: {
     height: 28,
     justifyContent: "center",
-    ...({ cursor: "pointer", touchAction: "none" } as ViewStyle),
+    ...({ cursor: "auto", touchAction: "none" } as ViewStyle),
   },
   trackBg: {
     position: "absolute",
@@ -289,7 +289,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     borderWidth: 2,
     ...({
-      cursor: "pointer",
+      cursor: "auto",
       boxShadow: "0 1px 3px rgba(38,38,38,0.18)",
     } as ViewStyle),
   },

package/src/switch.tsx

@@ -2,7 +2,7 @@ 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 { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 export interface SwitchProps {
   testID?: string;
@@ -89,6 +89,8 @@ export function Switch(props: SwitchProps) {
 
 const styles = StyleSheet.create({
   root: {
+    // A switch SETS A VALUE — the arrow, see `CURSOR_DEFAULT`.
+    cursor: CURSOR_DEFAULT,
     borderRadius: 999,
     width: 48,
     height: 32,

package/src/text.tsx

@@ -62,7 +62,7 @@ type TextUserSelect = "none" | "auto" | "text";
  */
 export function Text(props: TextProps) {
   const {
-    userSelect = "text",
+    userSelect,
     align = "left",
     children,
     testID,
@@ -107,7 +107,10 @@ export function Text(props: TextProps) {
         styles.text,
         Platform.OS !== "web" && styles[size],
         styles[weight],
-        styles[userSelect],
+        // Only when ASKED for. Left to inherit, a label inside a button is
+        // unselectable and a paragraph is selectable, each from its container —
+        // which is what a container setting `userSelect` is trying to say.
+        userSelect && selectStyles[userSelect],
         styles[align],
         decoration && styles[decoration],
         tabular && styles.tabular,
@@ -123,10 +126,20 @@ export function Text(props: TextProps) {
   );
 }
 
+/**
+ * Selectability, applied only when a caller states it. Its own sheet because the
+ * value `"text"` shares a name with the BASE text style — mapped through the main
+ * sheet, asking for `userSelect="text"` resolved to that base and set nothing.
+ */
+const selectStyles = StyleSheet.create({
+  text: { userSelect: "text" },
+  auto: { userSelect: "auto" },
+  none: { userSelect: "none" },
+});
+
 const styles = StyleSheet.create({
   text: {
     letterSpacing: -0.4,
-    userSelect: "text",
   },
 
   // Text size styles
@@ -197,14 +210,6 @@ const styles = StyleSheet.create({
     textDecorationLine: "underline line-through",
   },
 
-  // User select styles
-  auto: {
-    userSelect: "auto",
-  },
-  none: {
-    userSelect: "none",
-  },
-
   tabular: {
     fontVariant: ["tabular-nums"],
   },