@mrmeg/expo-ui 0.6.1 → 0.7.1

package/dist/hooks/useStaggeredEntrance.js

@@ -1,7 +1,8 @@
-import { useEffect } from "react";
-import { useSharedValue, useAnimatedStyle, withTiming, withSpring, withDelay, useReducedMotion, Easing, } from "react-native-reanimated";
+import { useEffect, useMemo, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import { useReducedMotion } from "./useReduceMotion.js";
 /**
- * Hook for entrance animations with stagger support using Reanimated.
+ * Hook for entrance animations with stagger support using React Native Animated.
  *
  * Returns an animated style to apply to an Animated.View.
  * Respects reduced motion preferences.
@@ -22,50 +23,76 @@ import { useSharedValue, useAnimatedStyle, withTiming, withSpring, withDelay, us
 export function useStaggeredEntrance(options = {}) {
     const { type = "fadeSlideUp", delay = 0, duration = 200, slideDistance = 8, initialScale = 0.95, } = options;
     const reduceMotion = useReducedMotion();
-    const opacity = useSharedValue(reduceMotion ? 1 : 0);
-    const translateY = useSharedValue(reduceMotion
+    const opacity = useRef(new Animated.Value(reduceMotion ? 1 : 0)).current;
+    const translateY = useRef(new Animated.Value(reduceMotion
         ? 0
         : type === "fadeSlideUp"
             ? slideDistance
             : type === "fadeSlideDown"
                 ? -slideDistance
-                : 0);
-    const scale = useSharedValue(reduceMotion ? 1 : type === "scale" ? initialScale : 1);
+                : 0)).current;
+    const scale = useRef(new Animated.Value(reduceMotion ? 1 : type === "scale" ? initialScale : 1)).current;
     useEffect(() => {
         if (reduceMotion) {
-            opacity.value = 1;
-            translateY.value = 0;
-            scale.value = 1;
+            opacity.setValue(1);
+            translateY.setValue(0);
+            scale.setValue(1);
             return;
         }
+        opacity.setValue(0);
+        translateY.setValue(type === "fadeSlideUp"
+            ? slideDistance
+            : type === "fadeSlideDown"
+                ? -slideDistance
+                : 0);
+        scale.setValue(type === "scale" ? initialScale : 1);
         const timingConfig = {
             duration,
             easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
         };
-        opacity.value = withDelay(delay, withTiming(1, timingConfig));
+        const animations = [
+            Animated.timing(opacity, {
+                toValue: 1,
+                ...timingConfig,
+            }),
+        ];
         if (type === "fadeSlideUp" || type === "fadeSlideDown") {
-            translateY.value = withDelay(delay, withTiming(0, timingConfig));
+            animations.push(Animated.timing(translateY, {
+                toValue: 0,
+                ...timingConfig,
+            }));
         }
         if (type === "scale") {
-            scale.value = withDelay(delay, withSpring(1, { damping: 14, stiffness: 250 }));
+            animations.push(Animated.spring(scale, {
+                toValue: 1,
+                damping: 14,
+                stiffness: 250,
+                useNativeDriver: true,
+            }));
         }
-    }, [reduceMotion]);
-    const animatedStyle = useAnimatedStyle(() => {
+        const animation = delay > 0
+            ? Animated.sequence([Animated.delay(delay), Animated.parallel(animations)])
+            : Animated.parallel(animations);
+        animation.start();
+        return () => animation.stop();
+    }, [delay, duration, initialScale, opacity, reduceMotion, scale, slideDistance, translateY, type]);
+    const animatedStyle = useMemo(() => {
         if (type === "fade") {
-            return { opacity: opacity.value };
+            return { opacity };
         }
         if (type === "fadeSlideUp" || type === "fadeSlideDown") {
             return {
-                opacity: opacity.value,
-                transform: [{ translateY: translateY.value }],
+                opacity,
+                transform: [{ translateY }],
             };
         }
         // scale
         return {
-            opacity: opacity.value,
-            transform: [{ scale: scale.value }],
+            opacity,
+            transform: [{ scale }],
         };
-    });
+    }, [opacity, scale, translateY, type]);
     return animatedStyle;
 }
 /**

package/dist/state/globalUIStore.d.ts

@@ -5,26 +5,33 @@
  * Primarily used to trigger and dismiss the `Notification` component globally.
  *
  * Methods:
- * - show({ type, title, messages, duration, loading }): displays a notification
+ * - show({ type, title, messages, duration, loading, action }): displays a notification
  * - hide(): hides the current notification
  *
  * Recommended: wrap in hooks or utility functions for cleaner usage across components.
  */
-type State = {
-    alert: {
-        show: boolean;
-        type: "error" | "success" | "info" | "warning";
-        messages?: string[];
-        title?: string;
-        duration?: number;
-        loading?: boolean;
-        /** Where to display the notification */
-        position?: "top" | "bottom";
-    } | null;
+export type GlobalNotificationType = "error" | "success" | "info" | "warning";
+export type GlobalNotificationPosition = "top" | "bottom";
+export type GlobalNotificationAction = {
+    label: string;
+    onPress: () => void;
 };
-type Actions = {
-    show: (alert: Omit<NonNullable<State["alert"]>, "show">) => void;
+export type GlobalNotificationAlert = {
+    show: boolean;
+    type: GlobalNotificationType;
+    title?: string;
+    messages?: string[];
+    duration?: number;
+    loading?: boolean;
+    /** Where to display the notification */
+    position?: GlobalNotificationPosition;
+    action?: GlobalNotificationAction;
+};
+export type GlobalUIState = {
+    alert: GlobalNotificationAlert | null;
+};
+export type GlobalUIActions = {
+    show: (alert: Omit<GlobalNotificationAlert, "show">) => void;
     hide: () => void;
 };
-export declare const globalUIStore: import("zustand").UseBoundStore<import("zustand").StoreApi<State & Actions>>;
-export {};
+export declare const globalUIStore: import("zustand").UseBoundStore<import("zustand").StoreApi<GlobalUIState & GlobalUIActions>>;

package/dist/state/themeColorScope.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 /**
  * Per-subtree color overrides, layered on top of the global theme by `useTheme`.
  *
@@ -13,7 +13,7 @@ import { createContext, useContext, useMemo } from "react";
 const ThemeColorScopeContext = createContext(null);
 /** Read the active scoped override (null when not inside a scope). */
 export function useThemeColorScope() {
-    return useContext(ThemeColorScopeContext);
+    return use(ThemeColorScopeContext);
 }
 // Nested scopes layer: the inner scope's keys win, the outer scope's fill in.
 function mergeScopes(parent, next) {
@@ -25,7 +25,7 @@ function mergeScopes(parent, next) {
     };
 }
 export function ThemeColorScope({ colors, children, }) {
-    const parent = useContext(ThemeColorScopeContext);
+    const parent = use(ThemeColorScopeContext);
     const value = useMemo(() => mergeScopes(parent, colors), [parent, colors]);
     return (_jsx(ThemeColorScopeContext.Provider, { value: value, children: children }));
 }

package/llms-full.md

@@ -36,10 +36,9 @@ the root when the app uses package feedback or overlay components.
 `BottomSheet`, `Drawer`, `DropdownMenu`, `Popover`, `SelectContent`,
 `Tooltip`, or `globalUIStore` notifications.
 
-On native, `BottomSheet.Content` composes its sheet transform with
-`react-native-keyboard-controller` keyboard animation values. Mount that
-library's `KeyboardProvider` near the app root before using bottom sheets with
-text inputs, or pass `avoidKeyboard={false}` for sheets that should not move.
+On native, `BottomSheet.Content` composes its sheet transform with React Native
+keyboard event values. Pass `avoidKeyboard={false}` for sheets that should not
+move.
 
 i18n is optional. Plain children and `text` props work without `i18next` or
 `react-i18next`. Use `configureExpoUiI18n()` only when a consuming app wants
@@ -87,7 +86,7 @@ Use this catalog before creating a new app-local primitive.
 | `Alert` | `@mrmeg/expo-ui/components` | Cross-platform imperative alerts | Avoid direct `window.alert` and duplicated native/web branching. |
 | `AnimatedView` | `@mrmeg/expo-ui/components` | Entrance and visibility animation | Keep simple reveal effects in the package wrapper. |
 | `Badge` | `@mrmeg/expo-ui/components` | Short status labels | Prefer over custom pill views. |
-| `BottomSheet` | `@mrmeg/expo-ui/components` | Mobile-first modal sheets | Requires root `UIProvider`; native text-input sheets also require `KeyboardProvider`. |
+| `BottomSheet` | `@mrmeg/expo-ui/components` | Mobile-first modal sheets | Requires root `UIProvider`; text-input sheets can disable `avoidKeyboard`. |
 | `Button` | `@mrmeg/expo-ui/components` | Commands and CTAs | Use `preset`, not `variant`; visible heights are compact. |
 | `Card` | `@mrmeg/expo-ui/components` | Individual framed content groups | Do not wrap whole page sections in cards. |
 | `Checkbox` | `@mrmeg/expo-ui/components` | Boolean selection in forms or lists | Prefer over custom checkmark controls. |
@@ -102,7 +101,7 @@ Use this catalog before creating a new app-local primitive.
 | `InputOTP` | `@mrmeg/expo-ui/components` | Verification code entry | Prefer over manually managed text input groups. |
 | `Label` | `@mrmeg/expo-ui/components` | Accessible form labels | Use with package form controls. |
 | `MaxWidthContainer` | `@mrmeg/expo-ui/components` | Centered responsive width | Use for web and tablet constrained layouts. |
-| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `globalUIStore` with root `UIProvider`. |
+| `Notification` | `@mrmeg/expo-ui/components` | Global toast surface | Trigger through `globalUIStore` with root `UIProvider`; optional actions dismiss after press. |
 | `Popover` | `@mrmeg/expo-ui/components` | Anchored contextual content | Requires root `UIProvider` portal setup. |
 | `Progress` | `@mrmeg/expo-ui/components` | Determinate or indeterminate progress | Prefer over layout-shifting spinners for progress regions. |
 | `RadioGroup` | `@mrmeg/expo-ui/components` | Small mutually exclusive choices | Use `Select` for longer option sets. |

package/llms.txt

@@ -25,8 +25,8 @@ Call useResources() once near the Expo app root. Mount UIProvider once near the
 root before using package notifications or overlay primitives: Dialog,
 AlertDialog, BottomSheet, Drawer, DropdownMenu, Popover, SelectContent, or
 Tooltip.
-On native, mount react-native-keyboard-controller's KeyboardProvider before
-using BottomSheet.Content with text inputs; avoidKeyboard defaults to true.
+BottomSheet.Content uses React Native keyboard events for text inputs;
+avoidKeyboard defaults to true.
 
 Use useTheme(), useStyles(), semantic tokens, StyledText, and package controls.
 Do not add app-local Appearance or matchMedia listeners for package theme sync.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -69,6 +69,10 @@
       "types": "./dist/state/index.d.ts",
       "default": "./dist/state/index.js"
     },
+    "./state/*": {
+      "types": "./dist/state/*.d.ts",
+      "default": "./dist/state/*.js"
+    },
     "./lib": {
       "types": "./dist/lib/index.d.ts",
       "default": "./dist/lib/index.js"
@@ -76,8 +80,9 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false",
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs",
+    "test": "jest --config ../../jest.config.js packages/ui/src --runInBand --watchman=false && bun run check:forbidden-imports",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-ui-package-esm.mjs && bun run check:forbidden-imports",
+    "check:forbidden-imports": "node ../../scripts/check-ui-forbidden-imports.mjs",
     "publish:dry-run": "bun pm pack --dry-run"
   },
   "dependencies": {
@@ -109,12 +114,9 @@
     "react": ">=19.2.0 <20.0.0",
     "react-native": ">=0.83.0 <0.86.0",
     "react-native-gesture-handler": ">=2.30.0 <2.32.0",
-    "react-native-keyboard-controller": ">=1.20.0 <2.0.0",
-    "react-native-reanimated": ">=4.2.0 <5.0.0",
     "react-native-safe-area-context": ">=5.6.0 <6.0.0",
     "react-native-screens": ">=4.23.0 <5.0.0",
     "react-native-web": ">=0.21.0 <0.22.0",
-    "react-native-worklets": ">=0.7.0 <0.9.0",
     "zustand": ">=5.0.0 <6.0.0"
   },
   "devDependencies": {