@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/TextInput.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useCallback, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { useEffect, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
 import { Host, useNativeState, } from "@expo/ui";
 import { NativeTextField } from "./nativeTextField";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { useFontStyle } from "../hooks/useFontStyle.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
@@ -15,6 +17,21 @@ import { palette } from "../constants/colors.js";
 import { clearKeyboardFocusedInput, setKeyboardFocusedInput, } from "./keyboardFocusRegistry.js";
 import { useTextInputSurfaceResponder } from "./keyboardDismiss.js";
 const NUMERIC_REGEX = /^[0-9]*$/;
+/**
+ * Write the `@expo/ui` observable text buffer. `set()` is the React
+ * Compiler-friendly writer (`@expo/ui` >= 56.0.17); earlier releases in the
+ * peer range only have the `value` setter, which calls the same native
+ * `setValue`. Kept outside the component so the compiler doesn't see a hook
+ * result being mutated, which made it skip `NativeTextInput` entirely.
+ */
+function writeNativeText(state, text) {
+    if (typeof state.set === "function") {
+        state.set(text);
+    }
+    else {
+        state.value = text;
+    }
+}
 /** Platform touch-target guideline (pt); the compact fields sit below it. */
 const MIN_TOUCH_TARGET = 44;
 const SIZE_CONFIGS = {
@@ -77,7 +94,7 @@ const SIZE_CONFIGS = {
  * // With custom elements
  * <TextInput
  *   label="Search"
- *   leftElement={<Icon as={Search} size={20} />}
+ *   leftElement={<Icon name="search" size={20} />}
  * />
  * ```
  */
@@ -97,6 +114,8 @@ export function TextInput(props) {
  */
 function WebTextInput({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ref, ...rest }) {
     const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
+    // Host-app `setShape({ input })`; the underlined variant stays square.
+    const inputRadius = variant === "underlined" ? undefined : shapeRadius(useShape("input"));
     const styles = themedStyles(theme)[variant][size];
     const inputFont = useFontStyle("regular");
     const [focused, setFocused] = useState(false);
@@ -153,8 +172,9 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
     const togglePasswordVisible = () => {
         setPasswordVisible(v => !v);
     };
-    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: showInputFocusRing, onBlur: hideInputFocusRing, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, size: "base", fontWeight: "medium", style: styles.label, children: [label, required && _jsx(StyledText, { selectable: false, fontWeight: "bold", style: styles.required, children: " *" })] }) })), _jsxs(View, { style: [styles.wrapper, inputRadius, focused && getFocusRingStyle()], children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: showInputFocusRing, onBlur: hideInputFocusRing, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
                             styles.input,
+                            inputRadius,
                             // Resolved through the theme store so `setFonts` overrides apply;
                             // identical to the old hardcoded regular family by default.
                             inputFont,
@@ -181,7 +201,7 @@ function WebTextInput({ variant = "outline", size = "md", label, helperText, err
                         }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
                                     hapticLight();
                                     onChangeText?.("");
-                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "circle-alert", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [
+                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim", decorative: true }) })), showErrorIcon && (_jsx(View, { style: [styles.errorIcon, { pointerEvents: "none" }], accessibilityLabel: "Error", children: _jsx(Icon, { name: "circle-alert", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [
                     styles.helperText,
                     hasError && styles.errorText,
                 ], children: errorText || helperText }))] }));
@@ -221,6 +241,7 @@ function NativeTextInput({ variant = "outline", size = "md", label, helperText,
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const { theme, getContrastingColor } = useTheme();
+    const inputShape = useShape("input");
     const styles = themedStyles(theme)[variant][size];
     const inputFont = useFontStyle("regular");
     const [passwordVisible, setPasswordVisible] = useState(false);
@@ -241,8 +262,13 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const [handoff, setHandoff] = useState(null);
     const handoffRef = useRef(null);
     const isFocusedRef = useRef(false);
+    // Latest flavour for the focus/blur/toggle handlers and the handoff timer,
+    // synced after each commit (before any native event can be dispatched)
+    // instead of written during render.
     const activeSecureRef = useRef(effectiveSecureTextEntry);
-    activeSecureRef.current = effectiveSecureTextEntry;
+    useLayoutEffect(() => {
+        activeSecureRef.current = effectiveSecureTextEntry;
+    });
     // Taps that land while a handoff is in flight are counted and applied (by
     // parity) once it settles.
     const queuedTogglesRef = useRef(0);
@@ -250,7 +276,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // iOS-only per-flavour mount generation. Bumped whenever a flavour becomes
     // the incoming view so React mounts a FRESH native view (whose `autoFocus`
     // will run) instead of reusing one still unmounting from the previous handoff.
-    const generationRef = useRef({ secure: 0, plain: 0 });
+    // State, not a ref: it keys the rendered Host, and the bump lands in the same
+    // batch as the `passwordVisible` flip that makes that flavour incoming.
+    const [generation, setGeneration] = useState({ secure: 0, plain: 0 });
     // Last text the JS side knows about; see handleChangeText.
     const lastTextRef = useRef(value ?? defaultValue ?? "");
     // Armed when the hide toggle hands focus to the SecureField (iOS); see
@@ -263,7 +291,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     // programmatic sets); typing already updated `state` natively.
     useEffect(() => {
         if (value !== undefined && value !== state.value) {
-            state.value = value;
+            writeNativeText(state, value);
         }
         if (value !== undefined)
             lastTextRef.current = value;
@@ -348,10 +376,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         restoreAfterSecureHandoffRef.current = false;
         const outgoingSecure = activeSecureRef.current;
         if (Platform.OS === "ios") {
-            if (outgoingSecure)
-                generationRef.current.plain += 1;
-            else
-                generationRef.current.secure += 1;
+            setGeneration((current) => outgoingSecure
+                ? { ...current, plain: current.plain + 1 }
+                : { ...current, secure: current.secure + 1 });
         }
         if (Platform.OS === "ios" && isFocusedRef.current) {
             const timer = setTimeout(() => {
@@ -377,7 +404,11 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         }
         setPasswordVisible((v) => !v);
     }, [activeInput, finishHandoff, focusRegistryToken, parentOnBlur]);
-    toggleRef.current = togglePasswordVisible;
+    // `finishHandoff` replays queued taps through this ref (it is declared
+    // before the toggle it calls). Synced after commit, like `activeSecureRef`.
+    useLayoutEffect(() => {
+        toggleRef.current = togglePasswordVisible;
+    }, [togglePasswordVisible]);
     // iOS clears a secure field's existing text on the first keystroke after it
     // becomes first responder (text it did not see typed). Right after the hide
     // toggle hands focus to the SecureField that reads as "type one character,
@@ -396,7 +427,7 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         const next = wipedByKey ? previous + text : wipedByBackspace ? previous.slice(0, -1) : text;
         lastTextRef.current = next;
         if (wiped)
-            state.value = next;
+            writeNativeText(state, next);
         onChangeText?.(next);
     }, [onChangeText, state]);
     useEffect(() => {
@@ -419,13 +450,13 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
         focus: () => activeInput()?.focus(),
         blur: () => blurAll(),
         clear: () => {
-            state.value = "";
+            writeNativeText(state, "");
             lastTextRef.current = "";
         },
         isFocused: () => activeInput()?.isFocused() ?? false,
         setNativeProps: (props) => {
             if (typeof props?.text === "string") {
-                state.value = props.text;
+                writeNativeText(state, props.text);
                 lastTextRef.current = props.text;
             }
         },
@@ -452,9 +483,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
     const surfaceStyle = {
         backgroundColor,
         borderColor,
-        borderRadius: variant === "underlined" ? 0 : spacing.radiusMd,
+        borderRadius: variant === "underlined" ? 0 : inputShape?.borderRadius ?? spacing.radiusMd,
         borderWidth: variant === "outline" ? 1 : 0,
-        opacity: editable === false ? 0.6 : 1,
+        opacity: editable === false ? interaction.disabledOpacity : 1,
         overflow: "hidden",
     };
     // Native field: transparent, padding only. The visible surface is drawn by
@@ -503,9 +534,9 @@ leftElement, rightElement, clearable, focusedStyle, style, ...rest }) {
                                 : styles.nativeHostHandoff, pointerEvents: inLayout ? "auto" : "none", accessibilityElementsHidden: !inLayout, importantForAccessibility: inLayout ? "auto" : "no-hide-descendants", children: _jsx(NativeTextField, { ...rest, autoFocus: rest.autoFocus || (handoff != null && active), ref: Platform.OS === "android" ? androidRef : secure ? secureRef : plainRef, value: state, defaultValue: defaultValue, onChangeText: handleChangeText, onFocus: () => handleFocus(secure), onBlur: () => handleBlur(secure), editable: editable, multiline: multiline, rows: rows, inputMode: inputMode, secureTextEntry: secure, placeholderTextColor: theme.colors.textDim, style: boxStyle, textStyle: textStyle }) }, Platform.OS === "android"
                             ? "android"
                             : secure
-                                ? `secure-${generationRef.current.secure}`
-                                : `plain-${generationRef.current.plain}`));
-                    }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
+                                ? `secure-${generation.secure}`
+                                : `plain-${generation.plain}`));
+                    }), hasSecureToggle && (_jsx(Pressable, { style: styles.nativePasswordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { selectable: false, size: "sm", style: [styles.helperText, hasError && styles.errorText], children: errorText || helperText }))] }));
 }
 const createStyles = (theme, variant, size) => StyleSheet.create({
     nativeHost: {
@@ -530,6 +561,10 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
     },
     nativePasswordToggle: {
         paddingHorizontal: spacing.xs,
+        minWidth: spacing.minTarget,
+        minHeight: spacing.minTarget,
+        alignItems: "center",
+        justifyContent: "center",
     },
     wrapper: {
         width: "100%",
@@ -555,7 +590,7 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         borderBottomWidth: 2,
     },
     disabled: {
-        opacity: 0.6,
+        opacity: interaction.disabledOpacity,
         ...(Platform.OS === "web" && { cursor: "not-allowed" }),
     },
     error: {
@@ -597,11 +632,17 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
         transform: [{ translateY: -10 }],
         zIndex: 1,
     },
+    // The eye/clear buttons draw a 16-20px glyph; the pressable itself is at
+    // least `spacing.minTarget` square (WCAG 2.5.8 — `hitSlop` is inert on web).
     passwordToggle: {
         position: "absolute",
-        right: spacing.sm,
+        right: spacing.sm - (spacing.minTarget - 20) / 2,
         top: "50%",
-        transform: [{ translateY: Platform.OS === "web" ? -10 : -12 }],
+        minWidth: spacing.minTarget,
+        minHeight: spacing.minTarget,
+        alignItems: "center",
+        justifyContent: "center",
+        transform: [{ translateY: -spacing.minTarget / 2 }],
         zIndex: 1,
         ...(Platform.OS === "web" && { cursor: "pointer" }),
     },
@@ -614,9 +655,13 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
     },
     clearButton: {
         position: "absolute",
-        right: spacing.sm,
+        right: spacing.sm - (spacing.minTarget - 20) / 2,
         top: "50%",
-        transform: [{ translateY: Platform.OS === "web" ? -10 : -12 }],
+        minWidth: spacing.minTarget,
+        minHeight: spacing.minTarget,
+        alignItems: "center",
+        justifyContent: "center",
+        transform: [{ translateY: -spacing.minTarget / 2 }],
         zIndex: 1,
         ...(Platform.OS === "web" && { cursor: "pointer" }),
     },
@@ -633,7 +678,7 @@ const createStyles = (theme, variant, size) => StyleSheet.create({
 });
 const VARIANT_KEYS = ["outline", "filled", "underlined"];
 const SIZE_KEYS = ["sm", "md", "lg"];
-const themedStyles = createThemedStyles((theme) => Object.fromEntries(VARIANT_KEYS.map((variant) => [
+const themedStyles = /*#__PURE__*/ createThemedStyles((theme) => Object.fromEntries(VARIANT_KEYS.map((variant) => [
     variant,
     Object.fromEntries(SIZE_KEYS.map((size) => [size, createStyles(theme, variant, size)])),
 ])));

package/dist/components/ThemeSelector.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type ThemePreference } from "../state/themeStore.js";
+/**
+ * ThemeSelector — a compact System / Light / Dark switch wired to the kit's
+ * theme store.
+ *
+ * Icon-only by default (about 116pt wide), sized to sit in an `Item` row's
+ * `ItemActions` so the whole appearance setting is one row instead of three.
+ * Pass `showLabels` for a full-width control with text under a group title.
+ *
+ * Reads and writes `useThemeStore` unless `value` / `onValueChange` are
+ * passed. The package has no i18n: pass translated `labels`, which become the
+ * visible text (with `showLabels`) and each segment's accessibility label.
+ *
+ * Drawn in RN on every platform (no native segmented control), so the icons
+ * render on iOS and Android too and the server render matches the client: the
+ * store boots `system` on both sides until the persisted preference loads.
+ *
+ * @example
+ * ```tsx
+ * <Item>
+ *   <ItemContent>
+ *     <ItemTitle>Theme</ItemTitle>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <ThemeSelector />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export type ThemeSelectorLabels = Record<ThemePreference, string>;
+export interface ThemeSelectorProps {
+    /** Controlled preference. Defaults to the theme store's `userTheme`. */
+    value?: ThemePreference;
+    /** Called with the chosen preference. Defaults to the theme store's `setTheme`. */
+    onValueChange?: (value: ThemePreference) => void;
+    /** Segment labels, for screen readers and `showLabels`. @default English */
+    labels?: Partial<ThemeSelectorLabels>;
+    /** Show the label beside each icon and stretch to the parent's width. @default false */
+    showLabels?: boolean;
+    /** Disable interaction. @default false */
+    disabled?: boolean;
+    /** Names the group for screen readers. Inside an `Item`, defaults to the row title. */
+    accessibilityLabel?: string;
+    /** Style override for the track. */
+    style?: StyleProp<ViewStyle>;
+    /** Test id for the track; segments get `${testID}-${value}`. @default "theme-selector" */
+    testID?: string;
+}
+declare function ThemeSelector({ value, onValueChange, labels, showLabels, disabled, accessibilityLabel, style, testID, }: ThemeSelectorProps): React.JSX.Element;
+export { ThemeSelector };

package/dist/components/ThemeSelector.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
+import { useThemeStore } from "../state/themeStore.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
+import { Icon } from "./Icon.js";
+import { StyledText } from "./StyledText.js";
+import { useItemControlLabel } from "./Item.js";
+const DEFAULT_LABELS = { system: "System", light: "Light", dark: "Dark" };
+const OPTIONS = [
+    // A phone reads as "device" on native; web visitors are mostly on a desktop.
+    { value: "system", icon: Platform.OS === "web" ? "monitor" : "smartphone" },
+    { value: "light", icon: "sun" },
+    { value: "dark", icon: "moon" },
+];
+const TRACK_HEIGHT = 32;
+const TRACK_INSET = 2;
+const ICON_SEGMENT_WIDTH = 36;
+function ThemeSelector({ value, onValueChange, labels, showLabels = false, disabled = false, accessibilityLabel, style, testID = "theme-selector", }) {
+    const rowLabel = useItemControlLabel({ accessibilityLabel });
+    const { theme } = useTheme();
+    const userTheme = useThemeStore((state) => state.userTheme);
+    const setTheme = useThemeStore((state) => state.setTheme);
+    const selected = value ?? userTheme;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const select = (next) => {
+        if (next === selected)
+            return;
+        hapticSelection();
+        (onValueChange ?? setTheme)(next);
+    };
+    return (_jsx(View, { testID: testID, accessibilityRole: "radiogroup", accessibilityLabel: accessibilityLabel, ...rowLabel, accessibilityState: { disabled }, style: [
+            styles.track,
+            { backgroundColor: theme.colors.muted, opacity: disabled ? interaction.disabledOpacity : 1 },
+            showLabels ? styles.trackStretch : styles.trackCompact,
+            style,
+        ], children: OPTIONS.map((option) => (_jsx(Segment, { testID: `${testID}-${option.value}`, icon: option.icon, label: text[option.value], showLabel: showLabels, selected: option.value === selected, disabled: disabled, onPress: () => select(option.value) }, option.value))) }));
+}
+function Segment({ testID, icon, label, showLabel, selected, disabled, onPress }) {
+    const { theme, getFocusRingStyle } = useTheme();
+    const focus = useFocusVisible();
+    const color = selected ? theme.colors.foreground : theme.colors.mutedForeground;
+    return (_jsxs(Pressable, { testID: testID, accessibilityRole: "radio", accessibilityLabel: label, accessibilityState: { checked: selected, disabled }, disabled: disabled, onPress: onPress, onFocus: focus.onFocus, onBlur: focus.onBlur, 
+        // The track is 32pt; reach the 44pt touch target vertically.
+        hitSlop: { top: 6, bottom: 6 }, style: ({ pressed }) => [
+            styles.segment,
+            showLabel ? styles.segmentStretch : styles.segmentCompact,
+            selected && { backgroundColor: theme.colors.background, borderColor: theme.colors.border },
+            pressed && !selected && { opacity: interaction.pressedOpacity },
+            Platform.OS === "web" && {
+                cursor: (disabled ? "not-allowed" : "pointer"),
+                outlineStyle: "none",
+            },
+            focus.focused && !disabled && getFocusRingStyle(),
+        ], children: [_jsx(Icon, { name: icon, size: 16, color: color, decorative: true }), showLabel && (_jsx(StyledText, { selectable: false, numberOfLines: 1, fontWeight: "medium", style: { fontSize: 13, lineHeight: 18, color }, children: label }))] }));
+}
+const styles = /*#__PURE__*/ StyleSheet.create({
+    track: {
+        flexDirection: "row",
+        height: TRACK_HEIGHT,
+        padding: TRACK_INSET,
+        borderRadius: spacing.radiusMd,
+    },
+    trackCompact: {
+        alignSelf: "flex-start",
+    },
+    trackStretch: {
+        alignSelf: "stretch",
+    },
+    segment: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.xs,
+        borderRadius: spacing.radiusSm,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: "transparent",
+    },
+    segmentCompact: {
+        width: ICON_SEGMENT_WIDTH,
+    },
+    segmentStretch: {
+        flex: 1,
+        paddingHorizontal: spacing.sm,
+    },
+});
+export { ThemeSelector };

package/dist/components/Toggle.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import * as TogglePrimitive from "@rn-primitives/toggle";
 import { ViewStyle, StyleProp } from "react-native";
-import type { IconName } from "./Icon";
+import type { IconProps } from "./Icon.js";
 export type ToggleVariant = "default" | "outline";
 export type ToggleSize = "sm" | "default" | "lg";
 export type ToggleShape = "default" | "square" | "circle";
@@ -44,51 +44,12 @@ interface ToggleProps extends Omit<TogglePrimitive.RootProps, "style"> {
      */
     style?: StyleProp<ViewStyle>;
 }
-/**
- * Enhanced Toggle Component
- *
- * Features:
- * - 2 variants (default, outline)
- * - 3 sizes (sm, default, lg)
- * - 3 shapes (default, square, circle)
- * - Loading state with spinner
- * - Icon-only optimization
- * - Style prop support
- * - Full accessibility
- *
- * Usage:
- * ```tsx
- * // Basic
- * const [pressed, setPressed] = useState(false);
- * <Toggle pressed={pressed} onPressedChange={setPressed}>
- *   <SansSerifText>Toggle Me</SansSerifText>
- * </Toggle>
- *
- * // With icon
- * <Toggle pressed={pressed} onPressedChange={setPressed} iconOnly>
- *   <ToggleIcon name="bold" />
- * </Toggle>
- *
- * // Different shapes
- * <Toggle shape="square" pressed={pressed} onPressedChange={setPressed}>
- *   <SansSerifText>Square</SansSerifText>
- * </Toggle>
- *
- * <Toggle shape="circle" iconOnly pressed={pressed} onPressedChange={setPressed}>
- *   <ToggleIcon name="bold" />
- * </Toggle>
- *
- * // Loading state
- * <Toggle loading pressed={pressed} onPressedChange={setPressed}>
- *   <SansSerifText>Loading...</SansSerifText>
- * </Toggle>
- * ```
- */
-declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, ...props }: ToggleProps): React.JSX.Element;
+declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleOverride, onPressedChange, ...props }: ToggleProps): React.JSX.Element;
 /**
  * ToggleIcon Component
  * Icon wrapper for use inside Toggle buttons
- * Automatically inherits sizing from parent Toggle
+ * Takes `Icon`'s props; the color defaults to the Toggle's text color, and the
+ * icon is decorative (the control's label names it).
  *
  * Usage:
  * ```tsx
@@ -97,11 +58,6 @@ declare function Toggle({ variant, size, shape, loading, iconOnly, style: styleO
  * </Toggle>
  * ```
  */
-interface ToggleIconProps {
-    name: IconName;
-    size?: number;
-    color?: string;
-}
-declare function ToggleIcon({ name, size, color }: ToggleIconProps): React.JSX.Element;
+declare function ToggleIcon(props: IconProps): React.JSX.Element;
 export { Toggle, ToggleIcon };
 export type { ToggleProps };

package/dist/components/Toggle.js

@@ -1,10 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { Icon } from "./Icon.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
+import { getWebHitInsets, WebHitTarget } from "../lib/webHitTarget.js";
+import { interaction } from "../constants/interaction.js";
+import { hapticSelection } from "../lib/haptics.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useItemControlLabel } from "./Item.js";
 import * as TogglePrimitive from "@rn-primitives/toggle";
 import { Platform, StyleSheet, ActivityIndicator, Animated } from "react-native";
 import { palette } from "../constants/colors.js";
@@ -73,11 +78,12 @@ const TOGGLE_SIZES = {
  * </Toggle>
  * ```
  */
-function Toggle({ variant = "default", size = "default", shape = "default", loading = false, iconOnly = false, style: styleOverride, ...props }) {
+// Dev-only, once per session: the same unnamed toggle re-renders constantly.
+let warnedIconOnly = false;
+function Toggle({ variant = "default", size = "default", shape = "default", loading = false, iconOnly = false, style: styleOverride, onPressedChange, ...props }) {
     const { theme, getContrastingColor, getFocusRingStyle, withAlpha } = useTheme();
     const sizeConfig = TOGGLE_SIZES[size];
     const focusRingStyle = getFocusRingStyle();
-    const [focused, setFocused] = useState(false);
     // Calculate text color based on state and variant
     const getTextColor = () => {
         if (props.pressed) {
@@ -106,28 +112,33 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
     const children = props.children;
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!isDisabled,
-        scaleTo: 0.92,
+        scaleTo: interaction.controlPressedScale,
         haptic: false,
     });
-    const showFocusRing = (event) => {
-        let ringVisible = true;
-        if (Platform.OS === "web") {
-            const target = event?.nativeEvent?.target;
-            if (target && typeof target.matches === "function") {
-                try {
-                    ringVisible = target.matches(":focus-visible");
-                }
-                catch {
-                    ringVisible = true;
-                }
-            }
-        }
-        setFocused(ringVisible);
-    };
-    const hideFocusRing = () => {
-        setFocused(false);
+    // A toggle is a selection control: its state change is the haptic moment,
+    // not the press, so it follows the `"selection"` setting like Switch does.
+    const handlePressedChange = (next) => {
+        hapticSelection();
+        onPressedChange?.(next);
     };
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(TogglePrimitive.Root, { ...props, disabled: isDisabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible();
+    const rowLabel = useItemControlLabel(props);
+    if (process.env.NODE_ENV !== "production" &&
+        iconOnly &&
+        !warnedIconOnly &&
+        props.accessibilityLabel === undefined &&
+        props["aria-label"] === undefined &&
+        props["aria-labelledby"] === undefined &&
+        rowLabel.accessibilityLabel === undefined &&
+        rowLabel["aria-labelledby"] === undefined) {
+        warnedIconOnly = true;
+        console.warn("Toggle: an icon-only toggle (`iconOnly`) has no accessible name. Pass `accessibilityLabel` " +
+            "(what the toggle turns on, e.g. \"Bold\") so screen readers announce more than \"button\".");
+    }
+    // Web pointer target: 44pt tall through a transparent child inside the drawn
+    // box (react-native-web ignores `hitSlop`); native keeps DEFAULT_HIT_SLOP.
+    const hitTarget = (_jsx(WebHitTarget, { insets: Platform.OS === "web" ? getWebHitInsets(undefined, sizeConfig.height) : null, border: styles.root.borderWidth }));
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(TogglePrimitive.Root, { ...rowLabel, ...props, disabled: isDisabled, onPressedChange: handlePressedChange, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
                         ...styles.root,
                         height: sizeConfig.height,
                         minWidth: sizeConfig.minWidth,
@@ -152,7 +163,7 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                             borderColor: theme.colors.primary,
                         }),
                         // Disabled state
-                        opacity: isDisabled ? 0.5 : 1,
+                        opacity: isDisabled ? interaction.disabledOpacity : 1,
                         // Web-specific styles
                         ...(Platform.OS === "web" && {
                             cursor: isDisabled ? "not-allowed" : "pointer",
@@ -166,13 +177,26 @@ function Toggle({ variant = "default", size = "default", shape = "default", load
                         selected: props.pressed,
                         disabled: !!isDisabled,
                         busy: loading,
-                    }, children: loading ? (_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })) : typeof children === "function" ? ((state) => (_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }))) : (_jsx(TextSelectabilityContext.Provider, { value: false, children: children })) }) }) }) }));
+                    }, children: loading ? (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) }), hitTarget] })) : typeof children === "function" ? ((state) => (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children(state) }), hitTarget] }))) : (_jsxs(_Fragment, { children: [_jsx(TextSelectabilityContext.Provider, { value: false, children: children }), hitTarget] })) }) }) }) }));
 }
-function ToggleIcon({ name, size, color }) {
+/**
+ * ToggleIcon Component
+ * Icon wrapper for use inside Toggle buttons
+ * Takes `Icon`'s props; the color defaults to the Toggle's text color, and the
+ * icon is decorative (the control's label names it).
+ *
+ * Usage:
+ * ```tsx
+ * <Toggle pressed={pressed} onPressedChange={setPressed}>
+ *   <ToggleIcon name="bold" />
+ * </Toggle>
+ * ```
+ */
+function ToggleIcon(props) {
     const contextColor = React.use(TextColorContext);
-    return _jsx(Icon, { name: name, size: size || spacing.iconMd, color: color || contextColor });
+    return _jsx(Icon, { decorative: true, color: contextColor, ...props });
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
     root: {
         flexDirection: "row",
         alignItems: "center",

package/dist/components/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "./Icon";
+import type { IconProps } from "./Icon.js";
 import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
 import * as React from "react";
 type ToggleGroupVariant = "default" | "outline";
@@ -62,7 +62,8 @@ declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: Toggle
 /**
  * ToggleGroupIcon Component
  * Icon wrapper for use inside ToggleGroup items
- * Automatically inherits sizing from parent ToggleGroup
+ * Takes `Icon`'s props; the color defaults to the ToggleGroup's text color, and the
+ * icon is decorative (the control's label names it).
  *
  * Usage:
  * ```tsx
@@ -71,11 +72,6 @@ declare function ToggleGroupItem({ isFirst, isLast, children, ...props }: Toggle
  * </ToggleGroupItem>
  * ```
  */
-interface ToggleGroupIconProps {
-    name: IconName;
-    size?: number;
-    color?: string;
-}
-declare function ToggleGroupIcon({ name, size, color }: ToggleGroupIconProps): React.JSX.Element;
+declare function ToggleGroupIcon(props: IconProps): React.JSX.Element;
 export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
 export type { ToggleGroupProps, ToggleGroupSize, ToggleGroupVariant };