@mrmeg/expo-ui 0.27.1 → 0.29.0

package/dist/components/BottomSheet.d.ts

@@ -61,6 +61,18 @@ import { ViewProps, StyleProp, ViewStyle, ScrollViewProps } from "react-native";
  *     `keyboardShouldPersistTaps="always"` / `"handled"` on scroll views that
  *     contain a sheet, or `DismissKeyboard`, which already sets it.
  *
+ * Dismiss completion: `onDismissed` (root prop) fires once per close after the
+ * sheet is fully gone, so the next modal (an RN `Modal`-backed `Dialog`, a
+ * native stack modal) can be presented from it without UIKit rejecting the
+ * presentation while the sheet is still animating out. iOS: `@expo/ui` raises
+ * its close callback from the native `onDismiss` event of SwiftUI
+ * `.sheet(isPresented:onDismiss:)`, which runs after the dismissal transition.
+ * Android: `@expo/ui` raises it after Material's hide animation for a swipe /
+ * back / scrim dismissal, and with the removal of the Compose sheet for a
+ * prop-driven close (which has no exit animation). Web: `@expo/ui` raises it
+ * before its exit animation, so the package waits for the HTML `<dialog>`'s
+ * `close` event instead (`bottomSheetDismiss.ts`).
+ *
  * Scrollable bodies: the native sheet doesn't bound the hosted RN content to
  * the detent height, so a tall `Body` overflows and clips its footer/tail. When
  * `Body` detects overflow, `Content` caps the column to the detent height so the
@@ -116,12 +128,28 @@ interface BottomSheetContextValue {
     /** Whether a `Footer` is mounted, so `Body` can own the bottom safe-area inset when it isn't. */
     hasFooter: boolean;
     setHasFooter: (present: boolean) => void;
+    /** Called by `Content` once the native sheet has fully dismissed; invokes the root's `onDismissed`. */
+    notifyDismissed: () => void;
 }
 interface BottomSheetProps {
     /** Controlled open state. Omit to use uncontrolled mode with `defaultOpen`. */
     open?: boolean;
     /** Callback when open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Called once per close, after the sheet has fully dismissed on every
+     * platform. Present the next modal (a `Dialog`, a native stack modal) from
+     * here rather than from `onOpenChange(false)` or a timer: on iOS the
+     * `UISheetPresentationController` is still dismissing when `onOpenChange`
+     * fires, and a `Modal` presented then is rejected ("already presenting")
+     * without retry. Detection — iOS: `@expo/ui`'s native `onDismiss` event
+     * (SwiftUI `.sheet(onDismiss:)`, after the transition). Android: `@expo/ui`'s
+     * close callback (after Material's hide animation for swipe / back / scrim; a
+     * prop-driven close removes the Compose sheet with no exit animation). Web:
+     * the HTML `<dialog>`'s `close` event, which `@expo/ui` raises when its exit
+     * animation ends.
+     */
+    onDismissed?: () => void;
     /** Initial open state for uncontrolled mode. Default: false. */
     defaultOpen?: boolean;
     /** Snap point heights (px or percentage strings). Default: ["50%"]. */
@@ -195,7 +223,7 @@ interface BottomSheetCloseProps {
  */
 export declare const bottomSheetAncestorClaimWarning: string;
 declare function useBottomSheetContext(): BottomSheetContextValue;
-declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
+declare function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, onDismissed, defaultOpen, snapPoints, closeOnBackdropPress, children, }: BottomSheetProps): React.JSX.Element;
 declare function BottomSheetTrigger({ asChild, children, style: styleOverride }: BottomSheetTriggerProps): React.JSX.Element;
 declare function BottomSheetContent({ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }: BottomSheetContentProps): React.JSX.Element;
 declare function BottomSheetHandle({ style }: BottomSheetHandleProps): React.JSX.Element;

package/dist/components/BottomSheet.js

@@ -1,16 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import React, { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
 import { View, Pressable, StyleSheet, ScrollView, Platform, Animated, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
-import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
+import { useWindowInsets } from "../hooks/useWindowInsets.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useShape } from "../hooks/useShape.js";
 import { spacing } from "../constants/spacing.js";
 import { useScalePress } from "../hooks/useScalePress.js";
-import { TextColorContext, TextClassContext } from "./StyledText.context";
+import { TextColorContext, TextClassContext } from "./StyledText.context.js";
 import { Icon } from "./Icon.js";
 import { useAncestorClaimWarning, useKeyboardDismissResponder } from "./keyboardDismiss.js";
 import { warnIfBottomSheetHostDropsResize } from "./bottomSheetHostSupport.js";
+import { awaitDialogClose } from "./bottomSheetDismiss.js";
 const DEFAULT_SNAP_POINTS = ["50%"];
+/**
+ * UIKit keeps a `.large` sheet's top edge 10 pt below the top safe-area inset;
+ * SwiftUI's `.fraction()` detents are fractions of the height that remains.
+ */
+const IOS_SHEET_TOP_GAP = 10;
+/**
+ * `@expo/ui` pads the hosted RN column 16 pt below the native drag indicator
+ * (`paddingTop: 16` in its iOS `BottomSheet` when `handleComponent !== null`).
+ */
+const IOS_HOST_HANDLE_PADDING = 16;
 function clampSnapIndex(index, maxSnapIndex) {
     return Math.min(Math.max(index, 0), maxSnapIndex);
 }
@@ -108,23 +120,23 @@ function useBottomSheetContext() {
     return context;
 }
 /**
- * Safe-area insets for content *inside* the sheet.
- *
- * The native sheet (SwiftUI `.sheet()` / Material `ModalBottomSheet`) is
- * presented outside the React tree's `SafeAreaProvider`, so `useSafeAreaInsets()`
- * reads all-zero in here. Fall back to `initialWindowMetrics` — the same trick
- * the app uses for its full-screen Modals — so bottom padding actually clears
- * the home indicator and the last row of a scroll body is reachable.
+ * Safe-area insets for content *inside* the sheet. The native sheet (SwiftUI
+ * `.sheet()` / Material `ModalBottomSheet`) is presented outside the React
+ * tree's `SafeAreaProvider`, and inside a tab screen the provider context even
+ * carries the tab bar (83 pt on an iPhone with a home indicator), so the raw
+ * context is the wrong number here. `useWindowInsets` gives the window's
+ * insets; `top` sizes the iOS detent cap below. Both native hosts already lay
+ * the column out inside the safe area — SwiftUI keeps `RNHostView` 34 pt above
+ * the home indicator, and Material3's `ModalBottomSheet` applies the system
+ * bars as `contentWindowInsets`, so on an edge-to-edge Pixel the hosted column
+ * ends exactly at the navigation bar's top — so `bottom` is 0 on iOS and
+ * Android: padding it again pushed the footer up by the inset (measured 64 dp
+ * under Save instead of 40 on a Pixel 6a) and squeezed the body. Web is the
+ * kit's own overlay inside the React tree and keeps the window's bottom inset.
  */
 function useSheetInsets() {
-    const insets = useSafeAreaInsets();
-    const fallback = initialWindowMetrics?.insets;
-    return {
-        top: insets.top || fallback?.top || 0,
-        bottom: insets.bottom || fallback?.bottom || 0,
-        left: insets.left || fallback?.left || 0,
-        right: insets.right || fallback?.right || 0,
-    };
+    const insets = useWindowInsets();
+    return Platform.OS === "web" ? insets : { ...insets, bottom: 0 };
 }
 /**
  * Interactive (pull-down / backdrop) dismiss is off only when the consumer
@@ -160,7 +172,7 @@ function SheetCloseButton({ style }) {
                 {
                     width: spacing.xl,
                     height: spacing.xl,
-                    borderRadius: spacing.xl / 2,
+                    borderRadius: spacing.radiusFull,
                     alignItems: "center",
                     justifyContent: "center",
                     // Higher-contrast than `muted`: a solid `secondary` fill with a
@@ -176,7 +188,7 @@ function SheetCloseButton({ style }) {
 // ============================================================================
 // Root
 // ============================================================================
-function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
+function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, onDismissed, defaultOpen = false, snapPoints = DEFAULT_SNAP_POINTS, closeOnBackdropPress = true, children, }) {
     const maxSnapIndex = Math.max(snapPoints.length - 1, 0);
     const [state, dispatch] = useReducer(bottomSheetRootReducer, undefined, () => createInitialRootState(defaultOpen, maxSnapIndex));
     const isControlled = controlledOpen !== undefined;
@@ -201,6 +213,16 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         }
     }, [controlledOnOpenChange, isControlled, maxSnapIndex]);
     const toggle = useCallback(() => onOpenChange(!open), [onOpenChange, open]);
+    // Latest callback without re-creating the context value on every render.
+    // Synced after each commit (the sheet reports its dismissal from a native
+    // or DOM event, never during render) instead of written during render.
+    const onDismissedRef = useRef(onDismissed);
+    useLayoutEffect(() => {
+        onDismissedRef.current = onDismissed;
+    });
+    const notifyDismissed = useCallback(() => {
+        onDismissedRef.current?.();
+    }, []);
     const setScrollable = useCallback((scrollable) => {
         dispatch({ type: "setScrollable", scrollable });
     }, []);
@@ -225,6 +247,7 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         setHasHeader,
         hasFooter: state.hasFooter,
         setHasFooter,
+        notifyDismissed,
     }), [
         open,
         onOpenChange,
@@ -240,6 +263,7 @@ function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenC
         setHasHeader,
         state.hasFooter,
         setHasFooter,
+        notifyDismissed,
     ]);
     return (_jsx(BottomSheetContext.Provider, { value: contextValue, children: children }));
 }
@@ -267,11 +291,15 @@ function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
 function BottomSheetContent({ 
 // Accepted-but-ignored ergonomics props (platform owns these behaviors):
 swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDrag: _dismissKeyboardOnDrag, backgroundStyle: backgroundStyleOverride, style: styleOverride, testID, children, }) {
-    const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader } = useBottomSheetContext();
+    const { open, onOpenChange, snapPoints, snapIndex, setSnapIndex, hasHeader, notifyDismissed } = useBottomSheetContext();
     const { theme } = useTheme();
+    const sheetShape = useShape("sheet");
     const dismissDisabled = useDismissDisabled();
     const showClose = useShowClose();
     const { height: winH } = useWindowDimensions();
+    // Window insets (not the provider context, which reads zero inside the
+    // native sheet's window): the top inset sizes the iOS detent cap below.
+    const insets = useSheetInsets();
     // Tap-away keyboard dismissal inside the sheet. The native sheet (SwiftUI
     // `.sheet()` / Material `ModalBottomSheet`) hosts its RN children in a separate
     // native window via @expo/ui's `RNHostView`, OUTSIDE the app's
@@ -314,17 +342,30 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
     // with `imePadding()` and `RNHostView` re-reports its Compose size to the
     // shadow tree, which needs `expo-modules-core` >= 57.0.4 to always land
     // (expo/expo#47778) — see `warnIfBottomSheetHostDropsResize` above.
+    //
+    // The cap has to be the height SwiftUI really gives the sheet, not a share
+    // of the window. `@expo/ui` maps "50%" to `.fraction(0.5)`, a fraction of
+    // the *maximum* sheet height — the window minus the top safe-area inset
+    // minus UIKit's 10 pt gap above a `.large` sheet — and a numeric snap to
+    // `.height(n)`, clamped to that maximum. `@expo/ui` then pads the hosted
+    // column 16 pt below the native grabber whenever that grabber is shown. A
+    // cap of `fraction × window height` overshot by `fraction × (inset + 10) +
+    // 16` ≈ 52 pt on a Dynamic Island phone at 50 %, so the sheet clipped its
+    // last row on every such device.
+    const hasInteractiveHandle = containsHandle(children);
     const expandedSnap = snapPoints[snapPoints.length - 1];
-    const detentHeight = typeof expandedSnap === "number"
-        ? expandedSnap
-        : (parseFloat(expandedSnap) / 100) * winH;
+    const availableSheetHeight = winH - insets.top - IOS_SHEET_TOP_GAP;
+    const sheetHeight = typeof expandedSnap === "number"
+        ? Math.min(expandedSnap, availableSheetHeight)
+        : (parseFloat(expandedSnap) / 100) * availableSheetHeight;
+    const detentHeight = sheetHeight - (hasInteractiveHandle ? 0 : IOS_HOST_HANDLE_PADDING);
     // When there's no Header to host the X (so a close affordance is wanted —
     // dismiss is off, or the body scrolls), float one over the top-right corner.
     // A Header, when present, renders its own (see BottomSheetHeader).
     const showFloatingClose = showClose && !hasHeader;
-    const hasInteractiveHandle = containsHandle(children);
     const handleChange = (newIndex) => {
         // Native fires onChange(-1) on dismiss (swipe / backdrop / back button).
+        // The same close also reaches `handleNativeClose`, which owns `onDismissed`.
         if (newIndex < 0) {
             if (open)
                 onOpenChange(false);
@@ -332,21 +373,57 @@ swipeEnabled: _swipeEnabled, avoidKeyboard: _avoidKeyboard, dismissKeyboardOnDra
         }
         setSnapIndex(newIndex);
     };
+    // `onDismissed`: once per close. `@expo/ui` fires `onClose` once per close
+    // itself (post-dismissal on iOS and Android, see the header); the guard here
+    // is defensive and is re-armed when the sheet opens again. On web the close
+    // callback precedes the exit animation, so completion is the enclosing
+    // `<dialog>`'s `close` event, found from the content column's DOM node.
+    const columnRef = useRef(null);
+    const dismissedRef = useRef(false);
+    const cancelDismissWaitRef = useRef(null);
+    useEffect(() => {
+        if (open)
+            dismissedRef.current = false;
+    }, [open]);
+    useEffect(() => () => {
+        cancelDismissWaitRef.current?.();
+        cancelDismissWaitRef.current = null;
+    }, []);
+    const handleNativeClose = () => {
+        if (open)
+            onOpenChange(false);
+        if (dismissedRef.current)
+            return;
+        dismissedRef.current = true;
+        if (Platform.OS !== "web") {
+            notifyDismissed();
+            return;
+        }
+        cancelDismissWaitRef.current?.();
+        cancelDismissWaitRef.current = awaitDialogClose(columnRef.current, () => {
+            cancelDismissWaitRef.current = null;
+            notifyDismissed();
+        });
+    };
     return (_jsx(NativeBottomSheet, { index: index, snapPoints: snapPoints, 
         // The native indicator lives outside the hosted RN tree and cannot
         // receive JS presses. Hide it only when the compound Handle supplies the
         // interactive replacement; sheets without Handle retain native chrome.
-        handleComponent: hasInteractiveHandle ? null : undefined, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: () => {
-            if (open)
-                onOpenChange(false);
-        }, 
+        handleComponent: hasInteractiveHandle ? null : undefined, enablePanDownToClose: !dismissDisabled, onChange: handleChange, onClose: handleNativeClose, 
         // Themes the scrim/background on web (vaul), Android (containerColor),
         // and iOS (presentationBackground). Flattened so native readers that
         // expect a plain object (not a style array) keep working.
         backgroundStyle: StyleSheet.flatten([
             { backgroundColor: theme.colors.card },
+            // Host-app `setShape({ sheet })`: the top corners, where the platform
+            // lets the sheet draw them (web's drawer, Android). iOS system sheets
+            // keep the system corner radius.
+            sheetShape?.borderRadius !== undefined && {
+                borderTopLeftRadius: sheetShape.borderRadius,
+                borderTopRightRadius: sheetShape.borderRadius,
+            },
             backgroundStyleOverride,
-        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { testID: testID, style: [
+        ]), children: _jsx(TextColorContext.Provider, { value: theme.colors.foreground, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(View, { ref: columnRef, testID: testID, style: [
                         // No fill of its own: the native surface (`backgroundStyle`) is
                         // the sheet's only background. On iOS the hosted column starts
                         // 16 pt below the sheet's top edge when the native grabber is

package/dist/components/Button.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentType } from "react";
-import { PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
-import { TextProps } from "./StyledText";
-import { type IconProps } from "./Icon";
+import { Pressable, PressableProps, PressableStateCallbackType, DimensionValue, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { TextProps } from "./StyledText.js";
+import { type IconProps } from "./Icon.js";
 /**
  * Button variants
  */
@@ -27,6 +27,12 @@ export interface ButtonAccessoryProps {
     disabled?: boolean;
 }
 export interface ButtonProps extends PressableProps {
+    /**
+     * Reaches the underlying `Pressable`. React 19 passes `ref` as a prop; the
+     * button composes it with its own host ref (web `aria-disabled`), so
+     * `asChild` slots and consumers keep theirs.
+     */
+    ref?: React.Ref<React.ComponentRef<typeof Pressable>>;
     /**
      * Text which is looked up via i18n.
      */
@@ -82,13 +88,23 @@ export interface ButtonProps extends PressableProps {
      */
     children?: React.ReactNode;
     /**
-     * disabled prop, accessed directly for declarative styling reasons.
+     * Blocks presses: no `onPress`, no scale, no haptic, dimmed, and out of the
+     * web tab order. To announce and dim a button that must stay pressable so
+     * the press can say why the action is unavailable ("Add a title first"),
+     * pass `aria-disabled` (or `accessibilityState={{ disabled: true }}`)
+     * instead — ARIA's contract: announced as disabled, still focusable, still
+     * fires `onPress`.
      */
     disabled?: boolean;
     /**
      * An optional style override for the disabled state
      */
     disabledStyle?: StyleProp<ViewStyle>;
+    /**
+     * Haptic on press-in. Omit it to follow the provider-level `haptics` setting
+     * (a light tap only under `"all"`); `true` always taps, `false` never does.
+     */
+    haptic?: boolean;
     /**
      * Whether to show shadow.
      * @default true for the `default` preset, `false` for every other preset.

package/dist/components/Button.js

@@ -1,17 +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,
@@ -32,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
  *
@@ -73,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");
@@ -129,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);
@@ -169,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;
@@ -182,7 +195,10 @@ 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
+    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: [
@@ -205,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, { ...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: [
+                            ], 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,
@@ -219,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
@@ -287,7 +304,7 @@ const createStyles = (theme, size) => {
         },
         buttonOutline: {
             backgroundColor: "transparent",
-            borderWidth: 1,
+            borderWidth: OUTLINE_BORDER_WIDTH,
             borderColor: theme.colors.input,
         },
         buttonGhost: {
@@ -313,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,
@@ -337,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);