@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/Popover.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { resolvePopoverPlacement } from "../lib/popoverPlacement.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";
 import * as React from "react";
-import { Animated, Platform, StyleSheet, View } from "react-native";
+import { Animated, Dimensions, Platform, ScrollView, StyleSheet, View, } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { palette } from "../constants/colors.js";
+// The overlay layer covers the screen but must not swallow touches around the
+// content; a style, not the deprecated `pointerEvents` prop (web warns and
+// lazily loads its warning module mid-render).
+const styles = /*#__PURE__*/ StyleSheet.create({
+    passThrough: { pointerEvents: "box-none" },
+});
 function PopoverTrigger({ disabled, ...props }) {
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
@@ -22,15 +30,69 @@ function PopoverTrigger({ disabled, ...props }) {
  * On Android/Web, uses Fragment to avoid unnecessary nesting
  */
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+/**
+ * Radix measures the viewport room on web and exposes it on the content
+ * element; the primitive's web Content applies no size cap of its own.
+ */
+const WEB_PLACEMENT_STYLE = {
+    maxWidth: "var(--radix-popover-content-available-width)",
+    maxHeight: "var(--radix-popover-content-available-height)",
+};
+const claimNoTouch = () => false;
 /**
  * Popover Content Component
- * The content that appears in the popover overlay
- * Supports smart positioning, animations, and theme integration
+ * The content that appears in the popover overlay. `side` is a preference: on
+ * native the popover opens on the other side when the content does not fit
+ * and there is more room there, caps its height to the room, and scrolls.
+ * A `style` merges over the themed surface; `insets` default to the safe area.
  */
-function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ...props }) {
-    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+function PopoverContent({ portalHost, insets, ...props }) {
+    const { theme, getContrastingColor } = useTheme();
+    const safeAreaInsets = useSafeAreaInsets();
     // Calculate text color for popover content based on background
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
+    const card = (_jsx(AnimatedView, { type: "fade", enterDuration: 200, style: [StyleSheet.absoluteFill, styles.passThrough], collapsable: false, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverCard, { insets: insets ?? safeAreaInsets, ...props }) }) }) }));
+    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: Platform.OS === "web" ? (_jsx(PopoverPrimitive.Overlay, { children: card })) : (_jsxs(_Fragment, { children: [_jsx(PopoverPrimitive.Overlay, { style: StyleSheet.absoluteFill }), card] })) }) }));
+}
+/**
+ * The positioned card. Rendered inside the portal, so it mounts on open and
+ * its measurements start fresh every time.
+ */
+function PopoverCard({ side, align = "center", sideOffset = 4, insets, avoidCollisions = true, scrollable = true, style, children, testID, ...props }) {
+    const { theme, getShadowStyle } = useTheme();
+    const { triggerPosition, contentLayout } = PopoverPrimitive.useRootContext();
+    const [scrollFrameHeight, setScrollFrameHeight] = React.useState();
+    const [scrollContentHeight, setScrollContentHeight] = React.useState();
+    const isWeb = Platform.OS === "web";
+    const wrapsInScroll = scrollable && !props.asChild;
+    // The card's own chrome (padding, border) plus the uncapped scroll content.
+    const naturalHeight = wrapsInScroll &&
+        contentLayout &&
+        scrollFrameHeight !== undefined &&
+        scrollContentHeight !== undefined
+        ? contentLayout.height - scrollFrameHeight + scrollContentHeight
+        : undefined;
+    let placementSide = side;
+    let placementStyle = WEB_PLACEMENT_STYLE;
+    if (!isWeb) {
+        const placement = resolvePopoverPlacement({
+            side,
+            sideOffset,
+            trigger: triggerPosition ?? null,
+            screenHeight: Dimensions.get("screen").height,
+            insets: insets ?? {},
+            naturalHeight,
+            avoidCollisions,
+        });
+        placementSide = placement.side;
+        // Hide the first measured frame while it may still flip. The key is
+        // omitted otherwise, so the primitive's hidden-until-measured style holds.
+        const mayStillFlip = wrapsInScroll && avoidCollisions && !!triggerPosition && naturalHeight === undefined;
+        placementStyle = {
+            ...(placement.maxHeight !== undefined ? { maxHeight: placement.maxHeight } : null),
+            ...(mayStillFlip ? { opacity: 0 } : null),
+        };
+    }
     const contentStyle = StyleSheet.flatten([
         {
             backgroundColor: theme.colors.popover,
@@ -40,8 +102,10 @@ function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ..
             padding: spacing.xs,
             ...getShadowStyle("soft"),
         },
+        placementStyle,
+        style,
     ]) ?? undefined;
-    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(PopoverPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+    return (_jsx(PopoverPrimitive.Content, { side: placementSide, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: avoidCollisions, testID: testID, ...(isWeb ? null : { onStartShouldSetResponder: claimNoTouch }), ...props, style: contentStyle, children: wrapsInScroll ? (_jsx(ScrollView, { testID: testID ? `${testID}-scroll` : undefined, alwaysBounceVertical: false, keyboardShouldPersistTaps: "handled", onLayout: (event) => setScrollFrameHeight(event.nativeEvent.layout.height), onContentSizeChange: (_width, height) => setScrollContentHeight(height), children: children })) : (children) }));
 }
 function PopoverHeader({ children, style, ...props }) {
     const { theme } = useTheme();

package/dist/components/Progress.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -55,12 +57,12 @@ function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion,
     // Animate scaleX (GPU compositor) instead of width (JS-thread layout each
     // frame). transformOrigin "left" grows the fill from the left edge, so a
     // full-width bar scaled by clamped/100 needs no container measurement.
-    const scaleX = useRef(new Animated.Value(0)).current;
+    const scaleX = useAnimatedValue(0);
     useEffect(() => {
         Animated.timing(scaleX, {
             toValue: clamped / 100,
             duration: reduceMotion ? 0 : 300,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [clamped, reduceMotion, scaleX]);
     return (_jsx(Animated.View, { style: [
@@ -75,7 +77,7 @@ function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion,
         ] }));
 }
 function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
-    const opacity = useRef(new Animated.Value(reduceMotion ? 0.7 : 0.4)).current;
+    const opacity = useAnimatedValue(reduceMotion ? 0.7 : 0.4);
     useEffect(() => {
         if (reduceMotion) {
             opacity.setValue(0.7);
@@ -86,12 +88,12 @@ function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
             Animated.timing(opacity, {
                 toValue: 0.4,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
         ]));
         animation.start();

package/dist/components/RadioGroup.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useEffect, useRef, useState } from "react";
+import React, { createContext, use, useEffect } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { hapticLight } from "../lib/haptics.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -60,38 +64,20 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
     const { size, error, value: groupValue, onValueChange } = useRadioGroupContext();
     const sizeConfig = SIZE_CONFIGS[size];
     const focusRingStyle = getFocusRingStyle();
-    const [focused, setFocused] = useState(false);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.92,
         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);
-    };
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible();
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
-    const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
+    const dotScale = useAnimatedValue(isChecked ? 1 : 0);
     useEffect(() => {
         Animated.timing(dotScale, {
             toValue: isChecked ? 1 : 0,
             duration: reduceMotion ? 0 : 60,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [isChecked, reduceMotion, dotScale]);
     // Border color follows Checkbox pattern
@@ -101,48 +87,65 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
-                ...styles.radio,
-                borderColor,
-                backgroundColor: theme.colors.background,
-                borderRadius: sizeConfig.outer / 2,
-                borderWidth: sizeConfig.borderWidth,
-                width: sizeConfig.outer,
-                height: sizeConfig.outer,
-                opacity: disabled ? 0.5 : 1,
+    // The primitive Item is the ONE control; the drawn circle is a child so the
+    // control can be bigger than it looks. `hitSlop` is inert on web, where a
+    // 16/20px circle sits under the 24px WCAG 2.5.8 minimum: the control grows
+    // to `spacing.minTarget` and takes the extra back in negative margins.
+    const hitSize = Platform.OS === "web" ? Math.max(sizeConfig.outer, spacing.minTarget) : sizeConfig.outer;
+    const hitOverflow = (hitSize - sizeConfig.outer) / 2;
+    // The label text names the control on every platform; no `useId` link (ids
+    // do not survive Expo Router's streamed hydration — see hooks/useHydrated).
+    const labelLink = label !== undefined ? { accessibilityLabel: label } : undefined;
+    const radioElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(RadioGroupPrimitive.Item, { ...labelLink, ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+                ...styles.control,
+                minWidth: hitSize,
+                minHeight: hitSize,
+                ...(hitOverflow > 0 && { margin: -hitOverflow }),
                 ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
-                ...(focused && !disabled ? focusRingStyle : null),
-                ...(flattenedStyle || {}),
-            }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
-                    { transform: [{ scale: dotScale }] },
-                    {
-                        width: sizeConfig.inner,
-                        height: sizeConfig.inner,
-                        borderRadius: sizeConfig.inner / 2,
-                        backgroundColor: theme.colors.primary,
-                    },
-                ] }) }) }));
+            }, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(View, { style: {
+                    ...styles.radio,
+                    borderColor,
+                    backgroundColor: theme.colors.background,
+                    borderRadius: sizeConfig.outer / 2,
+                    borderWidth: sizeConfig.borderWidth,
+                    width: sizeConfig.outer,
+                    height: sizeConfig.outer,
+                    opacity: disabled ? 0.5 : 1,
+                    ...(focused && !disabled ? focusRingStyle : null),
+                    ...(flattenedStyle || {}),
+                }, children: _jsx(Animated.View, { style: [
+                        { transform: [{ scale: dotScale }] },
+                        {
+                            width: sizeConfig.inner,
+                            height: sizeConfig.inner,
+                            borderRadius: sizeConfig.inner / 2,
+                            backgroundColor: theme.colors.primary,
+                        },
+                    ] }) }) }) }));
     // If no label, return just the radio button
     if (!label) {
         return radioElement;
     }
-    // With label, wrap in a pressable row — tapping the label selects the item
+    // With a label, a non-accessible wrapper extends the tap area to the text;
+    // the primitive Item above stays the only radio a screen reader meets, and
+    // it carries the label text as its name.
     return (_jsxs(Pressable, { onPress: () => {
             if (!disabled) {
                 hapticLight();
                 onValueChange(itemValue);
             }
-        }, style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "radio", accessibilityState: {
-            checked: isChecked,
-            disabled: !!disabled,
-        }, accessibilityLabel: label, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
+        }, style: [styles.container, labelStyle], disabled: disabled, accessible: false, focusable: false, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
                         styles.label,
                         { color: theme.colors.text },
                         disabled && styles.disabledLabel,
                         error && { color: theme.colors.destructive },
                     ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
+    control: {
+        justifyContent: "center",
+        alignItems: "center",
+    },
     radio: {
         justifyContent: "center",
         alignItems: "center",
@@ -160,7 +163,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
     },
     disabledLabel: {
-        opacity: 0.5,
+        opacity: interaction.disabledOpacity,
     },
     required: {
         fontWeight: "bold",

package/dist/components/Screen.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { type ScrollViewProps, type StyleProp, type ViewStyle } from "react-native";
+export type ScreenEdge = "top" | "bottom" | "left" | "right";
+export type ScreenEdges = ReadonlyArray<ScreenEdge>;
+export interface ScreenProps {
+    /**
+     * Which safe-area edges this screen owns. Required, with no default, so a
+     * screen never pads an edge a navigator already insets: under a Stack header
+     * pass `["bottom"]`; above a tab bar `["top"]`; inside a modal or form sheet
+     * `["bottom"]`; a headerless full screen `["top", "bottom"]`; `[]` when the
+     * navigator owns both.
+     */
+    edges: ScreenEdges;
+    /**
+     * `true` renders a `ScrollView` and puts the inset padding on its content
+     * container, so content starts clear of the island / home indicator but
+     * scrolls under them. `false` (default) renders a `View` padded on itself.
+     */
+    scroll?: boolean;
+    /** Extra `ScrollView` props when `scroll` is set (`refreshControl`, `keyboardShouldPersistTaps`, …). */
+    scrollProps?: Omit<ScrollViewProps, "style" | "contentContainerStyle" | "children">;
+    /**
+     * The screen's one horizontal inset, `spacing.screenPadding` (16), plus the
+     * left/right safe-area insets when those edges are named. `false` for
+     * full-bleed content such as `ItemGroup` rows, which carry their own 16.
+     * @default true
+     */
+    padded?: boolean;
+    /** Style of the outer View / ScrollView (defaults to `flex: 1` on the theme background). */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Content padding and layout. Its `padding*` values are added to the safe-area
+     * insets (`paddingBottom: 48` on a 34 pt home indicator gives 82), never
+     * replaced by them. On the `View` variant it merges into `style`.
+     */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    testID?: string;
+}
+/**
+ * Screen
+ *
+ * The page container: safe-area insets on the edges the screen owns, the one
+ * 16 pt horizontal inset, and the theme background under all of it. Insets
+ * come from `useWindowInsets`, so a screen inside a modal or a native sheet
+ * still clears the home indicator.
+ *
+ * @example
+ * ```tsx
+ * // Under a Stack header, above no tab bar
+ * <Screen edges={["bottom"]} scroll contentContainerStyle={{ paddingBottom: spacing.xxl }}>
+ *   …
+ * </Screen>
+ *
+ * // Headerless, full-bleed rows
+ * <Screen edges={["top", "bottom"]} padded={false}>
+ *   <ItemGroup title="Account">…</ItemGroup>
+ * </Screen>
+ * ```
+ */
+export declare function Screen({ edges, scroll, scrollProps, padded, style, contentContainerStyle, children, testID, }: ScreenProps): React.JSX.Element;

package/dist/components/Screen.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, View, } from "react-native";
+import { useTheme } from "../hooks/useTheme.js";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
+import { spacing } from "../constants/spacing.js";
+/** The caller's padding on one edge, honouring the `padding` / `paddingVertical` / `paddingHorizontal` shorthands. */
+function ownPadding(style, key) {
+    if (!style)
+        return 0;
+    const axis = key === "paddingTop" || key === "paddingBottom" ? style.paddingVertical : style.paddingHorizontal;
+    const value = style[key] ?? axis ?? style.padding;
+    return typeof value === "number" ? value : 0;
+}
+/**
+ * Screen
+ *
+ * The page container: safe-area insets on the edges the screen owns, the one
+ * 16 pt horizontal inset, and the theme background under all of it. Insets
+ * come from `useWindowInsets`, so a screen inside a modal or a native sheet
+ * still clears the home indicator.
+ *
+ * @example
+ * ```tsx
+ * // Under a Stack header, above no tab bar
+ * <Screen edges={["bottom"]} scroll contentContainerStyle={{ paddingBottom: spacing.xxl }}>
+ *   …
+ * </Screen>
+ *
+ * // Headerless, full-bleed rows
+ * <Screen edges={["top", "bottom"]} padded={false}>
+ *   <ItemGroup title="Account">…</ItemGroup>
+ * </Screen>
+ * ```
+ */
+export function Screen({ edges, scroll = false, scrollProps, padded = true, style, contentContainerStyle, children, testID, }) {
+    const { theme } = useTheme();
+    const insets = useWindowInsets();
+    const has = (edge) => edges.includes(edge);
+    const own = StyleSheet.flatten(contentContainerStyle);
+    const horizontal = padded ? spacing.screenPadding : 0;
+    // Every edge the caller pads or the screen owns gets one resolved value:
+    // the caller's spacing plus the inset. Edges neither side touches stay
+    // unset so a caller style can still use shorthands for them.
+    const padding = {};
+    const top = ownPadding(own, "paddingTop") + (has("top") ? insets.top : 0);
+    const bottom = ownPadding(own, "paddingBottom") + (has("bottom") ? insets.bottom : 0);
+    const left = ownPadding(own, "paddingLeft") + horizontal + (has("left") ? insets.left : 0);
+    const right = ownPadding(own, "paddingRight") + horizontal + (has("right") ? insets.right : 0);
+    if (has("top") || own?.paddingTop !== undefined || own?.paddingVertical !== undefined || own?.padding !== undefined)
+        padding.paddingTop = top;
+    if (has("bottom") || own?.paddingBottom !== undefined || own?.paddingVertical !== undefined || own?.padding !== undefined)
+        padding.paddingBottom = bottom;
+    if (left)
+        padding.paddingLeft = left;
+    if (right)
+        padding.paddingRight = right;
+    const base = { flex: 1, backgroundColor: theme.colors.background };
+    if (scroll) {
+        return (_jsx(ScrollView, { style: [base, style], contentContainerStyle: [own, padding], testID: testID, ...scrollProps, children: children }));
+    }
+    return (_jsx(View, { style: [base, own, padding, style], testID: testID, children: children }));
+}

package/dist/components/SectionHeader.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
-import { type TextProps } from "./StyledText";
+import { type TextProps } from "./StyledText.js";
 type TextPassthroughProps = Omit<TextProps, "style" | "children"> & {
     style?: StyleProp<TextStyle>;
 };

package/dist/components/SegmentedControl.d.ts

@@ -7,18 +7,26 @@ import { type StyleProp, type ViewStyle } from "react-native";
  *
  *   - iOS:     SwiftUI segmented `Picker` (system-styled).
  *   - Android: a Material segmented control, accent-tinted via `tintColor`.
- *   - Web:     the vendored `@react-native-segmented-control/segmented-control`
- *              JS implementation, accent-tinted via `tintColor`.
+ *   - Web:     the kit's own themed control (see `WebSegmentedControl`).
  *
  * The API is value-based to match the rest of the design system (RadioGroup /
  * Tabs / Select): pass the segment `values` plus a controlled `value` (or
  * `defaultValue` for uncontrolled), and read selections back as the chosen
- * string. A light haptic fires on each change, matching Slider / Switch.
+ * string. A selection haptic fires on each change, matching Switch / Checkbox
+ * (see `hapticSelection`).
  *
  * Theming: the accent color tints the selected segment on Android and web. iOS
  * draws the system segmented control, which ignores a custom tint — pass
  * `appearance` to force light/dark there.
  *
+ * Web: `@expo/ui`'s vendored web control paints every label white once a
+ * `tintColor` is passed, so unselected labels vanished on the light track and
+ * the disabled state was unreadable; it also exposes no label styling. The
+ * kit draws the control itself on web from theme tokens (`muted` track,
+ * accent pill, `accentForeground` / `mutedForeground` labels, the shared
+ * disabled opacity and focus ring). `appearance` is ignored there; the theme
+ * decides.
+ *
  * @example
  * ```tsx
  * <SegmentedControl
@@ -44,7 +52,7 @@ export interface SegmentedControlProps {
      * Applied on Android and web; iOS uses the system style.
      */
     tintColor?: string;
-    /** Force a color scheme irrespective of the system theme. */
+    /** Force a color scheme irrespective of the system theme (iOS/Android; web follows the theme). */
     appearance?: "light" | "dark";
     /** Style override for the control. */
     style?: StyleProp<ViewStyle>;

package/dist/components/SegmentedControl.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, Easing, Platform, Pressable, View, } from "react-native";
 import { SegmentedControl as NativeSegmentedControl } from "@expo/ui/community/segmented-control";
 import { useTheme } from "../hooks/useTheme.js";
-import { hapticLight } from "../lib/haptics.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+import { StyledText } from "./StyledText.js";
 function SegmentedControl({ values, value: controlledValue, defaultValue, onValueChange, disabled = false, tintColor, appearance, style, }) {
     const { theme } = useTheme();
     const [internalValue, setInternalValue] = React.useState(defaultValue);
@@ -14,12 +22,94 @@ function SegmentedControl({ values, value: controlledValue, defaultValue, onValu
         const nextIndex = values.indexOf(next);
         if (nextIndex !== lastIndex.current) {
             lastIndex.current = nextIndex;
-            hapticLight();
+            hapticSelection();
         }
         if (!isControlled)
             setInternalValue(next);
         onValueChange?.(next);
     }, [isControlled, onValueChange, values]);
+    if (Platform.OS === "web") {
+        return (_jsx(WebSegmentedControl, { values: values, selectedIndex: selectedIndex, disabled: disabled, tintColor: tintColor, onSelect: handleValueChange, style: style }));
+    }
     return (_jsx(NativeSegmentedControl, { values: values, selectedIndex: selectedIndex, enabled: !disabled, onValueChange: handleValueChange, tintColor: tintColor ?? theme.colors.accent, appearance: appearance ?? (theme.dark ? "dark" : "light"), style: style }));
 }
+// ---------------------------------------------------------------------------
+// Web
+// ---------------------------------------------------------------------------
+/** Matches the Button `md` / vendored control height. */
+const TRACK_HEIGHT = 32;
+/** Gap between the track edge and the selected pill. */
+const PILL_INSET = 2;
+function WebSegmentedControl({ values, selectedIndex, disabled, tintColor, onSelect, style }) {
+    const { theme, getContrastingColor } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const [trackWidth, setTrackWidth] = useState(0);
+    const position = useAnimatedValue(selectedIndex);
+    useEffect(() => {
+        const slide = Animated.timing(position, {
+            toValue: selectedIndex,
+            duration: reduceMotion ? 0 : 200,
+            easing: Easing.out(Easing.quad),
+            useNativeDriver: shouldUseNativeDriver,
+        });
+        slide.start();
+        // Stop on unmount (and before the next selection starts its own slide) so
+        // no animation frame outlives the control.
+        return () => slide.stop();
+    }, [position, reduceMotion, selectedIndex]);
+    const onLayout = (event) => setTrackWidth(event.nativeEvent.layout.width);
+    const count = Math.max(1, values.length);
+    const segmentWidth = Math.max(0, trackWidth - PILL_INSET * 2) / count;
+    const travel = Math.max(1, count - 1);
+    const pillColor = tintColor ?? theme.colors.accent;
+    // A custom tint may not pair with `accentForeground`; pick the readable one.
+    const selectedLabelColor = tintColor ? getContrastingColor(tintColor) : theme.colors.accentForeground;
+    return (_jsxs(View, { testID: "segmented-control", accessibilityState: { disabled }, onLayout: onLayout, style: [
+            {
+                height: TRACK_HEIGHT,
+                borderRadius: spacing.radiusMd,
+                backgroundColor: theme.colors.muted,
+                opacity: disabled ? interaction.disabledOpacity : 1,
+                overflow: "hidden",
+                alignSelf: "stretch",
+            },
+            style,
+        ], children: [segmentWidth > 0 && (_jsx(Animated.View, { style: {
+                    pointerEvents: "none",
+                    position: "absolute",
+                    top: PILL_INSET,
+                    bottom: PILL_INSET,
+                    left: PILL_INSET,
+                    width: segmentWidth,
+                    borderRadius: spacing.radiusSm,
+                    backgroundColor: pillColor,
+                    transform: [
+                        {
+                            translateX: position.interpolate({
+                                inputRange: [0, travel],
+                                outputRange: [0, segmentWidth * travel],
+                            }),
+                        },
+                    ],
+                } })), _jsx(View, { style: { position: "absolute", top: PILL_INSET, bottom: PILL_INSET, left: PILL_INSET, right: PILL_INSET, flexDirection: "row" }, children: values.map((label, index) => (_jsx(WebSegment, { label: label, selected: index === selectedIndex, disabled: disabled, color: index === selectedIndex ? selectedLabelColor : theme.colors.mutedForeground, onPress: () => onSelect(label) }, `${index}-${label}`))) })] }));
+}
+function WebSegment({ label, selected, disabled, color, onPress }) {
+    const { getFocusRingStyle } = useTheme();
+    const focus = useFocusVisible();
+    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected, disabled }, disabled: disabled, onPress: disabled ? undefined : onPress, onFocus: focus.onFocus, onBlur: focus.onBlur, style: [
+            {
+                flex: 1,
+                alignItems: "center",
+                justifyContent: "center",
+                paddingHorizontal: spacing.sm,
+                borderRadius: spacing.radiusSm,
+                ...(Platform.OS === "web" && {
+                    cursor: (disabled ? "not-allowed" : "pointer"),
+                    userSelect: "none",
+                    outlineStyle: "none",
+                }),
+            },
+            focus.focused && !disabled && getFocusRingStyle(),
+        ], children: _jsx(StyledText, { selectable: false, numberOfLines: 1, fontWeight: "medium", style: { fontSize: 14, lineHeight: 18, color }, children: label }) }));
+}
 export { SegmentedControl };