@mrmeg/expo-ui 0.6.1 → 0.7.0

package/dist/components/Card.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-import { View, Pressable, StyleSheet, Platform } from "react-native";
-import Animated from "react-native-reanimated";
+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 { useScalePress } from "../hooks/useScalePress.js";
@@ -30,13 +29,12 @@ import { spacing } from "../constants/spacing.js";
  */
 const CardContext = createContext(null);
 function useCardContext() {
-    const ctx = useContext(CardContext);
-    if (!ctx) {
-        // Fallback for standalone usage without Card parent
-        const { theme } = useTheme();
-        return { theme, styles: createCardStyles(theme) };
-    }
-    return ctx;
+    const ctx = use(CardContext);
+    // useTheme must run unconditionally (Rules of Hooks); createCardStyles is a
+    // plain function, so the `??` keeps the fallback styles lazy.
+    const { theme } = useTheme();
+    // Fallback for standalone usage without a Card parent.
+    return ctx ?? { theme, styles: createCardStyles(theme) };
 }
 function Card({ children, style: styleOverride, variant = "default", onPress, disabled }) {
     const { theme, getShadowStyle } = useTheme();

package/dist/components/Checkbox.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { View, StyleSheet, Pressable, Platform } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { useCallback, useEffect, useRef } from "react";
+import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 import { Icon } from "./Icon.js";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { hapticLight } from "../lib/haptics.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import * as CheckboxPrimitive from "@rn-primitives/checkbox";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -19,30 +19,24 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     const reduceMotion = useReducedMotion();
     const sizeConfig = SIZE_CONFIGS[size];
     // Simple fast opacity for the checkmark icon
-    const checkOpacity = useSharedValue(checked || indeterminate ? 1 : 0);
+    const checkOpacity = useRef(new Animated.Value(checked || indeterminate ? 1 : 0)).current;
     const isVisuallyChecked = !!checked || indeterminate;
+    const animateCheckOpacity = useCallback((nextVisible) => {
+        Animated.timing(checkOpacity, {
+            toValue: nextVisible ? 1 : 0,
+            duration: reduceMotion ? 0 : 60,
+            useNativeDriver: true,
+        }).start();
+    }, [checkOpacity, reduceMotion]);
     useEffect(() => {
-        if (reduceMotion) {
-            checkOpacity.value = withTiming(isVisuallyChecked ? 1 : 0, { duration: 0 });
-        }
-        else {
-            checkOpacity.value = withTiming(isVisuallyChecked ? 1 : 0, { duration: 60 });
-        }
-    }, [checkOpacity, isVisuallyChecked, reduceMotion]);
+        animateCheckOpacity(isVisuallyChecked);
+    }, [animateCheckOpacity, isVisuallyChecked]);
     const wrappedOnCheckedChange = (next) => {
         if (next)
             hapticLight();
-        if (reduceMotion) {
-            checkOpacity.value = withTiming(next ? 1 : 0, { duration: 0 });
-        }
-        else {
-            checkOpacity.value = withTiming(next ? 1 : 0, { duration: 60 });
-        }
+        animateCheckOpacity(next);
         onCheckedChange?.(next);
     };
-    const checkAnimatedStyle = useAnimatedStyle(() => ({
-        opacity: checkOpacity.value,
-    }));
     // Dynamic border color with sufficient contrast against background
     const borderColor = error
         ? theme.colors.destructive
@@ -52,14 +46,11 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
     // 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,
-            borderRadius: spacing.radiusSm,
-            borderWidth: 1,
             width: sizeConfig.size,
             height: sizeConfig.size,
-            justifyContent: "center",
-            alignItems: "center",
             opacity: disabled ? 0.5 : 1,
             ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
@@ -69,7 +60,7 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
         }, accessibilityLabel: label, children: _jsx(CheckboxPrimitive.Indicator, { style: {
                 justifyContent: "center",
                 alignItems: "center",
-            }, children: _jsx(Animated.View, { style: checkAnimatedStyle, children: indeterminate ? (_jsx(Icon, { name: "minus", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) : (_jsx(Icon, { name: "check", size: sizeConfig.iconSize, color: theme.colors.primaryForeground })) }) }) }));
+            }, children: _jsx(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;
@@ -86,6 +77,12 @@ function Checkbox({ size = "md", label, indeterminate = false, error = false, st
                     ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
 const styles = StyleSheet.create({
+    box: {
+        borderRadius: spacing.radiusSm,
+        borderWidth: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
     container: {
         flexDirection: "row",
         alignItems: "center",

package/dist/components/Collapsible.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Animated, Platform, StyleSheet, View } from "react-native";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.js";
+import { 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 * as CollapsiblePrimitive from "@rn-primitives/collapsible";
@@ -26,11 +25,8 @@ function CollapsibleTrigger({ style: styleOverride, ...props }) {
                 } }) }) }));
 }
 function CollapsibleContent({ forceMount, style: styleOverride, children, ...props }) {
-    const { theme } = useTheme();
-    const fadeAnim = React.useRef(new Animated.Value(1)).current;
-    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Content, { ...props, forceMount: forceMount, children: _jsx(Animated.View, { style: {
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(CollapsiblePrimitive.Content, { ...props, forceMount: forceMount, children: _jsx(View, { style: {
                     overflow: "hidden",
-                    opacity: fadeAnim,
                     ...(styleOverride && typeof styleOverride !== "function"
                         ? StyleSheet.flatten(styleOverride)
                         : {}),

package/dist/components/Dialog.js

@@ -5,7 +5,7 @@ import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import * as DialogPrimitive from "@rn-primitives/dialog";
 import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";

package/dist/components/DismissKeyboard.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Pressable, Keyboard, Platform, KeyboardAvoidingView, ScrollView } from "react-native";
+const handleDismissKeyboard = () => Platform.OS !== "web" && Keyboard.dismiss();
 /**
  * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
  */
 export const DismissKeyboard = ({ children, style, avoidKeyboard = true, scrollable = true }) => {
-    const handlePress = () => Platform.OS !== "web" && Keyboard.dismiss();
     const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: children })) : (children);
     if (!avoidKeyboard) {
-        return (_jsx(Pressable, { onPress: handlePress, accessible: false, style: { flex: 1 }, children: content }));
+        return (_jsx(Pressable, { onPress: handleDismissKeyboard, accessible: false, style: { flex: 1 }, children: content }));
     }
-    return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], behavior: Platform.OS === "ios" ? "padding" : "height", keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, children: _jsx(Pressable, { onPress: handlePress, accessible: false, style: { flex: 1 }, children: content }) }));
+    return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], behavior: Platform.OS === "ios" ? "padding" : "height", keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, children: _jsx(Pressable, { onPress: handleDismissKeyboard, accessible: false, style: { flex: 1 }, children: content }) }));
 };

package/dist/components/Drawer.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useReducer, useRef } from "react";
-import { View, Pressable, Animated, StyleSheet, Platform, Dimensions, PanResponder, } from "react-native";
+import React, { createContext, use, useState, useReducer, useRef } from "react";
+import { View, Pressable, Animated, StyleSheet, Platform, PanResponder, } from "react-native";
 import { Portal } from "@rn-primitives/portal";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import { Pressable as SlotPressable } from "@rn-primitives/slot";
 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 { TextColorContext, TextClassContext } from "./StyledText.js";
+import { TextColorContext, TextClassContext } from "./StyledText.context";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
  * Drawer Component with Sub-components
@@ -50,7 +51,7 @@ const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fr
 // ============================================================================
 const DrawerContext = createContext(null);
 function useDrawerContext() {
-    const context = useContext(DrawerContext);
+    const context = use(DrawerContext);
     if (!context) {
         throw new Error("Drawer components must be used within a Drawer");
     }
@@ -59,13 +60,12 @@ function useDrawerContext() {
 // ============================================================================
 // Utility Functions
 // ============================================================================
-function parseWidth(width) {
+function parseWidth(width, screenWidth) {
     if (typeof width === "number") {
         return width;
     }
     // Parse percentage string
     const percentage = parseFloat(width) / 100;
-    const screenWidth = Dimensions.get("window").width;
     return screenWidth * percentage;
 }
 function drawerReducer(state, action) {
@@ -103,7 +103,9 @@ function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange
             dispatch({ type: newOpen ? "OPEN" : "CLOSE" });
         }
     };
-    const parsedWidth = parseWidth(width);
+    // useDimensions reacts to rotation / split-screen, unlike Dimensions.get.
+    const { width: screenWidth } = useDimensions();
+    const parsedWidth = parseWidth(width, screenWidth);
     const contextValue = {
         open,
         onOpenChange,
@@ -148,10 +150,19 @@ function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThre
     const { open, onOpenChange, side, width, closeOnBackdropPress } = drawerContext;
     const { theme, getShadowStyle } = useTheme();
     const insets = useSafeAreaInsets();
-    // Animation values - initialize based on initial open state
+    // Animation values - initialize lazily so the Animated.Value is allocated
+    // once on first render instead of being rebuilt and discarded every render.
     const closedPosition = side === "left" ? -width : width;
-    const translateX = useRef(new Animated.Value(open ? 0 : closedPosition)).current;
-    const backdropOpacity = useRef(new Animated.Value(open ? 1 : 0)).current;
+    const translateXRef = useRef(null);
+    if (translateXRef.current === null) {
+        translateXRef.current = new Animated.Value(open ? 0 : closedPosition);
+    }
+    const translateX = translateXRef.current;
+    const backdropOpacityRef = useRef(null);
+    if (backdropOpacityRef.current === null) {
+        backdropOpacityRef.current = new Animated.Value(open ? 1 : 0);
+    }
+    const backdropOpacity = backdropOpacityRef.current;
     // Track if drawer is actually visible (for unmounting after close animation)
     const [isVisible, setIsVisible] = useState(open);
     // Track what we last animated to - persists across renders

package/dist/components/DropdownMenu.d.ts

@@ -115,9 +115,10 @@ declare function DropdownMenuSeparator({ style: styleOverride, ...props }: Dropd
  * Text component for displaying keyboard shortcuts
  */
 interface DropdownMenuShortcutProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    text?: string;
     style?: TextStyle;
 }
-declare function DropdownMenuShortcut({ style: styleOverride, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
 export type { DropdownMenuTriggerProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };

package/dist/components/DropdownMenu.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Platform, StyleSheet, Text, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
@@ -91,14 +91,7 @@ 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: {
-                    position: "relative",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: spacing.sm,
-                    borderRadius: spacing.radiusSm,
-                    paddingHorizontal: spacing.sm,
-                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                    backgroundColor: "transparent",
+                    ...styles.item,
                     ...(Platform.OS === "web" && {
                         cursor: props.disabled ? "not-allowed" : "pointer",
                         outlineStyle: "none",
@@ -114,15 +107,7 @@ function DropdownMenuItem({ inset = false, variant = "default", style: styleOver
 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: {
-                    position: "relative",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: spacing.sm,
-                    borderRadius: spacing.radiusSm,
-                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                    paddingLeft: spacing.xl,
-                    paddingRight: spacing.sm,
-                    backgroundColor: "transparent",
+                    ...styles.indicatorItem,
                     ...(Platform.OS === "web" && {
                         cursor: props.disabled ? "not-allowed" : "pointer",
                         outlineStyle: "none",
@@ -144,15 +129,7 @@ function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props })
 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: {
-                    position: "relative",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: spacing.sm,
-                    borderRadius: spacing.radiusSm,
-                    paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
-                    paddingLeft: spacing.xl,
-                    paddingRight: spacing.sm,
-                    backgroundColor: "transparent",
+                    ...styles.indicatorItem,
                     ...(Platform.OS === "web" && {
                         cursor: props.disabled ? "not-allowed" : "pointer",
                         outlineStyle: "none",
@@ -203,7 +180,7 @@ function DropdownMenuSeparator({ style: styleOverride, ...props }) {
                 : {}),
         } }));
 }
-function DropdownMenuShortcut({ style: styleOverride, ...props }) {
+function DropdownMenuShortcut({ children, text, style: styleOverride, ...props }) {
     const { theme } = useTheme();
     return (_jsx(Text, { ...props, style: [
             {
@@ -215,6 +192,29 @@ function DropdownMenuShortcut({ style: styleOverride, ...props }) {
                 userSelect: "none",
             },
             styleOverride,
-        ] }));
+        ], children: text ?? children }));
 }
+const styles = StyleSheet.create({
+    item: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+        borderRadius: spacing.radiusSm,
+        paddingHorizontal: spacing.sm,
+        paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+        backgroundColor: "transparent",
+    },
+    indicatorItem: {
+        position: "relative",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+        borderRadius: spacing.radiusSm,
+        paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+        paddingLeft: spacing.xl,
+        paddingRight: spacing.sm,
+        backgroundColor: "transparent",
+    },
+});
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/EmptyState.js

@@ -26,7 +26,7 @@ import { spacing } from "../constants/spacing.js";
 export function EmptyState({ icon, iconSize = 48, title, description, actionLabel, onAction, actionPreset = "default", style, children, }) {
     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, style: styles.action, children: actionLabel }))] }));
+    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 }))] }));
 }
 const createStyles = (theme) => StyleSheet.create({
     container: {

package/dist/components/InputOTP.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useRef, useState, useCallback } from "react";
+import { useMemo, useRef, useState, useCallback } from "react";
 import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { fontFamilies } from "../constants/fonts.js";
@@ -11,7 +10,6 @@ const CELL_HEIGHT = 40;
 const CELL_FONT_SIZE = 20;
 const CELL_FONT_WEIGHT = "600";
 const BULLET = "\u2022";
-const ANIM_DURATION = 60;
 /**
  * OTP/verification code input with individual character cells.
  *
@@ -30,7 +28,6 @@ const ANIM_DURATION = 60;
  */
 function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = false, errorText, disabled = false, autoFocus = false, secureTextEntry = false, inputMode = "numeric", style: styleOverride, }) {
     const { theme } = useTheme();
-    const reduceMotion = useReducedMotion();
     const inputRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const styles = useMemo(() => createStyles(theme), [theme]);
@@ -61,13 +58,13 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
             return;
         }
     }, [value]);
-    const handleFocus = useCallback(() => {
+    const markOtpFocused = useCallback(() => {
         setFocused(true);
     }, []);
-    const handleBlur = useCallback(() => {
+    const markOtpBlurred = useCallback(() => {
         setFocused(false);
     }, []);
-    return (_jsxs(View, { style: StyleSheet.flatten([styles.container, styleOverride]), children: [_jsx(RNTextInput, { ref: inputRef, value: value, onChangeText: handleChangeText, onKeyPress: handleKeyPress, onFocus: handleFocus, onBlur: handleBlur, maxLength: length, autoFocus: autoFocus, editable: !disabled, inputMode: inputMode, autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, style: styles.hiddenInput, accessibilityLabel: "Verification code input", importantForAccessibility: "yes" }), _jsx(View, { style: styles.cellRow, children: Array.from({ length }, (_, index) => {
+    return (_jsxs(View, { style: StyleSheet.flatten([styles.container, styleOverride]), children: [_jsx(RNTextInput, { ref: inputRef, value: value, onChangeText: handleChangeText, onKeyPress: handleKeyPress, onFocus: markOtpFocused, onBlur: markOtpBlurred, maxLength: length, autoFocus: autoFocus, editable: !disabled, inputMode: inputMode, autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, style: styles.hiddenInput, accessibilityLabel: "Verification code input", importantForAccessibility: "yes" }), _jsx(View, { style: styles.cellRow, children: Array.from({ length }, (_, index) => {
                     const char = value[index] ?? "";
                     const isActive = focused && index === activeIndex;
                     const displayChar = char
@@ -75,52 +72,31 @@ function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = fa
                             ? BULLET
                             : char
                         : "";
-                    return (_jsx(OTPCell, { index: index, total: length, char: displayChar, isActive: isActive, hasError: hasError, disabled: disabled, theme: theme, reduceMotion: reduceMotion, onPress: focusInput }, index));
-                }) }), !!errorText && (_jsx(StyledText, { style: [styles.errorText], children: errorText }))] }));
+                    return (_jsx(OTPCell, { index: index, total: length, char: displayChar, isActive: isActive, hasError: hasError, disabled: disabled, theme: theme, onPress: focusInput }, index));
+                }) }), !!errorText && (_jsx(StyledText, { style: styles.errorText, children: errorText }))] }));
 }
-function OTPCell({ index, total, char, isActive, hasError, disabled, theme, reduceMotion, onPress, }) {
-    const borderWidth = useSharedValue(isActive && !hasError ? 2 : 1);
-    const borderColor = useSharedValue(hasError
+function OTPCell({ index, total, char, isActive, hasError, disabled, theme, onPress, }) {
+    // borderWidth is a layout property — animating it forces a JS-thread layout
+    // pass every frame. The 1↔2px and color changes read as instant for OTP
+    // cells, so compute both during render.
+    const borderWidth = isActive && !hasError ? 2 : 1;
+    const borderColor = hasError
         ? theme.colors.destructive
         : isActive
             ? theme.colors.primary
-            : theme.colors.border);
-    // Update animated values when state changes
-    React.useEffect(() => {
-        const duration = reduceMotion ? 0 : ANIM_DURATION;
-        const targetWidth = isActive && !hasError ? 2 : 1;
-        const targetColor = hasError
-            ? theme.colors.destructive
-            : isActive
-                ? theme.colors.primary
-                : theme.colors.border;
-        borderWidth.value = withTiming(targetWidth, { duration });
-        borderColor.value = withTiming(targetColor, { duration });
-    }, [
-        isActive,
-        hasError,
-        theme.colors.destructive,
-        theme.colors.primary,
-        theme.colors.border,
-        reduceMotion,
-        borderWidth,
-        borderColor,
-    ]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        borderWidth: borderWidth.value,
-        borderColor: borderColor.value,
-    }));
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(Animated.View, { style: [
+            : theme.colors.border;
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(View, { style: [
                 {
                     width: CELL_WIDTH,
                     height: CELL_HEIGHT,
                     borderRadius: spacing.radiusMd,
+                    borderWidth,
                     justifyContent: "center",
                     alignItems: "center",
                     backgroundColor: "transparent",
                     opacity: disabled ? 0.5 : 1,
+                    borderColor,
                 },
-                animatedStyle,
             ], children: _jsx(StyledText, { selectable: false, style: {
                     fontSize: CELL_FONT_SIZE,
                     fontWeight: CELL_FONT_WEIGHT,

package/dist/components/Notification.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useCallback, useContext, useEffect, useRef } from "react";
-import { StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, useReducedMotion, Easing, } from "react-native-reanimated";
+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 { StyledText } from "./StyledText.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 };
 /**
  * Notification
  *
@@ -38,34 +40,46 @@ import { globalUIStore } from "../state/globalUIStore.js";
 export const Notification = () => {
     const { theme, getShadowStyle } = useTheme();
     const reduceMotion = useReducedMotion();
-    const insets = useContext(SafeAreaInsetsContext);
+    const insets = use(SafeAreaInsetsContext);
     const { alert, hide } = globalUIStore();
     const styles = useMemo(() => createStyles(theme), [theme]);
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
-    const opacity = useSharedValue(0);
-    const translateY = useSharedValue(0);
+    const opacity = useRef(new Animated.Value(0)).current;
+    const translateY = useRef(new Animated.Value(0)).current;
     const wasVisibleRef = useRef(false);
     const timerRef = useRef(null);
     const hideNotification = useCallback(() => {
         hide();
     }, [hide]);
-    const timingIn = { duration: 150, easing: Easing.out(Easing.quad) };
-    const timingOut = { duration: 100, easing: Easing.in(Easing.quad) };
     const animateOut = useCallback(() => {
         if (reduceMotion) {
-            opacity.value = withTiming(0, { duration: 0 });
+            opacity.setValue(0);
             hideNotification();
             return;
         }
         const slideTarget = isBottom ? 8 : -8;
-        opacity.value = withTiming(0, timingOut);
-        translateY.value = withTiming(slideTarget, timingOut, (finished) => {
+        Animated.parallel([
+            Animated.timing(opacity, {
+                toValue: 0,
+                ...timingOut,
+            }),
+            Animated.timing(translateY, {
+                toValue: slideTarget,
+                ...timingOut,
+            }),
+        ]).start(({ finished }) => {
             if (finished)
-                runOnJS(hideNotification)();
+                hideNotification();
         });
     }, [reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    // The auto-dismiss timer only needs the latest animateOut; wrapping it in an
+    // Effect Event keeps it out of the deps so the effect doesn't re-run (and
+    // restart the timer) every time animateOut's identity changes.
+    const onAutoDismiss = useEffectEvent(() => {
+        animateOut();
+    });
     useEffect(() => {
         const isNowVisible = alert?.show ?? false;
         const wasVisible = wasVisibleRef.current;
@@ -76,20 +90,28 @@ export const Notification = () => {
             }
             const slideFrom = isBottom ? 8 : -8;
             if (reduceMotion) {
-                opacity.value = withTiming(1, { duration: 0 });
-                translateY.value = withTiming(0, { duration: 0 });
+                opacity.setValue(1);
+                translateY.setValue(0);
             }
             else {
-                opacity.value = 0;
-                translateY.value = slideFrom;
-                opacity.value = withTiming(1, timingIn);
-                translateY.value = withTiming(0, timingIn);
+                opacity.setValue(0);
+                translateY.setValue(slideFrom);
+                Animated.parallel([
+                    Animated.timing(opacity, {
+                        toValue: 1,
+                        ...timingIn,
+                    }),
+                    Animated.timing(translateY, {
+                        toValue: 0,
+                        ...timingIn,
+                    }),
+                ]).start();
             }
         }
         wasVisibleRef.current = isNowVisible;
         if (isNowVisible && !wasVisible && alert?.duration) {
             timerRef.current = setTimeout(() => {
-                animateOut();
+                onAutoDismiss();
             }, alert.duration);
             return () => {
                 if (timerRef.current) {
@@ -98,11 +120,12 @@ export const Notification = () => {
                 }
             };
         }
-    }, [alert, reduceMotion, isBottom, opacity, translateY, animateOut]);
-    const animatedContainerStyle = useAnimatedStyle(() => ({
-        opacity: opacity.value,
-        transform: [{ translateY: translateY.value }],
-    }));
+        // onAutoDismiss is an Effect Event — intentionally omitted from deps.
+    }, [alert, reduceMotion, isBottom, opacity, translateY]);
+    const animatedContainerStyle = {
+        opacity,
+        transform: [{ translateY }],
+    };
     const topPosition = insets?.top ? insets.top : 20;
     const bottomPosition = insets?.bottom ? insets.bottom : 20;
     const getIconProps = () => {
@@ -179,7 +202,9 @@ const createStyles = (theme) => StyleSheet.create({
         position: "absolute",
         left: spacing.md,
         right: spacing.md,
-        zIndex: 1000,
+        // Toast sits above the overlay layer (dialogs/drawers/dropdowns top out
+        // around 52); no need to escalate into the hundreds.
+        zIndex: 60,
         alignItems: "center",
     },
     alert: {

package/dist/components/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as PopoverPrimitive from "@rn-primitives/popover";