@mrmeg/expo-ui 0.7.0 → 0.7.2

package/LLM_USAGE.md

@@ -184,7 +184,7 @@ Use this table before creating a new app-local primitive.
 | `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
 | `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
 | `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms |
-| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, bottom-position alerts |
+| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, action toasts, bottom-position alerts |
 | `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls |
 | `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion |
 | `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer |
@@ -259,5 +259,9 @@ globalUIStore.getState().show({
   type: "success",
   title: "Saved",
   messages: ["Your changes were saved."],
+  action: {
+    label: "View",
+    onPress: openSavedItem,
+  },
 });
 ```

package/README.md

@@ -224,7 +224,7 @@ All components are exported from `@mrmeg/expo-ui/components`; direct imports suc
 | `InputOTP` | Verification code entry | Multiple manually managed text inputs | Email codes, SMS codes, MFA, invite codes |
 | `Label` | Accessible form labels | Plain styled text labels | Required labels, disabled labels, field group labels |
 | `MaxWidthContainer` | Centered responsive width | Per-screen max-width wrappers | Web pages, tablet layouts, settings forms, auth panels |
-| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, loading toast, bottom-position alerts |
+| `Notification` | Global toast surface | Screen-local toast state | Saved/error/sync notifications, action toasts, loading toast, bottom-position alerts |
 | `Popover` | Anchored contextual content | Custom anchored views | Inline help, quick previews, contextual controls, small forms |
 | `Progress` | Determinate or indeterminate progress | Layout-shifting spinners for progress regions | Upload progress, onboarding completion, long-running task state |
 | `RadioGroup`, `RadioGroupItem` | Mutually exclusive choices | Custom radio rows | Plan interval, visibility choice, survey answer, preference setting |
@@ -332,6 +332,10 @@ globalUIStore.getState().show({
   type: "success",
   title: "Saved",
   messages: ["Your changes were saved."],
+  action: {
+    label: "View",
+    onPress: openSavedItem,
+  },
 });
 ```
 

package/dist/components/BottomSheet.js

@@ -40,6 +40,9 @@ import { BottomSheetKeyboardController, useBottomSheetKeyboardAnimation, } from
  */
 // Platform-specific overlay wrapper
 const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// Floor for the keyboard-avoiding height shrink, so a tall keyboard on a short
+// screen can't collapse the sheet to nothing.
+const MIN_KEYBOARD_SHEET_HEIGHT = 220;
 // ============================================================================
 // Context
 // ============================================================================
@@ -52,19 +55,51 @@ function useBottomSheetContext() {
     return context;
 }
 const DragContext = createContext(null);
-function BottomSheetPanel({ accessibilityViewIsModal, children, panHandlers, sheetStyle, styleOverride, translateY, ...props }) {
+function BottomSheetPanel({ accessibilityViewIsModal, animatedHeight, animatedBottom, children, panHandlers, sheetStyle, styleOverride, translateY, ...props }) {
     return (_jsx(Animated.View, { style: [
             sheetStyle,
+            // Layout overrides (JS-driven) must come after sheetStyle so they win.
+            animatedBottom ? { bottom: animatedBottom } : undefined,
+            animatedHeight ? { height: animatedHeight } : undefined,
+            // Open/close + drag (native-driven) live on transform, a separate node.
             { transform: [{ translateY }] },
             styleOverride && typeof styleOverride !== "function"
                 ? StyleSheet.flatten(styleOverride)
                 : undefined,
         ], accessibilityViewIsModal: accessibilityViewIsModal, ...panHandlers, ...props, children: children }));
 }
+/**
+ * Lifts the sheet above the keyboard while keeping its top edge on-screen.
+ *
+ * The naive approach translates the whole rigid box up by the keyboard height,
+ * which shoves the header (and any inputs near the top) off the top of the
+ * screen on tall sheets. Instead we lift the sheet's bottom to sit just above
+ * the keyboard and shrink its height by the same amount, so the top edge holds
+ * steady. The flex Body soaks up the lost height and scrolls, leaving the
+ * header, focused input, and footer all visible.
+ *
+ * This drives layout props (`bottom`/`height`) with a JS-driven keyboard value,
+ * intentionally separate from the native-driven open/close `translateY` — a
+ * single Animated.Value can't feed both a native transform and a JS layout
+ * prop, but distinct nodes on the same view can.
+ */
 function KeyboardAvoidingBottomSheetPanel(props) {
     const { height: keyboardHeight } = useBottomSheetKeyboardAnimation();
-    const composedTranslateY = useMemo(() => Animated.add(props.translateY, keyboardHeight), [keyboardHeight, props.translateY]);
-    return _jsx(BottomSheetPanel, { ...props, translateY: composedTranslateY });
+    // sheetStyle.height is the resolved max snap height (a number, set by Content).
+    const baseHeight = typeof props.sheetStyle.height === "number" ? props.sheetStyle.height : undefined;
+    const animatedHeight = useMemo(() => {
+        if (baseHeight === undefined)
+            return undefined;
+        // keyboardHeight: 0 (closed) → keyboard px (open). Shrink the sheet by it,
+        // clamped to a usable minimum so it never collapses on short screens.
+        const shrunk = Animated.subtract(baseHeight, keyboardHeight);
+        return shrunk.interpolate({
+            inputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
+            outputRange: [MIN_KEYBOARD_SHEET_HEIGHT, baseHeight],
+            extrapolate: "clamp",
+        });
+    }, [baseHeight, keyboardHeight]);
+    return (_jsx(BottomSheetPanel, { ...props, animatedHeight: animatedHeight, animatedBottom: keyboardHeight }));
 }
 // ============================================================================
 // Utility Functions

package/dist/components/BottomSheetKeyboard.js

@@ -1,10 +1,14 @@
 import { useEffect, useRef } from "react";
 import { Animated, Keyboard, Platform } from "react-native";
+// This value drives layout props (a sheet's `bottom`/`height`), which the
+// native animation driver can't touch — so timings here must stay on the JS
+// driver. It also means the value is a positive keyboard height (0 when
+// hidden), letting consumers both lift and shrink the sheet from one source.
 function animateKeyboardOffset(value, toValue, duration = 180) {
     Animated.timing(value, {
         toValue,
         duration,
-        useNativeDriver: true,
+        useNativeDriver: false,
     }).start();
 }
 export function useBottomSheetKeyboardAnimation() {
@@ -16,7 +20,7 @@ export function useBottomSheetKeyboardAnimation() {
         const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
         const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
         const showSubscription = Keyboard.addListener(showEvent, (event) => {
-            animateKeyboardOffset(keyboardHeight, -event.endCoordinates.height, event.duration || 180);
+            animateKeyboardOffset(keyboardHeight, event.endCoordinates.height, event.duration || 180);
         });
         const hideSubscription = Keyboard.addListener(hideEvent, (event) => {
             animateKeyboardOffset(keyboardHeight, 0, event.duration || 160);

package/dist/components/Notification.js

@@ -46,14 +46,29 @@ export const Notification = () => {
     const position = alert?.position ?? "top";
     const isBottom = position === "bottom";
     // Just opacity + translateY — no scale (scale = bouncy feel)
-    const opacity = useRef(new Animated.Value(0)).current;
-    const translateY = useRef(new Animated.Value(0)).current;
+    const opacityRef = useRef(null);
+    if (opacityRef.current === null) {
+        opacityRef.current = new Animated.Value(0);
+    }
+    const opacity = opacityRef.current;
+    const translateYRef = useRef(null);
+    if (translateYRef.current === null) {
+        translateYRef.current = new Animated.Value(0);
+    }
+    const translateY = translateYRef.current;
     const wasVisibleRef = useRef(false);
     const timerRef = useRef(null);
     const hideNotification = useCallback(() => {
         hide();
     }, [hide]);
+    const clearAutoDismissTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
     const animateOut = useCallback(() => {
+        clearAutoDismissTimer();
         if (reduceMotion) {
             opacity.setValue(0);
             hideNotification();
@@ -73,7 +88,18 @@ export const Notification = () => {
             if (finished)
                 hideNotification();
         });
-    }, [reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    }, [clearAutoDismissTimer, reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    const handleActionPress = useCallback(() => {
+        const action = alert?.action;
+        if (!action)
+            return;
+        try {
+            action.onPress();
+        }
+        finally {
+            animateOut();
+        }
+    }, [alert?.action, animateOut]);
     // 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.
@@ -180,6 +206,7 @@ export const Notification = () => {
     const message = alert?.messages?.find((item) => item.trim().length > 0);
     const title = getTitle(message);
     const hasMessage = !!message;
+    const action = alert?.action;
     if (!alert?.show) {
         return null;
     }
@@ -195,7 +222,14 @@ export const Notification = () => {
                 styles.alert,
                 isBottom && styles.alertBottom,
                 getShadowStyle("base"),
-            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
+            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { selectable: false, style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { selectable: false, style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: message }))] }), action && (_jsx(Pressable, { style: ({ pressed }) => [
+                        styles.actionButton,
+                        {
+                            borderColor: theme.colors.primary + "30",
+                            backgroundColor: theme.colors.primary + "10",
+                        },
+                        pressed && styles.actionButtonPressed,
+                    ], hitSlop: spacing.xs, onPress: handleActionPress, accessibilityLabel: action.label, accessibilityRole: "button", children: _jsx(StyledText, { selectable: false, style: [styles.actionLabel, { color: theme.colors.primary }], numberOfLines: 1, children: action.label }) })), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
 };
 const createStyles = (theme) => StyleSheet.create({
     container: {
@@ -248,6 +282,26 @@ const createStyles = (theme) => StyleSheet.create({
         fontSize: 13,
         lineHeight: 18,
     },
+    actionButton: {
+        minHeight: 28,
+        maxWidth: 140,
+        paddingHorizontal: spacing.sm,
+        borderRadius: spacing.radiusSm,
+        borderWidth: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        flexShrink: 0,
+        ...(Platform.OS === "web" && { cursor: "pointer" }),
+    },
+    actionButtonPressed: {
+        opacity: 0.75,
+    },
+    actionLabel: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontWeight: "600",
+        fontSize: 13,
+        lineHeight: 18,
+    },
     closeButton: {
         position: "absolute",
         top: spacing.sm,

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/llms-full.md

@@ -101,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrmeg/expo-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "private": false,
   "description": "Reusable Expo and React Native UI primitives for MrMeg projects.",
   "keywords": [
@@ -24,7 +24,8 @@
   "homepage": "https://github.com/mrmeg/expo-template/tree/main/packages/ui",
   "type": "module",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -69,6 +70,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 +81,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": {