@mrmeg/expo-ui 0.14.0 → 0.15.0

package/dist/components/DropdownMenu.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Animated, Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -17,8 +18,13 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 // Platform-specific overlay
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
-function DropdownMenuTrigger({ ...props }) {
-    return _jsx(DropdownMenuPrimitive.Trigger, { accessibilityRole: "button", ...props });
+function DropdownMenuTrigger({ disabled, ...props }) {
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(DropdownMenuPrimitive.Trigger, { accessibilityRole: "button", disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut }) }));
 }
 function DropdownMenuSubTrigger({ inset = false, children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
@@ -90,68 +96,83 @@ function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost
 }
 function DropdownMenuItem({ inset = false, variant = "default", style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(DropdownMenuPrimitive.Item, { ...props, style: {
-                    ...styles.item,
-                    ...(Platform.OS === "web" && {
-                        cursor: props.disabled ? "not-allowed" : "pointer",
-                        outlineStyle: "none",
-                        userSelect: "none",
-                    }),
-                    ...(props.disabled && { opacity: 0.5 }),
-                    ...(inset && { paddingLeft: spacing.xl }),
-                    ...(styleOverride && typeof styleOverride !== "function"
-                        ? StyleSheet.flatten(styleOverride)
-                        : {}),
-                } }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.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(DropdownMenuPrimitive.Item, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        ...styles.item,
+                        ...(Platform.OS === "web" && {
+                            cursor: props.disabled ? "not-allowed" : "pointer",
+                            outlineStyle: "none",
+                            userSelect: "none",
+                        }),
+                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(inset && { paddingLeft: spacing.xl }),
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? StyleSheet.flatten(styleOverride)
+                            : {}),
+                    } }) }) }) }));
 }
 function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, style: {
-                    ...styles.indicatorItem,
-                    ...(Platform.OS === "web" && {
-                        cursor: props.disabled ? "not-allowed" : "pointer",
-                        outlineStyle: "none",
-                        userSelect: "none",
-                    }),
-                    ...(props.disabled && { opacity: 0.5 }),
-                    ...(styleOverride && typeof styleOverride !== "function"
-                        ? StyleSheet.flatten(styleOverride)
-                        : {}),
-                }, children: [_jsx(View, { style: {
-                            position: "absolute",
-                            left: spacing.sm,
-                            height: 14,
-                            width: 14,
-                            alignItems: "center",
-                            justifyContent: "center",
-                        }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), typeof children === "function" ? null : children] }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        ...styles.indicatorItem,
+                        ...(Platform.OS === "web" && {
+                            cursor: props.disabled ? "not-allowed" : "pointer",
+                            outlineStyle: "none",
+                            userSelect: "none",
+                        }),
+                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? StyleSheet.flatten(styleOverride)
+                            : {}),
+                    }, children: [_jsx(View, { style: {
+                                position: "absolute",
+                                left: spacing.sm,
+                                height: 14,
+                                width: 14,
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), typeof children === "function" ? null : children] }) }) }) }));
 }
 function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, style: {
-                    ...styles.indicatorItem,
-                    ...(Platform.OS === "web" && {
-                        cursor: props.disabled ? "not-allowed" : "pointer",
-                        outlineStyle: "none",
-                        userSelect: "none",
-                    }),
-                    ...(props.disabled && { opacity: 0.5 }),
-                    ...(styleOverride && typeof styleOverride !== "function"
-                        ? StyleSheet.flatten(styleOverride)
-                        : {}),
-                }, children: [_jsx(View, { style: {
-                            position: "absolute",
-                            left: spacing.sm,
-                            height: 14,
-                            width: 14,
-                            alignItems: "center",
-                            justifyContent: "center",
-                        }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(View, { style: {
-                                    backgroundColor: theme.colors.text,
-                                    height: 8,
-                                    width: 8,
-                                    borderRadius: 4,
-                                } }) }) }), typeof children === "function" ? null : children] }) }) }));
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!props.disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(Animated.View, { style: scaleStyle, children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut, style: {
+                        ...styles.indicatorItem,
+                        ...(Platform.OS === "web" && {
+                            cursor: props.disabled ? "not-allowed" : "pointer",
+                            outlineStyle: "none",
+                            userSelect: "none",
+                        }),
+                        ...(props.disabled && { opacity: 0.5 }),
+                        ...(styleOverride && typeof styleOverride !== "function"
+                            ? StyleSheet.flatten(styleOverride)
+                            : {}),
+                    }, children: [_jsx(View, { style: {
+                                position: "absolute",
+                                left: spacing.sm,
+                                height: 14,
+                                width: 14,
+                                alignItems: "center",
+                                justifyContent: "center",
+                            }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(View, { style: {
+                                        backgroundColor: theme.colors.text,
+                                        height: 8,
+                                        width: 8,
+                                        borderRadius: 4,
+                                    } }) }) }), typeof children === "function" ? null : children] }) }) }) }));
 }
 function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
     const { theme } = useTheme();

package/dist/components/EmptyState.d.ts

@@ -21,6 +21,12 @@ export interface EmptyStateProps {
     style?: StyleProp<ViewStyle>;
     /** Custom children below description / above action */
     children?: React.ReactNode;
+    /**
+     * Wraps the state in a dashed-border container with generous padding —
+     * the "empty slot" pattern. @default false (preserves existing call
+     * sites, which render without a border).
+     */
+    bordered?: boolean;
 }
 /**
  * EmptyState Component
@@ -39,4 +45,4 @@ export interface EmptyStateProps {
  * />
  * ```
  */
-export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, }: EmptyStateProps): React.JSX.Element;
+export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, bordered, }: EmptyStateProps): React.JSX.Element;

package/dist/components/EmptyState.js

@@ -23,11 +23,12 @@ import { spacing } from "../constants/spacing.js";
  * />
  * ```
  */
-export function EmptyState({ icon, iconSize = 48, title, description, actionLabel, onAction, actionPreset = "default", style, children, }) {
+export function EmptyState({ icon, iconSize = spacing.iconMd, title, description, actionLabel, onAction, actionPreset = "default", style, children, bordered = false, }) {
     const { theme } = useTheme();
     const styles = useMemo(() => createStyles(theme), [theme]);
-    return (_jsxs(View, { style: [styles.container, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
+    return (_jsxs(View, { style: [styles.container, bordered && styles.bordered, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { selectable: false, size: "lg", style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { selectable: false, size: "base", style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, text: actionLabel, style: styles.action }))] }));
 }
+const MEDIA_SIZE = 56;
 const createStyles = (theme) => StyleSheet.create({
     container: {
         alignItems: "center",
@@ -35,19 +36,34 @@ const createStyles = (theme) => StyleSheet.create({
         paddingVertical: spacing.xxl,
         paddingHorizontal: spacing.lg,
     },
+    bordered: {
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: theme.colors.border,
+        borderRadius: spacing.radiusLg,
+        padding: spacing.xl,
+    },
     iconWrapper: {
+        width: MEDIA_SIZE,
+        height: MEDIA_SIZE,
+        // radiusMd here — the tokens/radius-rebase spec (which would bump this
+        // to radiusLg) hasn't landed on this branch.
+        borderRadius: spacing.radiusMd,
+        backgroundColor: theme.colors.muted,
+        alignItems: "center",
+        justifyContent: "center",
         marginBottom: spacing.md,
     },
     title: {
-        fontSize: 18,
-        lineHeight: 24,
+        // fontSize/lineHeight/letterSpacing now come from StyledText's "lg"
+        // token (18/27/-0.09) via the size prop below, so this picks up the
+        // shared letter-spacing scale instead of a hardcoded 0.
         color: theme.colors.foreground,
         textAlign: "center",
-        letterSpacing: 0,
     },
     description: {
-        fontSize: 14,
-        lineHeight: 20,
+        // fontSize/lineHeight/letterSpacing now come from StyledText's "base"
+        // token (14/21/0) via the size prop below.
         color: theme.colors.mutedForeground,
         textAlign: "center",
         marginTop: spacing.sm,

package/dist/components/InputOTP.js

@@ -99,8 +99,12 @@ function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPr
                 },
             ], children: _jsx(StyledText, { selectable: false, style: {
                     fontSize: CELL_FONT_SIZE,
-                    fontWeight: CELL_FONT_WEIGHT,
-                    fontFamily: fontFamilies.sansSerif.regular,
+                    // Semibold weight: the family carries it on native (a real static
+                    // Inter_600SemiBold 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 WEB_FONT_WEIGHTS).
+                    ...(Platform.OS === "web" && { fontWeight: CELL_FONT_WEIGHT }),
+                    fontFamily: fontFamilies.sansSerif.semibold,
                     color: theme.colors.text,
                     textAlign: "center",
                     lineHeight: CELL_FONT_SIZE * 1.2,

package/dist/components/Item.d.ts

@@ -0,0 +1,93 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type TextProps } from "./StyledText";
+import { type IconName, type ThemeColorName } from "./Icon";
+export interface ItemProps {
+    children?: React.ReactNode;
+    /** Makes the row pressable with scale feedback (mirrors Card's pattern). */
+    onPress?: () => void;
+    /** Disables press handling when `onPress` is set. */
+    disabled?: boolean;
+    /** Renders a hairline divider below the row, inset past the media slot. */
+    separator?: boolean;
+    /** Custom style override for the row. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Item
+ *
+ * Grouped-list row container: `spacing.md` padding and gap, a comfortable
+ * 44pt min height, and an optional pressable scale interaction. Compose
+ * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
+ * `ItemActions`.
+ *
+ * @example
+ * ```tsx
+ * <Item onPress={() => {}} separator>
+ *   <ItemMedia icon="bell" />
+ *   <ItemContent>
+ *     <ItemTitle>Notifications</ItemTitle>
+ *     <ItemDescription>Push, email, and SMS alerts</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export declare function Item({ children, onPress, disabled, separator, style }: ItemProps): React.JSX.Element;
+export interface ItemMediaProps {
+    /** Square size of the media slot in pixels. @default 40 */
+    size?: number;
+    /** Icon to center in the slot. Ignored if `children` is provided. */
+    icon?: IconName;
+    /** Icon color — theme color name or literal. @default "mutedForeground" */
+    iconColor?: string | ThemeColorName;
+    /** Icon size in pixels. @default 20 */
+    iconSize?: number;
+    /** Arbitrary content (e.g. an avatar image) rendered instead of the icon. */
+    children?: React.ReactNode;
+    /** Custom style override. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemMedia
+ *
+ * Fixed-size leading slot for an `Item` row — an icon centered in a rounded
+ * square by default, or arbitrary content (e.g. an avatar) via `children`.
+ */
+export declare function ItemMedia({ size, icon, iconColor, iconSize, children, style }: ItemMediaProps): React.JSX.Element;
+export interface ItemContentProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemContent
+ *
+ * Flex-1 vertical stack for an `Item` row's title/description (or any other
+ * content). Sits between `ItemMedia` and `ItemActions`.
+ */
+export declare function ItemContent({ children, style }: ItemContentProps): React.JSX.Element;
+/**
+ * ItemTitle
+ *
+ * `Item` row title — label weight (medium) at body size.
+ */
+export declare function ItemTitle({ children, style, ...props }: TextProps): React.JSX.Element;
+/**
+ * ItemDescription
+ *
+ * `Item` row secondary line — caption size in the muted `textDim` color.
+ */
+export declare function ItemDescription({ children, style, ...props }: TextProps): React.JSX.Element;
+export interface ItemActionsProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * ItemActions
+ *
+ * Trailing row for an `Item` — centers and gaps its children (a chevron
+ * icon, a `Switch`, value text, etc.).
+ */
+export declare function ItemActions({ children, style }: ItemActionsProps): React.JSX.Element;

package/dist/components/Item.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Pressable, StyleSheet, Platform, Animated, } from "react-native";
+import { StyledText, CaptionText } from "./StyledText.js";
+import { Icon } from "./Icon.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { useScalePress } from "../hooks/useScalePress.js";
+import { spacing } from "../constants/spacing.js";
+// Default ItemMedia footprint (see ItemMedia's `size` prop) — used to inset
+// the optional separator past the media slot without needing a context.
+const DEFAULT_MEDIA_SIZE = 40;
+const SEPARATOR_INSET = spacing.md + DEFAULT_MEDIA_SIZE + spacing.md;
+/**
+ * Item
+ *
+ * Grouped-list row container: `spacing.md` padding and gap, a comfortable
+ * 44pt min height, and an optional pressable scale interaction. Compose
+ * with `ItemMedia`, `ItemContent` (+ `ItemTitle`/`ItemDescription`), and
+ * `ItemActions`.
+ *
+ * @example
+ * ```tsx
+ * <Item onPress={() => {}} separator>
+ *   <ItemMedia icon="bell" />
+ *   <ItemContent>
+ *     <ItemTitle>Notifications</ItemTitle>
+ *     <ItemDescription>Push, email, and SMS alerts</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions>
+ *     <Icon name="chevron-right" size={18} color="mutedForeground" />
+ *   </ItemActions>
+ * </Item>
+ * ```
+ */
+export function Item({ children, onPress, disabled, separator = false, style }) {
+    const { theme } = useTheme();
+    const { animatedStyle, pressHandlers } = useScalePress({
+        disabled: !onPress || !!disabled,
+        scaleTo: 0.98,
+        haptic: false,
+    });
+    const row = (_jsx(View, { style: [styles.row, style], children: children }));
+    const content = separator ? (_jsxs(View, { children: [row, _jsx(View, { style: [styles.separator, { backgroundColor: theme.colors.border }] })] })) : (row);
+    if (onPress) {
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityState: { disabled: !!disabled }, ...pressHandlers, style: Platform.OS === "web" ? { cursor: "pointer" } : undefined, children: _jsx(Animated.View, { style: animatedStyle, children: content }) }));
+    }
+    return content;
+}
+/**
+ * ItemMedia
+ *
+ * Fixed-size leading slot for an `Item` row — an icon centered in a rounded
+ * square by default, or arbitrary content (e.g. an avatar) via `children`.
+ */
+export function ItemMedia({ size = DEFAULT_MEDIA_SIZE, icon, iconColor = "mutedForeground", iconSize = 20, children, style }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                width: size,
+                height: size,
+                borderRadius: spacing.radiusMd,
+                backgroundColor: theme.colors.muted,
+                alignItems: "center",
+                justifyContent: "center",
+            },
+            style,
+        ], children: children ?? (!!icon && _jsx(Icon, { name: icon, size: iconSize, color: iconColor, decorative: true })) }));
+}
+/**
+ * ItemContent
+ *
+ * Flex-1 vertical stack for an `Item` row's title/description (or any other
+ * content). Sits between `ItemMedia` and `ItemActions`.
+ */
+export function ItemContent({ children, style }) {
+    return _jsx(View, { style: [styles.content, style], children: children });
+}
+/**
+ * ItemTitle
+ *
+ * `Item` row title — label weight (medium) at body size.
+ */
+export function ItemTitle({ children, style, ...props }) {
+    return (_jsx(StyledText, { size: "body", fontWeight: "medium", ...props, style: style, children: children }));
+}
+/**
+ * ItemDescription
+ *
+ * `Item` row secondary line — caption size in the muted `textDim` color.
+ */
+export function ItemDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(CaptionText, { ...props, style: [{ color: theme.colors.textDim }, style], children: children }));
+}
+/**
+ * ItemActions
+ *
+ * Trailing row for an `Item` — centers and gaps its children (a chevron
+ * icon, a `Switch`, value text, etc.).
+ */
+export function ItemActions({ children, style }) {
+    return _jsx(View, { style: [styles.actions, style], children: children });
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        minHeight: spacing.touchTarget,
+        padding: spacing.md,
+        gap: spacing.md,
+    },
+    content: {
+        flex: 1,
+        justifyContent: "center",
+        gap: spacing.xxs,
+    },
+    actions: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    separator: {
+        height: StyleSheet.hairlineWidth,
+        marginLeft: SEPARATOR_INSET,
+    },
+});

package/dist/components/Label.js

@@ -56,8 +56,13 @@ const createStyles = (theme) => StyleSheet.create({
         marginBottom: spacing.xs,
     },
     label: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "500",
+        // Medium weight: the family carries it on native (a real static
+        // Inter_500Medium file); web shares one "Inter" family across weights,
+        // so it needs the numeric fontWeight to pick the right @font-face
+        // variant. Setting fontWeight on native would faux-bold on top of the
+        // already-medium file (same rule as StyledText's WEB_FONT_WEIGHTS).
+        fontFamily: fontFamilies.sansSerif.medium,
+        ...(Platform.OS === "web" && { fontWeight: "500" }),
         color: theme.colors.text,
         userSelect: "none",
     },

package/dist/components/Notification.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback, use, useEffect, useEffectEvent, useRef } from "react";
 import { Animated, Easing, StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
-import { fontFamilies } from "../constants/fonts.js";
 import { Icon } from "./Icon.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
+import { durations } from "../constants/motion.js";
 import { StyledText } from "./StyledText.js";
 import { palette } from "../constants/colors.js";
 import { translateText } from "../lib/i18n.js";
 import { globalUIStore } from "../state/globalUIStore.js";
-const timingIn = { duration: 150, easing: Easing.out(Easing.quad), useNativeDriver: true };
-const timingOut = { duration: 100, easing: Easing.in(Easing.quad), useNativeDriver: true };
+const timingIn = { duration: durations.fast, easing: Easing.out(Easing.quad), useNativeDriver: true };
+const timingOut = { duration: durations.instant, easing: Easing.in(Easing.quad), useNativeDriver: true };
 /**
  * Notification
  *
@@ -219,14 +219,14 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("elevated"),
-            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
+            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, size: "base", fontWeight: "semibold", style: { color: theme.colors.foreground }, numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, size: "sm", style: { color: theme.colors.mutedForeground }, numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
                         styles.actionButton,
                         {
                             borderColor: theme.colors.primary + "30",
                             backgroundColor: theme.colors.primary + "10",
                         },
                         pressed && styles.actionButtonPressed,
-                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, style: [styles.actionLabel, { color: theme.colors.primary }], numberOfLines: 1, children: action.label }) })), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
+                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, size: "sm", fontWeight: "semibold", style: { color: theme.colors.primary }, numberOfLines: 1, children: action.label }) })), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
 };
 const createStyles = (theme) => StyleSheet.create({
     container: {
@@ -270,17 +270,11 @@ const createStyles = (theme) => StyleSheet.create({
         justifyContent: "center",
         gap: spacing.xxs,
     },
-    alertTitle: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "600",
-        fontSize: 14,
-        lineHeight: 20,
-    },
-    alertDescription: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontSize: 13,
-        lineHeight: 18,
-    },
+    // alertTitle/alertDescription/actionLabel font styling (family, size,
+    // weight, lineHeight) now comes entirely from StyledText's size/fontWeight
+    // props (see JSX above) — the nearest tokens to the previous hardcoded
+    // values (14/20/600, 13/18/regular, 13/18/600) are "base"+"semibold",
+    // "sm", and "sm"+"semibold" respectively.
     actionButton: {
         minHeight: 28,
         maxWidth: 140,
@@ -295,12 +289,6 @@ const createStyles = (theme) => StyleSheet.create({
     actionButtonPressed: {
         opacity: 0.75,
     },
-    actionLabel: {
-        fontFamily: fontFamilies.sansSerif.regular,
-        fontWeight: "600",
-        fontSize: 13,
-        lineHeight: 18,
-    },
     closeButton: {
         position: "absolute",
         top: spacing.sm,

package/dist/components/Popover.d.ts

@@ -5,15 +5,8 @@ import { View, ViewProps } from "react-native";
  * Popover Trigger Component
  * The element that triggers the popover to open/close
  */
-declare const PopoverTrigger: {
-    ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
-        asChild?: boolean;
-    } & {
-        onKeyDown?: (ev: React.KeyboardEvent) => void;
-        onKeyUp?: (ev: React.KeyboardEvent) => void;
-    } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
-    displayName: string;
-};
+type PopoverTriggerProps = PopoverPrimitive.TriggerProps;
+declare function PopoverTrigger({ disabled, ...props }: PopoverTriggerProps): React.JSX.Element;
 interface PopoverContentProps extends PopoverPrimitive.ContentProps {
     /**
      * Optional portal host name for custom portal mounting
@@ -62,15 +55,7 @@ declare const Popover: {
     } & React.RefAttributes<View>): React.JSX.Element;
     displayName: string;
 } & {
-    Trigger: {
-        ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
-            asChild?: boolean;
-        } & {
-            onKeyDown?: (ev: React.KeyboardEvent) => void;
-            onKeyUp?: (ev: React.KeyboardEvent) => void;
-        } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
-        displayName: string;
-    };
+    Trigger: typeof PopoverTrigger;
     Content: typeof PopoverContent;
     Header: typeof PopoverHeader;
     Body: typeof PopoverBody;

package/dist/components/Popover.js

@@ -3,16 +3,20 @@ import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
+import { useScalePress } from "../hooks/useScalePress.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";
 import * as React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { palette } from "../constants/colors.js";
-/**
- * Popover Trigger Component
- * The element that triggers the popover to open/close
- */
-const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverTrigger({ disabled, ...props }) {
+    const { animatedStyle: scaleStyle, pressHandlers } = useScalePress({
+        disabled: !!disabled,
+        scaleTo: 0.97,
+        haptic: false,
+    });
+    return (_jsx(Animated.View, { style: scaleStyle, children: _jsx(PopoverPrimitive.Trigger, { disabled: disabled, ...props, onPressIn: pressHandlers.onPressIn, onPressOut: pressHandlers.onPressOut }) }));
+}
 /**
  * FullWindowOverlay wrapper - uses native overlay on iOS for proper z-index handling
  * On Android/Web, uses Fragment to avoid unnecessary nesting