@mrmeg/expo-ui 0.27.0 → 0.28.0

package/dist/components/Button.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { use, useCallback, useMemo, useState } from "react";
+import { use, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, View, Platform, ActivityIndicator, Animated, } from "react-native";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { StyledText } from "./StyledText.js";
 import { Icon } from "./Icon.js";
-import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
+import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { useFontStyle } from "../hooks/useFontStyle.js";
 import { useScalePress } from "../hooks/useScalePress.js";
 import { useThemeStore } from "../state/themeStore.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
+import { stateSurfaceProps } from "../lib/stateSurface.js";
+import { composeRefs } from "../lib/composeRefs.js";
+import { getWebHitInsets, verticalSlopFor, WebHitTarget } from "../lib/webHitTarget.js";
 const SIZE_CONFIGS = {
     sm: {
         paddingVertical: spacing.xxs,
@@ -31,7 +36,9 @@ const SIZE_CONFIGS = {
         height: 40,
     },
 };
-const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarget - sizeConfig.height) / 2);
+/** `outline` border. The web hit extender adds it back (see `WebHitTarget`). */
+const OUTLINE_BORDER_WIDTH = 1;
+const getNativeHitSlop = (sizeConfig) => verticalSlopFor(sizeConfig.height);
 /**
  * Enhanced Button Component
  *
@@ -72,7 +79,7 @@ const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarg
  * ```
  */
 function ButtonRoot(props) {
-    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow: withShadowProp, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
+    const { tx, text, txOptions, style: styleOverride, pressedStyle: pressedStyleOverride, textStyle: textStyleOverride, pressedTextStyle: pressedTextStyleOverride, disabledTextStyle: disabledTextStyleOverride, children, RightAccessory, LeftAccessory, disabled, disabledStyle: disabledStyleOverride, withShadow: withShadowProp, haptic, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, accessibilityState, "aria-disabled": ariaDisabled, ref: forwardedRef, ...rest } = props;
     const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
     const styles = themedStyles(theme)[size];
     const shadowStyle = getShadowStyle("subtle");
@@ -128,38 +135,39 @@ function ButtonRoot(props) {
                     : preset === "secondary"
                         ? theme.colors.secondaryForeground
                         : getContrastingColor(backgroundColor, palette.white, palette.black);
-    const [focused, setFocused] = useState(false);
     const [restingWidth, setRestingWidth] = useState();
-    const isDisabled = disabled || loading;
+    // Two kinds of disabled. `pressBlocked` (the `disabled` prop, or loading)
+    // swallows presses. `isDisabled` is what is ANNOUNCED and drawn: that, or a
+    // consumer `aria-disabled` / `accessibilityState.disabled`, which keeps the
+    // button focusable and pressable so the press can explain itself.
+    const pressBlocked = !!disabled || loading;
+    // Web only: see `lib/webHitTarget`. Native keeps `hitSlop` on the Pressable.
+    const webHitInsets = Platform.OS === "web" ? getWebHitInsets(rest.hitSlop, sizeConfig.height) : null;
+    const hitBorder = preset === "outline" ? OUTLINE_BORDER_WIDTH : 0;
+    const isDisabled = pressBlocked || (ariaDisabled ?? accessibilityState?.disabled) === true;
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!isDisabled,
-        haptic: false,
-        scaleTo: preset === "link" ? 1 : 0.97,
+        haptic: haptic ?? "setting",
+        scaleTo: preset === "link" ? 1 : interaction.pressedScale,
     });
-    const showFocusRing = (event) => {
-        // On web, pointer taps focus the element too, which left the ring visible
-        // after every click. :focus-visible is only true for keyboard-driven
-        // focus, so gate the ring on it; fall back to showing the ring when the
-        // target can't be queried (non-DOM targets, older engines).
-        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);
-        onFocus?.(event);
-    };
-    const hideFocusRing = (event) => {
-        setFocused(false);
-        onBlur?.(event);
-    };
+    const { focused, onFocus: showFocusRing, onBlur: hideFocusRing } = useFocusVisible({ onFocus, onBlur });
+    const hostRef = useRef(null);
+    const pressBlockedRef = useRef(pressBlocked);
+    pressBlockedRef.current = pressBlocked;
+    const announceOnly = isDisabled && !pressBlocked;
+    useLayoutEffect(() => {
+        if (Platform.OS !== "web" || !announceOnly)
+            return;
+        const node = hostRef.current;
+        if (!node?.setAttribute)
+            return;
+        node.setAttribute("aria-disabled", "true");
+        return () => {
+            if (!pressBlockedRef.current)
+                node.removeAttribute?.("aria-disabled");
+        };
+    }, [announceOnly]);
+    const composedRef = useMemo(() => composeRefs(hostRef, forwardedRef), [forwardedRef]);
     const handlePressIn = (event) => {
         pressHandlers.onPressIn();
         onPressIn?.(event);
@@ -168,6 +176,12 @@ function ButtonRoot(props) {
         pressHandlers.onPressOut();
         onPressOut?.(event);
     };
+    // The resting width is only read while `loading`, to keep the button from
+    // resizing when its label changes under the spinner (the label stays
+    // mounted at opacity 0, so an unchanged label already keeps the width). A
+    // button that is never given a `loading` prop can't enter that state, so it
+    // skips the layout callback and the extra render it caused on every mount.
+    const measuresRestingWidth = props.loading !== undefined && !fullWidth;
     const handleButtonLayout = useCallback((event) => {
         if (loading || fullWidth)
             return;
@@ -181,7 +195,13 @@ function ButtonRoot(props) {
             return nextWidth;
         });
     }, [fullWidth, loading]);
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: labelTextStyle, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: labelTextStyle, children: _jsx(Pressable, { ref: composedRef, accessibilityRole: "button", accessibilityState: { ...accessibilityState, disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), 
+                    // Never `false`: RN's Pressable would overwrite a consumer
+                    // `accessibilityState.disabled` with it.
+                    disabled: pressBlocked || undefined, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View
+                        // Android: fixed native tree across disabled/pressed/loading
+                        // flips (see `stateSurfaceProps`).
+                        , { ...stateSurfaceProps(), style: [
                                 styles.button,
                                 // Host-app radius override (see `setShape`). Sits right
                                 // after the static radius so presets, state styles, and —
@@ -201,11 +221,12 @@ function ButtonRoot(props) {
                                 state.pressed && pressedStyleOverride,
                                 isDisabled && styles.disabled,
                                 isDisabled && disabledStyleOverride,
-                                focused && !isDisabled && focusRingStyle,
+                                // An announce-only disabled button is still focusable: show its ring.
+                                focused && !pressBlocked && focusRingStyle,
                                 loading && restingWidth !== undefined && !fullWidth && { width: restingWidth },
                                 // Spread array styles from Slot to prevent nested arrays on web
                                 ...(Array.isArray(styleOverride) ? styleOverride : [styleOverride]),
-                            ], onLayout: handleButtonLayout, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
+                            ], onLayout: measuresRestingWidth ? handleButtonLayout : undefined, children: [loading && (_jsx(View, { style: [styles.loaderOverlay, { pointerEvents: "none" }], children: _jsx(ActivityIndicator, { size: "small", color: textColor }) })), _jsxs(View, { ...stateSurfaceProps(), style: [styles.content, loading && styles.loadingContent, { pointerEvents: loading ? "none" : "auto" }], children: [!!LeftAccessory && (_jsx(LeftAccessory, { style: styles.leftAccessory, pressableState: state, disabled: isDisabled })), (tx || text) ? (_jsx(StyledText, { tx: tx, text: text, txOptions: txOptions, style: [
                                                 labelTextStyle,
                                                 state.pressed && styles.pressedText,
                                                 state.pressed && pressedTextStyleOverride,
@@ -215,7 +236,7 @@ function ButtonRoot(props) {
                                         // Children render as-is. For text content, use the explicit
                                         // <Button.Text> subcomponent so it inherits control typography
                                         // via context instead of relying on a runtime `typeof` check.
-                                        children ?? null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] })] }) })) }) }) }) }));
+                                        children ?? null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] }), _jsx(WebHitTarget, { insets: webHitInsets, border: hitBorder, testID: "button-hit-target" })] }) })) }) }) }) }));
 }
 /**
  * Button.Text
@@ -283,7 +304,7 @@ const createStyles = (theme, size) => {
         },
         buttonOutline: {
             backgroundColor: "transparent",
-            borderWidth: 1,
+            borderWidth: OUTLINE_BORDER_WIDTH,
             borderColor: theme.colors.input,
         },
         buttonGhost: {
@@ -309,16 +330,16 @@ const createStyles = (theme, size) => {
             userSelect: "none",
         },
         pressed: {
-            opacity: 0.9,
+            opacity: interaction.pressedOpacity,
         },
         pressedMuted: {
             backgroundColor: theme.colors.muted,
         },
-        pressedText: {
-            opacity: 0.9,
-        },
+        // The container's pressed opacity already dims the label; a second layer
+        // here would compound it.
+        pressedText: {},
         disabled: {
-            opacity: 0.6,
+            opacity: interaction.disabledOpacity,
         },
         leftAccessory: {
             marginRight: spacing.sm,
@@ -333,7 +354,7 @@ const createStyles = (theme, size) => {
         },
     });
 };
-const themedStyles = createThemedStyles((theme) => ({
+const themedStyles = /*#__PURE__*/ createThemedStyles((theme) => ({
     sm: createStyles(theme, "sm"),
     md: createStyles(theme, "md"),
     lg: createStyles(theme, "lg"),

package/dist/components/Card.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ViewStyle, TextStyle, StyleProp } from "react-native";
-import { TextProps } from "./StyledText";
+import { TextProps } from "./StyledText.js";
 export interface CardProps {
     /** Card contents */
     children?: React.ReactNode;

package/dist/components/Card.js

@@ -3,8 +3,11 @@ import { createContext, use } from "react";
 import { View, Pressable, StyleSheet, Platform, Animated } from "react-native";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
+import { interaction } from "../constants/interaction.js";
 import { createThemedStyles } from "../lib/themedStyles.js";
 /**
  * Card Component
@@ -12,6 +15,13 @@ import { createThemedStyles } from "../lib/themedStyles.js";
  * A themed container component with header, content, and footer sections.
  * Follows shadcn/ui patterns with consistent styling and theme integration.
  *
+ * Use a Card for one item in a collection (a feed entry, a grid tile, a
+ * carousel slide) or for a single tappable object. It is not a layout box:
+ * don't wrap a screen section, a form, or a group of rows in one (use
+ * `ItemGroup`, `SectionHeader`, or a `Separator`), and never nest Cards. The
+ * parts pad `spacing.cardPadding`, so a Card inside a padded box doubles the
+ * inset.
+ *
  * Usage:
  * ```tsx
  * <Card>
@@ -38,17 +48,20 @@ function useCardContext() {
     return ctx ?? { theme, styles: themedStyles(theme) };
 }
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
-    const { theme, getShadowStyle } = useTheme();
+    const { theme, getShadowStyle, getFocusRingStyle } = useTheme();
     const styles = themedStyles(theme);
     const shadowStyle = getShadowStyle("subtle");
+    // Host-app `setShape({ card })`, on the surface and on the pressable ring wrapper.
+    const cardRadius = useShape("card")?.borderRadius ?? spacing.radiusLg;
     const ctx = { theme, styles };
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !onPress || !!disabled,
         scaleTo: 0.98,
-        haptic: false,
     });
+    const focus = useFocusVisible();
     const cardContent = (_jsx(View, { style: [
             styles.card,
+            { borderRadius: cardRadius },
             variant === "default" && styles.cardDefault,
             variant === "default" && shadowStyle,
             variant === "outline" && styles.cardOutline,
@@ -56,7 +69,14 @@ function Card({ children, style: styleOverride, variant = "default", onPress, di
             styleOverride,
         ], children: children }));
     if (onPress) {
-        return (_jsx(CardContext.Provider, { value: ctx, children: _jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, style: Platform.OS === "web" ? { cursor: "pointer" } : undefined, children: _jsx(Animated.View, { style: scaleStyle, children: cardContent }) }) }));
+        return (_jsx(CardContext.Provider, { value: ctx, children: _jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, onFocus: focus.onFocus, onBlur: focus.onBlur, style: ({ pressed }) => [
+                    // The ring is a box shadow on this wrapper, so it needs the card's
+                    // radius; the browser outline is off because the ring replaces it.
+                    { borderRadius: cardRadius },
+                    Platform.OS === "web" && { cursor: "pointer", outlineStyle: "none" },
+                    pressed && { opacity: interaction.pressedOpacity },
+                    focus.focused && !disabled && getFocusRingStyle(),
+                ], children: _jsx(Animated.View, { style: scaleStyle, children: cardContent }) }) }));
     }
     return (_jsx(CardContext.Provider, { value: ctx, children: cardContent }));
 }
@@ -123,5 +143,5 @@ const createCardStyles = (theme) => StyleSheet.create({
         lineHeight: 20,
     },
 });
-const themedStyles = createThemedStyles(createCardStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createCardStyles);
 export { Card, CardHeader, CardContent, CardFooter, CardTitle, CardDescription };

package/dist/components/Carousel.js

@@ -197,7 +197,7 @@ const DOT_HIT_SLOP = {
 // site (it tracks the contentPadding prop) so the leading inset survives the
 // browser snapping slide 0 to the scrollport start — which also makes page `i`
 // land on `i * interval`, matching the native snap offsets.
-const webStyles = StyleSheet.create({
+const webStyles = /*#__PURE__*/ StyleSheet.create({
     scroller: { scrollSnapType: "x mandatory" },
     item: { scrollSnapAlign: "start" },
 });
@@ -245,4 +245,4 @@ const createStyles = (theme) => StyleSheet.create({
         backgroundColor: theme.colors.border,
     },
 });
-const themedStyles = createThemedStyles(createStyles);
+const themedStyles = /*#__PURE__*/ createThemedStyles(createStyles);

package/dist/components/Checkbox.js

@@ -1,14 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import { spacing } from "../constants/spacing.js";
-import { hapticLight } from "../lib/haptics.js";
+import { hapticSelection } from "../lib/haptics.js";
+import { interaction } from "../constants/interaction.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 CheckboxPrimitive from "@rn-primitives/checkbox";
+import { useItemControlLabel } from "./Item.js";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
     sm: { size: 16, iconSize: 12, strokeWidth: 2.5 },
@@ -20,38 +25,20 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     const reduceMotion = useReducedMotion();
     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();
     // Simple fast opacity for the checkmark icon
-    const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
+    const checkOpacity = useAnimatedValue(checked || indeterminate ? 1 : 0);
     const isVisuallyChecked = !!checked || indeterminate;
     const animateCheckOpacity = useCallback((nextVisible) => {
         Animated.timing(checkOpacity, {
             toValue: nextVisible ? 1 : 0,
             duration: reduceMotion ? 0 : 60,
-            useNativeDriver: true,
+            useNativeDriver: shouldUseNativeDriver,
         }).start();
     }, [checkOpacity, reduceMotion]);
     useEffect(() => {
@@ -59,7 +46,7 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     }, [animateCheckOpacity, isVisuallyChecked]);
     const wrappedOnCheckedChange = (next) => {
         if (next)
-            hapticLight();
+            hapticSelection();
         animateCheckOpacity(next);
         onCheckedChange?.(next);
     };
@@ -71,39 +58,59 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     // Flatten style override for web compatibility
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const checkboxElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: {
-                ...styles.box,
-                borderColor,
-                backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
-                width: sizeConfig.size,
-                height: sizeConfig.size,
-                opacity: disabled ? 0.5 : 1,
+    // The primitive Root is the ONE control (role, state, name); the visual box
+    // is a child so the control can be larger than what it draws. On web, where
+    // `hitSlop` does nothing, a 16/20px box is below the 24px WCAG 2.5.8 minimum,
+    // so the control grows to `spacing.minTarget` and takes the extra back in
+    // negative margins — the row's layout does not move.
+    const hitSize = Platform.OS === "web" ? Math.max(sizeConfig.size, spacing.minTarget) : sizeConfig.size;
+    const hitOverflow = (hitSize - sizeConfig.size) / 2;
+    // The label text names the control on every platform (react-native-web
+    // maps `accessibilityLabel` to `aria-label`); no `useId` link, because ids
+    // do not survive Expo Router's streamed hydration (see hooks/useHydrated).
+    const rowLabel = useItemControlLabel({ ...props, accessibilityLabel: label });
+    const labelLink = label !== undefined ? { accessibilityLabel: label } : rowLabel;
+    const checkboxElement = (_jsx(Animated.View, { style: scaleStyle, children: _jsx(CheckboxPrimitive.Root, { ...labelLink, ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, 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, accessibilityRole: "checkbox", accessibilityState: {
                 checked: indeterminate ? "mixed" : checked,
                 disabled: !!disabled,
-            }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
-                    justifyContent: "center",
-                    alignItems: "center",
-                }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }) }));
+            }, children: _jsx(View, { style: {
+                    ...styles.box,
+                    borderColor,
+                    backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
+                    width: sizeConfig.size,
+                    height: sizeConfig.size,
+                    opacity: disabled ? 0.5 : 1,
+                    ...(focused && !disabled ? focusRingStyle : null),
+                    ...(flattenedStyle || {}),
+                }, children: _jsx(CheckboxPrimitive.Indicator, { style: {
+                        justifyContent: "center",
+                        alignItems: "center",
+                    }, children: _jsx(Animated.View, { style: { opacity: checkOpacity }, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }) }) }));
     // If no label, return just the checkbox
     if (!label) {
         return checkboxElement;
     }
-    // With label, wrap in a container
-    return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "checkbox", accessibilityState: {
-            checked: indeterminate ? "mixed" : checked,
-            disabled: !!disabled,
-        }, accessibilityLabel: label, children: [checkboxElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { selectable: false, style: [
+    // With a label, a non-accessible wrapper extends the tap area to the text.
+    // It carries no role or state: the primitive Root above is the only control
+    // a screen reader meets, and it carries the label text as its name.
+    return (_jsxs(Pressable, { onPress: () => !disabled && wrappedOnCheckedChange(!checked), style: [styles.container, labelStyle], disabled: disabled, accessible: false, focusable: false, children: [checkboxElement, _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",
+    },
     box: {
         // radiusXs (not radiusSm) — at the checkbox's 16-24px sizes, radiusSm
         // post-rebase (8px) reads as over-rounded; radiusXs keeps the same
@@ -126,7 +133,7 @@ const styles = StyleSheet.create({
         fontSize: 14,
     },
     disabledLabel: {
-        opacity: 0.5,
+        opacity: interaction.disabledOpacity,
     },
     required: {
         fontWeight: "bold",

package/dist/components/Collapsible.js

@@ -1,30 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Animated, Platform, StyleSheet, View } from "react-native";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context.js";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useScalePress } from "../hooks/useScalePress.js";
+import { useFocusVisible } from "../hooks/useFocusVisible.js";
 import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
 function Collapsible({ children, ...props }) {
     return (_jsx(CollapsiblePrimitive.Root, { ...props, asChild: Platform.OS !== "web", children: _jsx(View, { children: children }) }));
 }
 function CollapsibleTrigger({ style: styleOverride, disabled, ...props }) {
-    const { theme } = useTheme();
+    const { theme, getFocusRingStyle } = useTheme();
     const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
         disabled: !!disabled,
         scaleTo: 0.97,
         haptic: false,
     });
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(CollapsiblePrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+    const focus = useFocusVisible();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(CollapsiblePrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, onFocus: focus.onFocus, onBlur: focus.onBlur, style: {
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
                         paddingVertical: spacing.sm,
+                        borderRadius: spacing.radiusSm,
                         ...(Platform.OS === "web" && {
                             cursor: "pointer",
                             outlineStyle: "none",
                             userSelect: "none",
                         }),
+                        ...(focus.focused && !disabled ? getFocusRingStyle() : null),
                         ...(styleOverride && typeof styleOverride !== "function"
                             ? StyleSheet.flatten(styleOverride)
                             : {}),