@mrmeg/expo-ui 0.6.1 → 0.7.1

package/dist/components/Button.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
-import { Pressable, StyleSheet, View, Platform, ActivityIndicator, } from "react-native";
-import Animated from "react-native-reanimated";
+import { use, useCallback, useMemo, useState } from "react";
+import { Pressable, StyleSheet, View, Platform, ActivityIndicator, Animated, } from "react-native";
 import { spacing } from "../constants/spacing.js";
-import { StyledText, TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.js";
+import { StyledText } from "./StyledText.js";
+import { Icon } from "./Icon.js";
+import { TextColorContext, TextSelectabilityContext, TextStyleContext } from "./StyledText.context";
 import { fontFamilies } from "../constants/fonts.js";
 import { palette } from "../constants/colors.js";
 import { useTheme } from "../hooks/useTheme.js";
@@ -43,28 +44,32 @@ const getNativeHitSlop = (sizeConfig) => Math.ceil(Math.max(0, spacing.touchTarg
  *
  * Usage:
  * ```tsx
- * // Default button
- * <Button onPress={handler}>
- *   <SansSerifBoldText>Click Me</SansSerifBoldText>
- * </Button>
+ * // Simplest path — plain label via the `text` prop
+ * <Button onPress={handler} text="Click Me" />
  *
  * // Different variants
- * <Button preset="outline" onPress={handler}>Outline</Button>
- * <Button preset="ghost" onPress={handler}>Ghost</Button>
- * <Button preset="destructive" onPress={handler}>Delete</Button>
+ * <Button preset="outline" onPress={handler} text="Outline" />
+ * <Button preset="ghost" onPress={handler} text="Ghost" />
+ * <Button preset="destructive" onPress={handler} text="Delete" />
  *
  * // Different sizes
- * <Button size="sm" onPress={handler}>Small</Button>
- * <Button size="lg" onPress={handler}>Large</Button>
+ * <Button size="sm" onPress={handler} text="Small" />
+ * <Button size="lg" onPress={handler} text="Large" />
  *
  * // Loading state
- * <Button loading onPress={handler}>Processing...</Button>
+ * <Button loading onPress={handler} text="Processing..." />
  *
  * // Full width
- * <Button fullWidth onPress={handler}>Submit</Button>
+ * <Button fullWidth onPress={handler} text="Submit" />
+ *
+ * // Composed content — icon + label via subcomponents
+ * <Button onPress={handler}>
+ *   <Button.Icon name="heart" />
+ *   <Button.Text>Like</Button.Text>
+ * </Button>
  * ```
  */
-export function Button(props) {
+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 { theme, getContrastingColor, getFocusRingStyle, getShadowStyle } = useTheme();
     const styles = useMemo(() => createStyles(theme, size), [theme, size]);
@@ -115,11 +120,11 @@ export function Button(props) {
         haptic: false,
         scaleTo: preset === "link" ? 1 : 0.97,
     });
-    const handleFocus = (event) => {
+    const showFocusRing = (event) => {
         setFocused(true);
         onFocus?.(event);
     };
-    const handleBlur = (event) => {
+    const hideFocusRing = (event) => {
         setFocused(false);
         onBlur?.(event);
     };
@@ -144,7 +149,7 @@ export function Button(props) {
             return nextWidth;
         });
     }, [fullWidth, loading]);
-    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: styles.text, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: handleFocus, onBlur: handleBlur, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextSelectabilityContext.Provider, { value: false, children: _jsx(TextStyleContext.Provider, { value: styles.text, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityState: { disabled: !!isDisabled, busy: loading }, ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut, onFocus: showFocusRing, onBlur: hideFocusRing, style: { alignSelf: fullWidth ? "stretch" : flattenedStyle?.alignSelf ?? "flex-start" }, hitSlop: rest.hitSlop ?? (Platform.OS === "web" ? undefined : getNativeHitSlop(sizeConfig)), disabled: isDisabled, children: (state) => (_jsx(Animated.View, { style: scaleStyle, children: _jsxs(View, { style: [
                                 styles.button,
                                 preset === "default" && styles.buttonDefault,
                                 preset === "outline" && styles.buttonOutline,
@@ -170,15 +175,42 @@ export function Button(props) {
                                                 state.pressed && pressedTextStyleOverride,
                                                 isDisabled && disabledTextStyleOverride,
                                                 textStyleOverride,
-                                            ] })) : children ? (
-                                        // Wrap string children in StyledText to apply control typography.
-                                        typeof children === "string" ? (_jsx(StyledText, { style: [
-                                                styles.text,
-                                                state.pressed && styles.pressedText,
-                                                state.pressed && pressedTextStyleOverride,
-                                                isDisabled && disabledTextStyleOverride,
-                                                textStyleOverride,
-                                            ], children: children })) : (children)) : (null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] })] }) })) }) }) }) }));
+                                            ] })) : (
+                                        // Children render as-is. For text content, use the explicit
+                                        // <Button.Text> subcomponent so it inherits control typography
+                                        // via context instead of relying on a runtime `typeof` check.
+                                        children ?? null), !!RightAccessory && (_jsx(RightAccessory, { style: styles.rightAccessory, pressableState: state, disabled: isDisabled }))] })] }) })) }) }) }) }));
+}
+/**
+ * Button.Text
+ * Text content for a Button. Inherits the button's control typography, color,
+ * and non-selectable behavior from context, so callers state their intent
+ * explicitly instead of relying on the component to inspect `typeof children`.
+ *
+ * ```tsx
+ * <Button onPress={save}>
+ *   <Button.Text>Save</Button.Text>
+ * </Button>
+ * ```
+ */
+function ButtonText(props) {
+    return _jsx(StyledText, { ...props });
+}
+/**
+ * Button.Icon
+ * Icon content for a Button. Defaults its color to the button's text color
+ * (from context) and is decorative by default, since the label conveys meaning.
+ *
+ * ```tsx
+ * <Button onPress={like}>
+ *   <Button.Icon name="heart" />
+ *   <Button.Text>Like</Button.Text>
+ * </Button>
+ * ```
+ */
+function ButtonIcon(props) {
+    const contextColor = use(TextColorContext);
+    return _jsx(Icon, { decorative: true, color: contextColor, ...props });
 }
 const createStyles = (theme, size) => {
     const sizeConfig = SIZE_CONFIGS[size];
@@ -263,3 +295,15 @@ const createStyles = (theme, size) => {
         },
     });
 };
+/**
+ * Button with explicit subcomponents.
+ * - `Button.Text` for label text (inherits control typography)
+ * - `Button.Icon` for icons (inherits the button's text color)
+ *
+ * The `tx`/`text` props remain the simplest path for plain labels.
+ */
+const Button = Object.assign(ButtonRoot, {
+    Text: ButtonText,
+    Icon: ButtonIcon,
+});
+export { Button, ButtonText, ButtonIcon };

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,