@mrmeg/expo-ui 0.6.0 → 0.7.0

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";

package/dist/components/Progress.d.ts

@@ -15,8 +15,8 @@ export interface ProgressProps {
  * Progress Component
  *
  * A linear progress bar supporting determinate and indeterminate modes.
- * Determinate mode animates the fill width via Reanimated.
- * Indeterminate mode pulses opacity via RN core Animated.loop.
+ * Determinate mode animates the fill with React Native Animated.
+ * Indeterminate mode pulses opacity via Animated.loop.
  *
  * @example
  * ```tsx

package/dist/components/Progress.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Animated, StyleSheet, View } from "react-native";
-import Reanimated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
 import { useTheme } from "../hooks/useTheme.js";
-import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 // ============================================================================
 // Constants
 // ============================================================================
@@ -19,8 +18,8 @@ const SIZE_MAP = {
  * Progress Component
  *
  * A linear progress bar supporting determinate and indeterminate modes.
- * Determinate mode animates the fill width via Reanimated.
- * Indeterminate mode pulses opacity via RN core Animated.loop.
+ * Determinate mode animates the fill with React Native Animated.
+ * Indeterminate mode pulses opacity via Animated.loop.
  *
  * @example
  * ```tsx
@@ -52,28 +51,28 @@ export function Progress({ value, variant = "default", size = "md", style, }) {
         ]), children: isDeterminate ? (_jsx(DeterminateFill, { value: value, fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) : (_jsx(IndeterminateFill, { fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) }));
 }
 function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion, }) {
-    const [containerWidth, setContainerWidth] = useState(0);
     const clamped = Math.min(100, Math.max(0, value));
-    const animatedWidth = useSharedValue(0);
+    // Animate scaleX (GPU compositor) instead of width (JS-thread layout each
+    // frame). transformOrigin "left" grows the fill from the left edge, so a
+    // full-width bar scaled by clamped/100 needs no container measurement.
+    const scaleX = useRef(new Animated.Value(0)).current;
     useEffect(() => {
-        if (containerWidth === 0)
-            return;
-        const target = (clamped / 100) * containerWidth;
-        animatedWidth.value = withTiming(target, {
+        Animated.timing(scaleX, {
+            toValue: clamped / 100,
             duration: reduceMotion ? 0 : 300,
-        });
-    }, [clamped, containerWidth, reduceMotion]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        width: animatedWidth.value,
-    }));
-    return (_jsx(View, { style: { flex: 1 }, onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width), children: _jsx(Reanimated.View, { style: [
-                {
-                    height,
-                    borderRadius,
-                    backgroundColor: fillColor,
-                },
-                animatedStyle,
-            ] }) }));
+            useNativeDriver: true,
+        }).start();
+    }, [clamped, reduceMotion, scaleX]);
+    return (_jsx(Animated.View, { style: [
+            {
+                width: "100%",
+                height,
+                borderRadius,
+                backgroundColor: fillColor,
+                transformOrigin: "left",
+            },
+            { transform: [{ scaleX }] },
+        ] }));
 }
 function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
     const opacity = useRef(new Animated.Value(reduceMotion ? 0.7 : 0.4)).current;
@@ -82,26 +81,29 @@ function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
             opacity.setValue(0.7);
             return;
         }
+        opacity.setValue(0.4);
         const animation = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
-                toValue: 1.0,
+                toValue: 1,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
             Animated.timing(opacity, {
                 toValue: 0.4,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
         ]));
         animation.start();
         return () => animation.stop();
     }, [opacity, reduceMotion]);
-    return (_jsx(Animated.View, { style: {
-            width: "40%",
-            height,
-            borderRadius,
-            backgroundColor: fillColor,
-            opacity,
-        } }));
+    return (_jsx(Animated.View, { style: [
+            {
+                width: "40%",
+                height,
+                borderRadius,
+                backgroundColor: fillColor,
+            },
+            { opacity },
+        ] }));
 }

package/dist/components/RadioGroup.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect } from "react";
-import { View, StyleSheet, Pressable, Platform } from "react-native";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import React, { createContext, use, useEffect, useRef } from "react";
+import { View, StyleSheet, Pressable, Platform, Animated } from "react-native";
 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 RadioGroupPrimitive from "@rn-primitives/radio-group";
 const DEFAULT_HIT_SLOP = 8;
 const SIZE_CONFIGS = {
@@ -14,8 +14,11 @@ const SIZE_CONFIGS = {
     lg: { outer: 24, inner: 12, borderWidth: 1 },
 };
 const RadioGroupContext = createContext(null);
+function handleRadioPress() {
+    hapticLight();
+}
 function useRadioGroupContext() {
-    const context = useContext(RadioGroupContext);
+    const context = use(RadioGroupContext);
     if (context === null) {
         throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
     }
@@ -38,7 +41,8 @@ function useRadioGroupContext() {
  */
 function RadioGroupRoot({ size = "md", error = false, value, onValueChange, style: styleOverride, children, ...props }) {
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    return (_jsx(RadioGroupContext.Provider, { value: { size, error, value, onValueChange }, children: _jsx(RadioGroupPrimitive.Root, { ...props, value: value, onValueChange: onValueChange, style: {
+    const contextValue = React.useMemo(() => ({ size, error, value, onValueChange }), [size, error, value, onValueChange]);
+    return (_jsx(RadioGroupContext.Provider, { value: contextValue, children: _jsx(RadioGroupPrimitive.Root, { ...props, value: value, onValueChange: onValueChange, style: {
                 flexDirection: "column",
                 gap: spacing.listItemSpacing,
                 ...(flattenedStyle || {}),
@@ -56,19 +60,14 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
     const sizeConfig = SIZE_CONFIGS[size];
     const isChecked = groupValue === itemValue;
     // Animated dot scale — follows Checkbox opacity pattern
-    const dotScale = useSharedValue(isChecked ? 1 : 0);
+    const dotScale = useRef(new Animated.Value(isChecked ? 1 : 0)).current;
     useEffect(() => {
-        dotScale.value = reduceMotion
-            ? (isChecked ? 1 : 0)
-            : withTiming(isChecked ? 1 : 0, { duration: 60 });
+        Animated.timing(dotScale, {
+            toValue: isChecked ? 1 : 0,
+            duration: reduceMotion ? 0 : 60,
+            useNativeDriver: true,
+        }).start();
     }, [isChecked, reduceMotion, dotScale]);
-    const dotStyle = useAnimatedStyle(() => ({
-        transform: [{ scale: dotScale.value }],
-    }));
-    // Wrap onPress to add haptic feedback
-    const handlePress = () => {
-        hapticLight();
-    };
     // Border color follows Checkbox pattern
     const borderColor = error
         ? theme.colors.destructive
@@ -76,20 +75,19 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
             ? theme.colors.primary
             : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
     const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
-    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handlePress, style: {
+    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handleRadioPress, style: {
+            ...styles.radio,
             borderColor,
             backgroundColor: theme.colors.background,
             borderRadius: sizeConfig.outer / 2,
             borderWidth: sizeConfig.borderWidth,
             width: sizeConfig.outer,
             height: sizeConfig.outer,
-            justifyContent: "center",
-            alignItems: "center",
             opacity: disabled ? 0.5 : 1,
             ...(Platform.OS === "web" && { cursor: disabled ? "not-allowed" : "pointer" }),
             ...(flattenedStyle || {}),
         }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
-                dotStyle,
+                { transform: [{ scale: dotScale }] },
                 {
                     width: sizeConfig.inner,
                     height: sizeConfig.inner,
@@ -118,6 +116,10 @@ function RadioGroupItem({ label, required = false, style: styleOverride, labelSt
                     ], children: [label, required && (_jsx(StyledText, { selectable: false, style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
 }
 const styles = StyleSheet.create({
+    radio: {
+        justifyContent: "center",
+        alignItems: "center",
+    },
     container: {
         flexDirection: "row",
         alignItems: "center",

package/dist/components/Select.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Platform, StyleSheet, View } from "react-native";
 import { Icon } from "./Icon.js";
 import { AnimatedView } from "./AnimatedView.js";
-import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.js";
+import { TextClassContext, TextColorContext, TextSelectabilityContext } from "./StyledText.context";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import * as SelectPrimitive from "@rn-primitives/select";
@@ -37,14 +37,10 @@ function SelectTrigger({ size = "md", error = false, children, style: styleOverr
     const { theme } = useTheme();
     const sizeConfig = SIZE_CONFIGS[size];
     return (_jsx(SelectPrimitive.Trigger, { disabled: disabled, ...props, style: {
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center",
+            ...styles.trigger,
             height: sizeConfig.height,
             paddingHorizontal: sizeConfig.paddingHorizontal,
-            borderWidth: 1,
             borderColor: error ? theme.colors.destructive : theme.colors.border,
-            borderRadius: spacing.radiusMd,
             backgroundColor: theme.colors.background,
             ...(Platform.OS === "web" && {
                 cursor: disabled ? "not-allowed" : "pointer",
@@ -98,19 +94,13 @@ function SelectContent({ side, align = "start", sideOffset = 4, portalHost, styl
 }
 function SelectItem({ children, style: styleOverride, ...props }) {
     const { theme } = useTheme();
-    const shouldRenderDefaultText = children == null ||
-        typeof children === "string" ||
-        typeof children === "number";
+    // Render custom element/array children when provided; otherwise fall back to
+    // the default ItemText driven by the required `label` prop. Discriminating on
+    // "is this a renderable node?" keeps the API explicit without switching on the
+    // primitive type of children.
+    const hasCustomChildren = React.isValidElement(children) || Array.isArray(children);
     return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(SelectPrimitive.Item, { ...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.item,
                 ...(Platform.OS === "web" && {
                     cursor: props.disabled ? "not-allowed" : "pointer",
                     outlineStyle: "none",
@@ -127,11 +117,11 @@ function SelectItem({ children, style: styleOverride, ...props }) {
                         width: 14,
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: shouldRenderDefaultText ? (_jsx(SelectPrimitive.ItemText, { style: {
+                    }, children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.accent, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), _jsx(TextSelectabilityContext.Provider, { value: false, children: hasCustomChildren ? (children) : (_jsx(SelectPrimitive.ItemText, { style: {
                             color: theme.colors.popoverForeground,
                             fontSize: 14,
                             lineHeight: 20,
-                        } })) : typeof children === "function" ? null : (children) })] }) }));
+                        } })) })] }) }));
 }
 function SelectGroup({ style: styleOverride, ...props }) {
     return (_jsx(SelectPrimitive.Group, { ...props, style: {
@@ -166,6 +156,26 @@ function SelectSeparator({ style: styleOverride, ...props }) {
                 : {}),
         } }));
 }
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderWidth: 1,
+        borderRadius: spacing.radiusMd,
+    },
+    item: {
+        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",
+    },
+});
 /**
  * Select Component with Sub-components
  * Properly typed interface for dot notation access (e.g., Select.Trigger)

package/dist/components/Skeleton.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { View, Animated, StyleSheet } from "react-native";
-import { useReducedMotion } from "react-native-reanimated";
+import { View, StyleSheet, Animated } from "react-native";
 import { useTheme } from "../hooks/useTheme.js";
-import { shouldUseNativeDriver } from "../lib/animations.js";
+import { useReducedMotion } from "../hooks/useReduceMotion.js";
 import { spacing } from "../constants/spacing.js";
 /**
  * Skeleton Component
@@ -26,16 +25,17 @@ export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.r
             opacity.setValue(0.6);
             return;
         }
+        opacity.setValue(0.3);
         const animation = Animated.loop(Animated.sequence([
             Animated.timing(opacity, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
             Animated.timing(opacity, {
                 toValue: 0.3,
                 duration: 800,
-                useNativeDriver: shouldUseNativeDriver,
+                useNativeDriver: true,
             }),
         ]));
         animation.start();
@@ -48,8 +48,8 @@ export function Skeleton({ width = "100%", height = 20, borderRadius = spacing.r
                 height: circle ? resolvedSize : height,
                 borderRadius: circle ? (resolvedSize / 2) : borderRadius,
                 backgroundColor: theme.colors.muted,
-                opacity,
             },
+            { opacity },
             style,
         ] }));
 }