@mrmeg/expo-ui 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to `@mrmeg/expo-ui` are documented here. This project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.15.0]
+
+### Added
+
+- **New composition primitives: `SectionHeader`, `StatCard`, and `Item`.**
+  `EmptyState` was also upgraded with richer layout options as part of the
+  same pass.
+- **Typography system.** The package now loads Inter with real weights and a
+  letter-spacing scale via `useResources`, replacing synthetic bolding.
+- Motion tokens, dual-layer shadow tokens, and softer radii in the design
+  tokens.
+
+### Changed
+
+- Interaction sweep across components: press feedback, focus rings, and
+  shadow adoption.
+- Updated all `@rn-primitives/*` dependencies from `~1.4.0` to `~1.5.2`,
+  picking up upstream's native accessibility overhaul: menus, popovers, and
+  dialogs are now usable with VoiceOver/TalkBack (focus moves into opened
+  content, escape gestures dismiss), toggles and switches announce the
+  correct state, and `nativeID` plumbing that broke Reanimated exiting
+  animations was removed.
+
 ## [0.14.0]
 
 ### Changed

package/README.md

@@ -1,6 +1,6 @@
 # @mrmeg/expo-ui
 
-Reusable Expo and React Native UI primitives shared by the template and consumer apps. The package does not ship font files; web consumers load Lato from Google Fonts and native consumers use platform sans-serif fallbacks.
+Reusable Expo and React Native UI primitives shared by the template and consumer apps. Typography is Inter: native consumers load four static Inter weights via `@expo-google-fonts/inter`, web consumers load Inter from Google Fonts.
 
 This package is public for installability, reuse across MrMeg projects, and
 discoverability. It is a personal reusable Expo / React Native design-system
@@ -394,21 +394,21 @@ export default function RootLayout() {
 
 ## Fonts
 
-This package does not ship Lato `.ttf` files or other font binaries.
+Typography is Inter across every platform, in four static weights (`Inter_400Regular`, `Inter_500Medium`, `Inter_600SemiBold`, `Inter_700Bold`) from `@expo-google-fonts/inter` — a package dependency, so consumers get it automatically.
 
-On web, `useResources()` injects the Google Fonts Lato stylesheet after hydration if the app has not already added it. For better first paint in Expo Router web apps, add the links in app-owned `app/+html.tsx`:
+On native, `useResources()` loads the four static weights so `StyledText`'s `light`–`bold` range resolves to real font files instead of a faked OS bold. On web, `useResources()` injects a single Google Fonts Inter stylesheet (covering all four weights) after hydration if the app has not already added it; weight differentiation on web comes from a numeric `fontWeight` alongside the shared `"Inter"` CSS family. For better first paint in Expo Router web apps, add the links in app-owned `app/+html.tsx`:
 
 ```tsx
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
 <link
-  id="mrmeg-expo-ui-lato"
+  id="mrmeg-expo-ui-inter"
   rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
 />
 ```
 
-On native, the package uses platform sans-serif fallbacks. `useResources()` still loads `Feather.font` from the package-managed `@expo/vector-icons` dependency for icon rendering.
+`useResources()` also loads `Feather.font` from the package-managed `@expo/vector-icons` dependency for icon rendering.
 
 ## Package Checks
 

package/dist/components/Accordion.d.ts

@@ -43,7 +43,7 @@ declare function AccordionItem({ children, value, style: styleOverride, ...props
  * Clickable header that expands/collapses the content
  * Includes animated chevron icon
  */
-declare function AccordionTrigger({ children, style: styleOverride, ...props }: AccordionPrimitive.TriggerProps & {
+declare function AccordionTrigger({ children, style: styleOverride, disabled, ...props }: AccordionPrimitive.TriggerProps & {
     children?: React.ReactNode;
 } & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react").JSX.Element;
 /**

package/dist/components/Accordion.js

@@ -5,6 +5,7 @@ import { Icon } from "./Icon.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import { spacing } from "../constants/spacing.js";
 import * as AccordionPrimitive from "@rn-primitives/accordion";
 function normalizeSingleValue(value) {
@@ -96,11 +97,16 @@ const Trigger = Platform.OS === "web" ? View : Pressable;
  * Clickable header that expands/collapses the content
  * Includes animated chevron icon
  */
-function AccordionTrigger({ children, style: styleOverride, ...props }) {
+function AccordionTrigger({ children, style: styleOverride, disabled, ...props }) {
     const { theme } = useTheme();
     const reduceMotion = useReducedMotion();
     const { isExpanded } = AccordionPrimitive.useItemContext();
     const rotation = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
     useEffect(() => {
         const target = isExpanded ? 1 : 0;
         Animated.timing(rotation, {
@@ -119,24 +125,24 @@ function AccordionTrigger({ children, style: styleOverride, ...props }) {
             },
         ],
     };
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(AccordionPrimitive.Trigger, { ...props, asChild: true, children: _jsxs(Trigger, { style: [
-                            {
-                                flexDirection: "row",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                                gap: spacing.md,
-                                borderRadius: spacing.radiusMd,
-                                paddingVertical: spacing.md,
-                                ...(Platform.OS === "web" && {
-                                    cursor: "pointer",
-                                    userSelect: "none",
-                                }),
-                            },
-                            // Spread array styles from primitives to prevent nested arrays on web
-                            ...(styleOverride && typeof styleOverride !== "function"
-                                ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
-                                : []),
-                        ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }));
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(AccordionPrimitive.Header, { children: _jsx(Animated.View, { style: scaleStyle, children: _jsx(AccordionPrimitive.Trigger, { ...props, disabled: disabled, asChild: true, children: _jsxs(Trigger, { onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: [
+                                {
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    gap: spacing.md,
+                                    borderRadius: spacing.radiusMd,
+                                    paddingVertical: spacing.md,
+                                    ...(Platform.OS === "web" && {
+                                        cursor: "pointer",
+                                        userSelect: "none",
+                                    }),
+                                },
+                                // Spread array styles from primitives to prevent nested arrays on web
+                                ...(styleOverride && typeof styleOverride !== "function"
+                                    ? (Array.isArray(styleOverride) ? styleOverride : [styleOverride])
+                                    : []),
+                            ], children: [_jsx(_Fragment, { children: children }), _jsx(Animated.View, { style: chevronStyle, children: _jsx(Icon, { name: "chevron-down", size: 16, color: theme.colors.textDim, decorative: true }) })] }) }) }) }) }) }));
 }
 /**
  * Accordion Content Component

package/dist/components/Badge.js

@@ -30,9 +30,13 @@ function Badge({ children, text, variant = "default", style: styleOverride }) {
     ];
     const normalizedChildren = React.Children.toArray(badgeContent);
     const hasOnlyTextChildren = normalizedChildren.every((child) => typeof child === "string" || typeof child === "number");
-    const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(badgeContent, (child) => {
+    // size="sm" + fontWeight="medium" match this badge's fontSize/lineHeight/weight
+    // (12/18/500) via the shared StyledText scale — including its "sm" letter
+    // spacing and correct native weight-file resolution — instead of a hand-rolled
+    // fontSize/fontWeight pair.
+    const content = hasOnlyTextChildren ? (_jsx(StyledText, { selectable: false, size: "sm", fontWeight: "medium", style: textStyle, children: normalizedChildren.join("") })) : (React.Children.map(badgeContent, (child) => {
         if (typeof child === "string" || typeof child === "number") {
-            return _jsx(StyledText, { selectable: false, style: textStyle, children: child });
+            return _jsx(StyledText, { selectable: false, size: "sm", fontWeight: "medium", style: textStyle, children: child });
         }
         return child;
     }));
@@ -67,9 +71,6 @@ const createStyles = (theme) => StyleSheet.create({
         backgroundColor: theme.colors.destructive,
     },
     text: {
-        fontSize: 12,
-        fontWeight: "500",
-        lineHeight: 18,
         userSelect: "none",
     },
 });

package/dist/components/BottomSheet.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, use, useCallback, useEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
-import { View, Pressable, StyleSheet, ScrollView, Platform, useWindowDimensions, } from "react-native";
+import { View, Pressable, StyleSheet, ScrollView, Platform, Animated, useWindowDimensions, } from "react-native";
 import { BottomSheet as NativeBottomSheet } from "@expo/ui/community/bottom-sheet";
 import { KeyboardController } from "react-native-keyboard-controller";
 import { useSafeAreaInsets, initialWindowMetrics } from "react-native-safe-area-context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { Icon } from "./Icon.js";
 import { dismissKeyboardFocusedInput, hasKeyboardFocusedInput, subscribeKeyboardFocus, } from "./keyboardFocusRegistry.js";
@@ -140,24 +141,25 @@ function useShowClose() {
 function SheetCloseButton({ style }) {
     const { onOpenChange } = useBottomSheetContext();
     const { theme } = useTheme();
-    return (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", onPress: () => onOpenChange(false), hitSlop: spacing.sm, style: ({ pressed }) => [
-            {
-                width: spacing.xl,
-                height: spacing.xl,
-                borderRadius: spacing.xl / 2,
-                alignItems: "center",
-                justifyContent: "center",
-                // Higher-contrast than `muted`: a solid `secondary` fill with a
-                // bordered edge so the control reads clearly against the card, and a
-                // full-strength `foreground` glyph instead of the faint muted one.
-                backgroundColor: theme.colors.secondary,
-                borderWidth: 1,
-                borderColor: theme.colors.border,
-                opacity: pressed ? 0.7 : 1,
-            },
-            Platform.OS === "web" && { cursor: "pointer" },
-            style,
-        ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        scaleTo: 0.96,
+    });
+    return (_jsx(Animated.View, { style: [style, scaleStyle], children: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Close", onPress: () => onOpenChange(false), onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, hitSlop: spacing.sm, style: [
+                {
+                    width: spacing.xl,
+                    height: spacing.xl,
+                    borderRadius: spacing.xl / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    // Higher-contrast than `muted`: a solid `secondary` fill with a
+                    // bordered edge so the control reads clearly against the card, and a
+                    // full-strength `foreground` glyph instead of the faint muted one.
+                    backgroundColor: theme.colors.secondary,
+                    borderWidth: 1,
+                    borderColor: theme.colors.border,
+                },
+                Platform.OS === "web" && { cursor: "pointer" },
+            ], children: _jsx(Icon, { name: "x", size: 22, color: "text" }) }) }));
 }
 // ============================================================================
 // Keyboard dismiss overlay — tap-away dismissal inside the sheet

package/dist/components/Button.d.ts

@@ -90,7 +90,8 @@ export interface ButtonProps extends PressableProps {
      */
     disabledStyle?: StyleProp<ViewStyle>;
     /**
-     * Whether to show shadow
+     * Whether to show shadow.
+     * @default true for the `default` preset, `false` for every other preset.
      */
     withShadow?: boolean;
     /**

package/dist/components/Button.js

@@ -70,11 +70,15 @@ 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 = false, 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, preset = "default", size = "md", loading = false, fullWidth = false, onFocus, onBlur, onPressIn, onPressOut, ...rest } = props;
     const { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, size), [theme, size]);
-    const shadowStyle = getShadowStyle("base");
+    const shadowStyle = getShadowStyle("subtle");
     const sizeConfig = SIZE_CONFIGS[size];
+    // Filled (`default`) buttons float by default; ghost/outline/link stay flat
+    // (transparent background reads oddly with a shadow), and destructive/secondary
+    // keep the old opt-in behavior. Callers can still override via `withShadow`.
+    const withShadow = withShadowProp ?? preset === "default";
     const focusRingStyle = getFocusRingStyle();
     // Pre-compute background color for contrast calculation
     // Always flatten to handle both array styles (from Slot) and RegisteredStyle
@@ -278,9 +282,15 @@ const createStyles = (theme, size) => {
             width: "100%",
         },
         text: {
-            fontFamily: fontFamilies.sansSerif.regular,
+            // Button labels render at medium weight. On native, the family itself
+            // carries the weight (a real static Inter_500Medium file) — pairing it
+            // with a numeric fontWeight would faux-bold on top of that file. Web
+            // shares one "Inter" family across weights, so it needs the numeric
+            // fontWeight to pick the right @font-face variant. (Same rule as
+            // StyledText's getFontFamilyWeight / WEB_FONT_WEIGHTS.)
+            fontFamily: fontFamilies.sansSerif.medium,
             fontSize: sizeConfig.fontSize,
-            fontWeight: "500",
+            ...(Platform.OS === "web" && { fontWeight: "500" }),
             textAlign: "center",
             lineHeight: sizeConfig.fontSize * 1.4,
             flexShrink: 0,

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
@@ -7,6 +7,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -15,9 +16,34 @@ const SIZE_CONFIGS = {
     lg: { size: 24, iconSize: 20, strokeWidth: 3.5 },
 };
 function Checkbox({ size = "md", label, indeterminate = false, error = false, style: styleOverride, labelStyle, required = false, checked, onCheckedChange, disabled, ...props }) {
-    const { theme, getContrastingColor } = useTheme();
+    const { theme, getContrastingColor, getFocusRingStyle } = useTheme();
     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);
+    };
     // Simple fast opacity for the checkmark icon
     const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
     const isVisuallyChecked = !!checked || indeterminate;
@@ -45,22 +71,23 @@ 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(CheckboxPrimitive.Root, { ...props, checked: checked, onCheckedChange: wrappedOnCheckedChange, disabled: disabled, style: {
-            ...styles.box,
-            borderColor,
-            backgroundColor: isVisuallyChecked ? theme.colors.primary : theme.colors.background,
-            width: sizeConfig.size,
-            height: sizeConfig.size,
-            opacity: disabled ? 0.5 : 1,
-            ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
-            ...(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 })) }) }) }));
+    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,
+                ...(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 })) }) }) }) }));
     // If no label, return just the checkbox
     if (!label) {
         return checkboxElement;
@@ -78,7 +105,10 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
 }
 const styles = StyleSheet.create({
     box: {
-        borderRadius: spacing.radiusSm,
+        // radiusXs (not radiusSm) — at the checkbox's 16-24px sizes, radiusSm
+        // post-rebase (8px) reads as over-rounded; radiusXs keeps the same
+        // proportion the box had before the radius rebase.
+        borderRadius: spacing.radiusXs,
         borderWidth: 1,
         justifyContent: "center",
         alignItems: "center",

package/dist/components/Collapsible.d.ts

@@ -41,7 +41,7 @@ declare function Collapsible({ children, ...props }: CollapsibleProps): React.JS
  * ```
  */
 type CollapsibleTriggerProps = CollapsiblePrimitive.TriggerProps;
-declare function CollapsibleTrigger({ style: styleOverride, ...props }: CollapsibleTriggerProps): React.JSX.Element;
+declare function CollapsibleTrigger({ style: styleOverride, disabled, ...props }: CollapsibleTriggerProps): React.JSX.Element;
 /**
  * CollapsibleContent Component
  * The content that expands and collapses

package/dist/components/Collapsible.js

@@ -1,28 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { spacing } from "../constants/spacing.js";
 import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.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, ...props }) {
+function CollapsibleTrigger({ style: styleOverride, disabled, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(CollapsiblePrimitive.Trigger, { ...props, style: {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingVertical: spacing.sm,
-                    ...(Platform.OS === "web" && {
-                        cursor: "pointer",
-                        outlineStyle: "none",
-                        userSelect: "none",
-                    }),
-                    ...(styleOverride && typeof styleOverride !== "function"
-                        ? StyleSheet.flatten(styleOverride)
-                        : {}),
-                } }) }) }));
+    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: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        paddingVertical: spacing.sm,
+                        ...(Platform.OS === "web" && {
+                            cursor: "pointer",
+                            outlineStyle: "none",
+                            userSelect: "none",
+                        }),
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? StyleSheet.flatten(styleOverride)
+                            : {}),
+                    } }) }) }) }));
 }
 function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }) {
     return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Content, { ...props, forceMount: forceMount, children: _jsx(View, { style: {

package/dist/components/Drawer.js

@@ -8,6 +8,7 @@ import { useTheme } from "../hooks/useTheme.js";
 import { useDimensions } from "../hooks/useDimensions.js";
 import { shouldUseNativeDriver } from "../lib/animations.js";
 import { spacing } from "../constants/spacing.js";
+import { durations } from "../constants/motion.js";
 import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { SansSerifBoldText } from "./StyledText.js";
@@ -263,12 +264,12 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
             const animation = Animated.parallel([
                 Animated.timing(translateX, {
                     toValue: 0,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
                 Animated.timing(backdropOpacity, {
                     toValue: 1,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
             ]);
@@ -284,12 +285,12 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
             const animation = Animated.parallel([
                 Animated.timing(translateX, {
                     toValue: closedPosition,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
                 Animated.timing(backdropOpacity, {
                     toValue: 0,
-                    duration: 200,
+                    duration: durations.normal,
                     useNativeDriver: shouldUseNativeDriver,
                 }),
             ]);
@@ -350,7 +351,7 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                         }),
                         Animated.timing(backdropOpacity, {
                             toValue: 0,
-                            duration: 200,
+                            duration: durations.normal,
                             useNativeDriver: shouldUseNativeDriver,
                         }),
                     ]).start(() => {
@@ -369,7 +370,7 @@ function DrawerOverlayContent({ swipeEnabled = true, swipeThreshold = 0.3, veloc
                         }),
                         Animated.timing(backdropOpacity, {
                             toValue: 1,
-                            duration: 150,
+                            duration: durations.fast,
                             useNativeDriver: shouldUseNativeDriver,
                         }),
                     ]).start();
@@ -488,7 +489,7 @@ swipeEnabled: _swipeEnabled, swipeThreshold: _swipeThreshold, velocityThreshold:
         if (previousExpanded !== null) {
             Animated.timing(widthAnim, {
                 toValue: targetWidth,
-                duration: 180,
+                duration: durations.normal,
                 useNativeDriver: false,
             }).start();
         }

package/dist/components/DropdownMenu.d.ts

@@ -46,7 +46,7 @@ declare const DropdownMenuRadioGroup: {
  * props over slot props), so this only fills the gap when none is set.
  */
 type DropdownMenuTriggerProps = DropdownMenuPrimitive.TriggerProps;
-declare function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps): React.JSX.Element;
+declare function DropdownMenuTrigger({ disabled, ...props }: DropdownMenuTriggerProps): React.JSX.Element;
 /**
  * DropdownMenuSubTrigger Component
  * Trigger for sub-menus with automatic chevron icon