@mrmeg/expo-ui 0.27.1 → 0.28.0

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 };

package/dist/components/Select.js

@@ -3,9 +3,12 @@ import * as React from "react";
 import { Animated, Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import * as SelectPrimitive from "@rn-primitives/select";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
@@ -36,34 +39,18 @@ const SIZE_CONFIGS = {
 };
 function SelectTrigger({ size = "md", error = false, children, style: styleOverride, disabled, ...props }) {
     const { theme, getFocusRingStyle } = useTheme();
+    const inputShape = useShape("input");
     const sizeConfig = SIZE_CONFIGS[size];
     const focusRingStyle = getFocusRingStyle();
-    const [focused, setFocused] = React.useState(false);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.97,
         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();
     return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
                 ...styles.trigger,
+                ...shapeRadius(inputShape),
                 height: sizeConfig.height,
                 paddingHorizontal: sizeConfig.paddingHorizontal,
                 borderColor: error ? theme.colors.destructive : theme.colors.border,
@@ -73,7 +60,7 @@ function SelectTrigger({ size = "md", error = false, children, style: styleOverr
                     outlineStyle: "none",
                     userSelect: "none",
                 }),
-                ...(disabled && { opacity: 0.5 }),
+                ...(disabled && { opacity: interaction.disabledOpacity }),
                 ...(focused && !disabled ? focusRingStyle : null),
                 ...(styleOverride && typeof styleOverride !== "function"
                     ? StyleSheet.flatten(styleOverride)
@@ -100,7 +87,7 @@ function SelectContent({ side, align = "start", sideOffset = 4, portalHost, styl
     return (_jsx(SelectPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(SelectPrimitive.Overlay, { style: Platform.select({
                     native: StyleSheet.absoluteFill,
                     default: undefined,
-                }), children: _jsx(AnimatedView, { type: "fade", style: StyleSheet.absoluteFill, pointerEvents: "box-none", children: _jsx(TextColorContext.Provider, { value: theme.colors.popoverForeground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                }), children: _jsx(AnimatedView, { type: "fade", style: [StyleSheet.absoluteFill, styles.passThrough], children: _jsx(TextColorContext.Provider, { value: theme.colors.popoverForeground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(SelectPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
                                         backgroundColor: theme.colors.popover,
                                         borderWidth: 1,
                                         borderColor: theme.colors.border,
@@ -128,17 +115,22 @@ function SelectItem({ children, style: styleOverride, ...props }) {
     const hasCustomChildren = React.isValidElement(children) || Array.isArray(children);
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!props.disabled,
-        scaleTo: 0.97,
+        scaleTo: interaction.pressedScale,
         haptic: false,
     });
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(SelectPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+    // On web the primitive's item is a Radix `div` that forwards every prop to
+    // the DOM, so RN press handlers would land there as unknown attributes
+    // ("Unknown event handler property onPressIn"). Native renders a Pressable
+    // and keeps the press scale.
+    const itemPressHandlers = Platform.OS === "web" ? undefined : pressHandlers;
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(SelectPrimitive.Item, { ...props, ...itemPressHandlers, style: {
                     ...styles.item,
                     ...(Platform.OS === "web" && {
                         cursor: props.disabled ? "not-allowed" : "pointer",
                         outlineStyle: "none",
                         userSelect: "none",
                     }),
-                    ...(props.disabled && { opacity: 0.5 }),
+                    ...(props.disabled && { opacity: interaction.disabledOpacity }),
                     ...(styleOverride && typeof styleOverride !== "function"
                         ? StyleSheet.flatten(styleOverride)
                         : {}),
@@ -188,7 +180,10 @@ function SelectSeparator({ style: styleOverride, ...props }) {
                 : {}),
         } }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
+    // Overlay layer: covers the screen without swallowing touches (style, not the
+    // deprecated `pointerEvents` prop).
+    passThrough: { pointerEvents: "box-none" },
     trigger: {
         flexDirection: "row",
         justifyContent: "space-between",

package/dist/components/Skeleton.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { View, StyleSheet, Animated } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
+import { shapeRadius, useShape } from "../hooks/useShape.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+// ============================================================================
+// Base Skeleton
+// ============================================================================
+/** Low point of the pulse; high enough that the bar never disappears. */
+const PULSE_MIN = 0.55;
+/** Opacity held when the OS asks for reduced motion (no pulse at all). */
+const STATIC_OPACITY = 0.8;
 /**
  * Skeleton Component
  *
@@ -20,23 +30,23 @@ import { createThemedStyles } from "../lib/themedStyles.js";
 export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.radiusMd, circle = false, style, }) {
     const { theme } = useTheme();
     const reduceMotion = useReducedMotion();
-    const opacity = useRef(new Animated.Value(reduceMotion ? 0.6 : 0.3)).current;
+    const opacity = useAnimatedValue(reduceMotion ? STATIC_OPACITY : PULSE_MIN);
     useEffect(() => {
         if (reduceMotion) {
-            opacity.setValue(0.6);
+            opacity.setValue(STATIC_OPACITY);
             return;
         }
-        opacity.setValue(0.3);
+        opacity.setValue(PULSE_MIN);
         const animation = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
             Animated.timing(opacity, {
-                toValue: 0.3,
+                toValue: PULSE_MIN,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: shouldUseNativeDriver,
             }),
         ]));
         animation.start();
@@ -48,7 +58,9 @@ export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.r
                 width: circle ? resolvedSize : width,
                 height: circle ? resolvedSize : height,
                 borderRadius: circle ? (resolvedSize / 2) : borderRadius,
-                backgroundColor: theme.colors.muted,
+                // `borderStrong`, not `muted`: on a white card `muted` (#F4F4F5) is
+                // a 1.05:1 step and the pulse's low point made it vanish outright.
+                backgroundColor: theme.colors.borderStrong,
             },
             { opacity },
             style,
@@ -74,7 +86,9 @@ export function SkeletonAvatar({ size = 40, style }) {
 export function SkeletonCard({ showImage = true, imageHeight = 140, showAvatar = true, textLines = 3, style, }) {
     const { theme, getShadowStyle } = useTheme();
     const styles = themedStyles(theme);
-    return (_jsxs(View, { style: [styles.card, getShadowStyle("subtle"), style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
+    // Host-app `setShape({ card })`: the placeholder keeps the Card's corners.
+    const cardRadius = shapeRadius(useShape("card"));
+    return (_jsxs(View, { style: [styles.card, cardRadius, getShadowStyle("subtle"), style], children: [showImage && (_jsx(Skeleton, { width: "100%", height: imageHeight, borderRadius: 0 })), _jsxs(View, { style: styles.body, children: [showAvatar && (_jsxs(View, { style: styles.avatarRow, children: [_jsx(SkeletonAvatar, { size: 36 }), _jsxs(View, { style: styles.avatarText, children: [_jsx(Skeleton, { width: "50%", height: 14 }), _jsx(Skeleton, { width: "30%", height: 12 })] })] })), _jsx(SkeletonText, { lines: textLines })] })] }));
 }
 const createCardStyles = (theme) => StyleSheet.create({
     card: {
@@ -98,4 +112,4 @@ const createCardStyles = (theme) => StyleSheet.create({
         gap: spacing.xs,
     },
 });
-const themedStyles = createThemedStyles(createCardStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createCardStyles);

package/dist/components/Slider.d.ts

@@ -6,15 +6,23 @@ import { StyleProp, ViewStyle } from "react-native";
  *
  *   - iOS:     SwiftUI `Slider`
  *   - Android: Material 3 `Slider`
- *   - Web:     native `<input type="range">` (themed via `accentColor`)
+ *   - Web:     native `<input type="range">`, drawn by the kit's own
+ *              stylesheet (see `SLIDER_WEB_CSS`)
  *
  * The public `SliderProps` surface (value / onValueChange / min / max / step /
  * disabled / showValue / size / style) is preserved, and the active track is
  * themed with the design system's accent color on every platform. Thumb and
- * inactive-track tints additionally apply on Android (iOS/web draw the system
- * thumb). Haptic feedback fires on each step change, matching the prior
+ * inactive-track tints additionally apply on Android and web (iOS draws the
+ * system thumb). Haptic feedback fires on each step change, matching the prior
  * hand-rolled slider.
  *
+ * Web: `@expo/ui` only maps `minimumTrackTintColor` to CSS `accent-color`, and
+ * Chromium then paints the unfilled track dark in light mode. The kit sets
+ * `appearance: none` on the input and draws the track, fill and thumb from
+ * CSS variables it puts on the element, through one hoisted `<style>` (React
+ * dedupes it by `href`). The stylesheet is scoped to `[data-expo-ui-slider]`,
+ * so other range inputs on the page keep their look.
+ *
  * Platform-owned behaviors (props accepted for ergonomics, but the platform
  * decides):
  *   - `size` is accepted for call-site compatibility but has no effect — the

package/dist/components/Slider.js

@@ -1,17 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
+import { interaction } from "../constants/interaction.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { hapticLight } from "../lib/haptics.js";
 import { stateSurfaceProps } from "../lib/stateSurface.js";
-import { useCallback, useRef } from "react";
-import { View } from "react-native";
+import React, { useCallback, useRef } from "react";
+import { Platform, View } from "react-native";
 import { Slider as NativeSlider } from "@expo/ui/community/slider";
 import { StyledText } from "./StyledText.js";
 function Slider({ value = 0, onValueChange, min = 0, max = 100, step = 1, 
 // Accepted for call-site compatibility; the platform owns track/thumb sizing.
 size: _size = "md", disabled = false, showValue = false, style: styleOverride, }) {
     const { theme, withAlpha } = useTheme();
-    const inactiveTrackColor = theme.dark ? withAlpha(palette.white, 0.1) : theme.colors.muted;
+    // Light: `border`, not `muted` — on a card `muted` is a 1.05:1 step and the
+    // unfilled track disappeared. Dark unchanged.
+    const inactiveTrackColor = theme.dark ? withAlpha(palette.white, 0.1) : theme.colors.border;
     const activeTrackColor = disabled
         ? theme.dark
             ? withAlpha(palette.white, 0.28)
@@ -32,15 +35,79 @@ size: _size = "md", disabled = false, showValue = false, style: styleOverride, }
         }
         onValueChange?.(next);
     }, [onValueChange]);
-    return (_jsxs(View, { ...stateSurfaceProps(), style: [{ opacity: disabled ? 0.5 : 1, alignSelf: "stretch" }, styleOverride], children: [showValue && (_jsx(StyledText, { selectable: false, style: {
+    return (_jsxs(View, { ...stateSurfaceProps(), ...webSliderScope, style: [{ opacity: disabled ? interaction.disabledOpacity : 1, alignSelf: "stretch" }, styleOverride], children: [Platform.OS === "web" && sliderWebStylesheet, showValue && (_jsx(StyledText, { selectable: false, style: {
                     fontSize: 12,
                     color: theme.colors.textDim,
                     marginBottom: 4,
                     userSelect: "none",
-                }, children: value })), _jsx(NativeSlider, { value: value, minimumValue: min, maximumValue: max, step: step, disabled: disabled, onValueChange: handleValueChange, style: { width: "100%" }, 
+                }, children: value })), _jsx(NativeSlider, { value: value, minimumValue: min, maximumValue: max, step: step, disabled: disabled, onValueChange: handleValueChange, style: [
+                    { width: "100%" },
+                    Platform.OS === "web" &&
+                        webSliderVariables({
+                            fill: fillRatio(value, min, max),
+                            track: inactiveTrackColor,
+                            active: activeTrackColor,
+                            thumb: thumbTintColor,
+                            ring: theme.colors.ring,
+                            ringBackground: theme.colors.background,
+                        }),
+                ], 
                 // Active track — honored on iOS, Android, and web (`accentColor`).
                 minimumTrackTintColor: activeTrackColor, 
-                // Inactive track + thumb — honored on Android; system-drawn elsewhere.
+                // Inactive track + thumb — honored on Android (and web through the
+                // CSS variables above); system-drawn on iOS.
                 maximumTrackTintColor: inactiveTrackColor, thumbTintColor: thumbTintColor })] }));
 }
+/** Filled share of the track, 0–1, for the web fill gradient. */
+function fillRatio(value, min, max) {
+    if (!(max > min))
+        return 0;
+    return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+/**
+ * CSS custom properties the web stylesheet reads. They ride on the input's
+ * inline `style` (React DOM writes `--*` keys as custom properties), so each
+ * slider carries its own theme values and the stylesheet stays static.
+ */
+function webSliderVariables(v) {
+    return {
+        "--expo-ui-slider-fill": `${Number((v.fill * 100).toFixed(2))}%`,
+        "--expo-ui-slider-track": v.track,
+        "--expo-ui-slider-active": v.active,
+        "--expo-ui-slider-thumb": v.thumb,
+        "--expo-ui-slider-ring": v.ring,
+        "--expo-ui-slider-ring-bg": v.ringBackground,
+    };
+}
+/** `data-expo-ui-slider` on the wrapper (react-native-web's `dataSet`), scoping the stylesheet. */
+const webSliderScope = Platform.OS === "web" ? { dataSet: { expoUiSlider: "" } } : {};
+const TRACK = "[data-expo-ui-slider] input[type=\"range\"]";
+const THUMB_SHADOW = "0 1px 3px rgba(0,0,0,.25)";
+const RING_SHADOW = "0 0 0 2px var(--expo-ui-slider-ring-bg),0 0 0 4px var(--expo-ui-slider-ring)";
+const SLIDER_WEB_CSS = [
+    `${TRACK}{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;padding:0;background:transparent;cursor:pointer;outline:none;--expo-ui-slider-fill:0%}`,
+    `${TRACK}:disabled{cursor:not-allowed}`,
+    `${TRACK}::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(var(--expo-ui-slider-active),var(--expo-ui-slider-active)) 0 0/var(--expo-ui-slider-fill) 100% no-repeat var(--expo-ui-slider-track)}`,
+    `${TRACK}::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8px;border:0;border-radius:50%;background:var(--expo-ui-slider-thumb);box-shadow:${THUMB_SHADOW}}`,
+    `${TRACK}:focus-visible::-webkit-slider-thumb{box-shadow:${RING_SHADOW}}`,
+    `${TRACK}::-moz-range-track{height:4px;border-radius:2px;background:var(--expo-ui-slider-track)}`,
+    `${TRACK}::-moz-range-progress{height:4px;border-radius:2px;background:var(--expo-ui-slider-active)}`,
+    `${TRACK}::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--expo-ui-slider-thumb);box-shadow:${THUMB_SHADOW}}`,
+    `${TRACK}:focus-visible::-moz-range-thumb{box-shadow:${RING_SHADOW}}`,
+].join("");
+/**
+ * One hoistable stylesheet (React 19 `<style href precedence>`): rendered by
+ * every web Slider, mounted in `<head>` once, and part of the server markup
+ * so the first paint is already themed. The CSS goes through
+ * `dangerouslySetInnerHTML` rather than a text child so the element stays
+ * representable outside the DOM renderer (the RN test renderer rejects text
+ * outside `<Text>`); the string is a package constant, never user input.
+ */
+const sliderWebStylesheet = Platform.OS === "web"
+    ? React.createElement("style", {
+        href: "expo-ui-slider",
+        precedence: "default",
+        dangerouslySetInnerHTML: { __html: SLIDER_WEB_CSS },
+    })
+    : null;
 export { Slider };

package/dist/components/StatCard.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-import { type IconName } from "./Icon";
+import { type IconName } from "./Icon.js";
 export type StatChangeDirection = "up" | "down" | "neutral";
 export interface StatCardChange {
     /** Signed change text, e.g. "+12.5%" or "-3 orders". */
@@ -30,7 +30,9 @@ export interface StatCardProps {
  * Dashboard stat idiom: a tiny uppercase tracked label, a large
  * tabular-nums value (with an optional muted unit suffix), and an optional
  * signed change line (success/destructive/muted by direction). Builds on
- * `Card` for the container, default shadow, and press feedback.
+ * `Card` for the container, default shadow, and press feedback, so it follows
+ * Card's rule: a tile in a collection (a scrolling metrics rail) or one
+ * tappable metric, not a box around every number on a summary screen.
  *
  * @example
  * ```tsx

package/dist/components/StatCard.js

@@ -16,7 +16,9 @@ const DIRECTION_ICON = {
  * Dashboard stat idiom: a tiny uppercase tracked label, a large
  * tabular-nums value (with an optional muted unit suffix), and an optional
  * signed change line (success/destructive/muted by direction). Builds on
- * `Card` for the container, default shadow, and press feedback.
+ * `Card` for the container, default shadow, and press feedback, so it follows
+ * Card's rule: a tile in a collection (a scrolling metrics rail) or one
+ * tappable metric, not a box around every number on a summary screen.
  *
  * @example
  * ```tsx

package/dist/components/StyledText.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentRef, type Ref } from "react";
 import { Text as RNText, TextProps as RNTextProps } from "react-native";
-import { type FontVariant } from "../constants/fonts";
+import { type FontVariant } from "../constants/fonts.js";
 /**
  * Font size variants for the type scale (Inter sans-serif / Georgia serif)
  */
@@ -27,6 +27,12 @@ export type TextProps = RNTextProps & {
      * Font weight - light, regular, medium, semibold, bold
      */
     fontWeight?: FontWeight;
+    /**
+     * Italic. A real italic face when the family has one (an app's `setFonts`
+     * `italic` map, or the Newsreader serif preset); otherwise `fontStyle:
+     * "italic"` and the platform synthesizes the slant.
+     */
+    italic?: boolean;
     /**
      * Font size variant
      */

package/dist/components/StyledText.js

@@ -5,7 +5,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { resolveFontStyle } from "../constants/fonts.js";
 import { useThemeStore } from "../state/themeStore.js";
 import { translateText } from "../lib/i18n.js";
-import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
+import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context.js";
 const FONT_SIZES = {
     xs: 11,
     sm: 12,
@@ -76,11 +76,12 @@ const SEMANTIC_CONFIGS = {
  * - numberOfLines and ellipsizeMode support from RN TextProps
  */
 export function StyledText(props) {
-    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, size, semantic, align, selectable, children, ref, ...otherProps } = props;
+    const { tx, text, txOptions, style, variant = "sansSerif", fontWeight, italic, size, semantic, align, selectable, children, ref, ...otherProps } = props;
     const { theme } = useTheme();
     // Subscribed, not read via getState(), so a `setFonts` call after mount
     // re-renders text instead of leaving stale families on screen.
     const fontOverrides = useThemeStore((s) => s.fontOverrides);
+    const serifPreset = useThemeStore((s) => s.serifPreset);
     // Check if there's a color override from parent context (e.g., Button)
     const contextColor = use(TextColorContext);
     const contextTextStyle = use(TextStyleContext);
@@ -99,7 +100,7 @@ export function StyledText(props) {
     // faces via `setFonts`; resolution — including the per-group merge and the
     // numeric-vs-family weight strategy — lives in `resolveFontStyle`
     // (constants/fonts.ts), shared with the control components' `useFontStyle`.
-    const { fontFamily, fontWeight: resolvedFontWeight } = resolveFontStyle(fontOverrides, variant, finalFontWeight);
+    const { fontFamily, fontWeight: resolvedFontWeight, fontStyle } = resolveFontStyle(fontOverrides, variant, finalFontWeight, { italic, serifPreset });
     // Get fontSize and lineHeight from size variant
     const fontSize = FONT_SIZES[finalSize];
     const lineHeight = LINE_HEIGHTS[finalSize];
@@ -124,6 +125,7 @@ export function StyledText(props) {
                 fontFamily,
                 fontSize,
                 ...(resolvedFontWeight !== undefined && { fontWeight: resolvedFontWeight }),
+                ...(fontStyle !== undefined && { fontStyle }),
                 ...(resolvedLineHeight !== undefined && { lineHeight: resolvedLineHeight }),
                 userSelect: resolvedSelectable ? "auto" : "none",
                 ...(letterSpacing !== undefined && { letterSpacing }),

package/dist/components/Switch.d.ts

@@ -41,5 +41,5 @@ interface SwitchProps extends Omit<SwitchPrimitives.RootProps, "style"> {
      */
     style?: StyleProp<ViewStyle>;
 }
-declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, ...props }: SwitchProps): React.JSX.Element;
+declare function Switch({ variant, labelOn, labelOff, size, thumbSize, loading, style: styleOverride, onCheckedChange, ...props }: SwitchProps): React.JSX.Element;
 export { Switch };

package/dist/components/Switch.js

@@ -2,61 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { palette } from "../constants/colors.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
-import { hapticLight } from "../lib/haptics.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { interaction } from "../constants/interaction.js";
 import { stateSurfaceProps } from "../lib/stateSurface.js";
+import { useAnimatedValue } from "../lib/useAnimatedValue.js";
 import * as SwitchPrimitives from "@rn-primitives/switch";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { ActivityIndicator, Platform, StyleSheet, View, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useItemControlLabel } from "./Item.js";
 const DEFAULT_HIT_SLOP = 8;
-function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, height: 24 }, thumbSize = 20, loading = false, style: styleOverride, ...props }) {
+function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, height: 24 }, thumbSize = 20, loading = false, style: styleOverride, onCheckedChange, ...props }) {
     const { theme, getContrastingColor, getShadowStyle, getFocusRingStyle, withAlpha } = useTheme();
     const reduceMotion = useReducedMotion();
     const hasMounted = useRef(false);
-    const [focused, setFocused] = useState(false);
     const focusRingStyle = getFocusRingStyle();
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!props.disabled,
-        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);
-    };
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible();
+    // Inside an Item row with no label of its own, the switch is named by the
+    // row title (aria-labelledby on web, accessibilityLabel on native).
+    const rowLabel = useItemControlLabel(props);
     // Fire haptic on user-initiated toggles (skip initial mount)
     const wrappedOnCheckedChange = useCallback((checked) => {
         if (hasMounted.current)
-            hapticLight();
-        props.onCheckedChange?.(checked);
-    }, [props.onCheckedChange]);
+            hapticSelection();
+        onCheckedChange?.(checked);
+    }, [onCheckedChange]);
     useEffect(() => {
         hasMounted.current = true;
     }, []);
     // Single animated value drives everything: 0 = off, 1 = on
-    const progress = useRef(new Animated.Value(props.checked ? 1 : 0)).current;
+    const progress = useAnimatedValue(props.checked ? 1 : 0);
     useEffect(() => {
         const target = props.checked ? 1 : 0;
         Animated.timing(progress, {
             toValue: target,
             duration: reduceMotion ? 0 : 120,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [props.checked, reduceMotion, progress]);
     // Thumb slides from left to right with equal inset on every side.
@@ -93,7 +83,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
     const labelFontSize = size.height / 3;
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    return (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(SwitchPrimitives.Root, { ...props, onCheckedChange: wrappedOnCheckedChange, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(SwitchPrimitives.Root, { ...rowLabel, ...props, onCheckedChange: wrappedOnCheckedChange, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
                 position: "relative",
                 width: size.width,
                 height: size.height,
@@ -148,7 +138,7 @@ function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, he
                             userSelect: "none",
                         }, children: labelOff }) }))] }) }));
 }
-const styles = StyleSheet.create({
+const styles = /*#__PURE__*/ StyleSheet.create({
     label: {
         position: "absolute",
         top: 0,